剑道网格滚动到选定的行 [英] Kendo Grid scroll to selected row

问题描述

我希望能够调用将 Kendo 网格滚动到所选行的函数.我已经尝试了一些方法，但没有一个奏效，

I want to be able to call a function that scrolls the Kendo grid to the selected row. I´ve already tried some methods but none of them worked,

例如我试过这个:

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);

有人能指出我正确的方向吗?:)

Can anyone point me in the right direction please? :)

--- 编辑---

由于其他原因，我无法绑定到更改事件，因此我必须能够调用将列表滚动到所选行的函数.这就是我尝试使用@Antonis 为我提供的答案的方法.

For other reasons I can not bind to the change event so I have to be able to call a function the scrolls the list to the selected row. This is what I tried with the answer @Antonis provided for me.

var grid = $("#Grid").data("kendoGrid")
grid.element.find(".k-grid-content").animate({  
    scrollTop: this.select().offset().top  
 }, 400);

当我尝试此操作时，它会稍微向下滚动列表，但不会滚动到所选行.我是否通过调用 scrollTop 以错误的方式使用网格对象?

When I tried this it scrolled somewhat down the list but not to the selected row. Am I use the grid object in a wrong way by calling scrollTop on it?

这也是:

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();

推荐答案

您可以在选择一行时自动执行此操作.将函数绑定到 'change' 事件，在那里，您可以滚动到选定的行.(假设您只能选择一行，由 'this.select()' 给出)

You can do it automatically when a row is selected. Bind a function to the 'change' event, and in there, you can scroll to the selected row. ( assuming you can select only one row, which is given by the '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);
}

这篇关于剑道网格滚动到选定的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！