Kendo Grid滚动到选定的行
我希望能够调用一个将Kendo网格滚动到所选行的函数。 我已经尝试了一些方法，但没有一个方法有效，
比如我试过这个：
var grid = $("#Grid").data("kendoGrid"), content = $(".k-grid-content"); content.scrollTop(grid.select()); 我也试过这个：
var gr = $("#Grid").data("kendoGrid"); var dataItem = gr.dataSource.view()[gr.select().closest("tr").index()]; var material = dataItem.id; var row = grid.tbody.find(">tr:not(.k-grouping-row)").filter(function (i) { return (this.dataset.id == material); }); content.scrollTop(row);
有人能指出我正确的方向吗？ 🙂
—编辑—
由于其他原因，我无法绑定到更改事件，因此我必须能够调用函数将列表滚动到所选行。 这就是我试着用@Antonis为我提供的答案。
var grid = $("#Grid").data("kendoGrid") grid.element.find(".k-grid-content").animate({ scrollTop: this.select().offset().top }, 400);
当我尝试这个时，它在列表中向下滚动但不向所选行滚动。 我通过调用scrollTop以错误的方式使用网格对象吗？
这个也是：
var grid = $("#ItemGrid").data("kendoGrid"); grid.scrollToSelectedRow = function () { var selectedRow = this.select(); if (!selectedRow) { return false; } this.element.find(".k-grid-content").animate({ scrollTop: selectedRow.offset().top }, 400); return true; }; grid.scrollToSelectedRow();
选择行时，您可以自动执行此操作。 将函数绑定到“更改”事件，然后可以滚动到所选行。 （假设您只能选择一行，由’this.select（）’给出）
JSFiddle的例子
‘变更’处理程序
// bind to 'change' event function onChangeSelection(e) { // animate our scroll this.element.find(".k-grid-content").animate({ // use $('html, body') if you want to scroll the body and not the k-grid-content div scrollTop: this.select().offset().top // scroll to the selected row given by 'this.select()' }, 400); }
所以这里的大部分答案都是犯了两个错误，一个只是效率问题，另一个是实际错误。
-
使用
element.find(".k-grid-content")。 这只是大量不必要的。grid.content可以更容易（更快）地为您提供完全相同的内容。 -
使用
.offset()来查找行的位置。 这是不正确的：它将告诉您行相对于文档本身的位置。 如果您的页面允许您滚动整个页面（而不仅仅是网格），则此数字将不正确。而是使用
.position()– 这将为您提供相对于偏移父项的位置。 为了使.position()能够为您提供正确的数字，grid.content的表必须具有position: relative。 这最适用于CSS样式表：.k-grid-content table { 位置：相对; }
无论如何，假设您已经有一个引用（我称之为grid ）到网格本身，并且您将内容窗格设置为relative位置，您所要做的就是：
grid.content.scrollTop(grid.select().position().top);
或者，对于动画，
grid.content.animate({ scrollTop: grid.select().position().top }, 400);
如前所述， grid.content您提供内容窗格，即您要实际滚动的部分。 它是一个jQuery对象。
jQuery对象有一个.scrollTop方法，因此该部分非常简单。 使用其scrollTop属性时， .animate方法的工作方式类似。 现在我们只需要知道滚动到哪里。
为此， grid.select()返回与所选行对应的jQuery对象。 这就是你要滚动到的地方 。 为了获得它的位置，我们使用jQuery .position()方法。 返回值是具有top和left字段的对象; 我们想滚动到它的垂直位置，所以我们使用top 。
当然，这在change回调中最容易使用; grid就是this （因为回调是在网格本身上调用的），并且当选择发生变化时会自动调用更改。 但是，只要您想滚动到选择，就可以调用此代码; 你可以通过使用获得grid ：
grid = $('#theGridsId').data('kendoGrid');
这是更新的代码http://jsfiddle.net/27Phm/12/
// bind to 'change' event function onChangeSelection(e) { try { var $trSelect = this.select(); var $kcontent = this.element.find(".k-grid-content"); if ($trSelect && $trSelect.length == 1 && $kcontent) { var scrollContentOffset = this.element.find("tbody").offset().top; var selectContentOffset = $trSelect.offset().top; var IsMove = false; var distance = selectContentOffset - scrollContentOffset; distance += $kcontent.offset().top; if ($trSelect.prev().length == 1 && distance > $trSelect.prev().offset().top) { distance = (distance - $trSelect.prev().offset().top); //+ ($trSelect.height()); //var toprows = $kcontent.scrollTop() / $trSelect.height(); //top rows above the scroll var selrowtotal = ($trSelect.offset().top - $kcontent.offset().top) + $trSelect.height(); IsMove = selrowtotal > $kcontent.height() ? true : false; if (IsMove) $kcontent.scrollTop(distance); } if (!IsMove && $trSelect.offset().top < $kcontent.offset().top) { distance = selectContentOffset - scrollContentOffset; $kcontent.scrollTop(distance - 15);`enter code here` } } } catch (e) { } }
我有偏移的问题所以位置对我来说更好：
grid.element.find(".k-grid-content").animate({ // use $('html, body') if you want to scroll the body and not the k-grid-content div scrollTop: this.select().position().top // scroll to the selected row given by 'this.select()' }, 400);
我在Kendo移动MVVM中找到了这个function
parent.set('onShow', function (e) { e.view.scroller.reset(); }
要么
app.xxx = kendo.observable({ onShow: function() { e.view.scroller.reset(); } });