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

问题描述

欲能够调用滚动剑道网格到选定的行的功能。从来就已经尝试了一些方法，但没有一次成功，

比如我试过这样：

  VAR电网= $（＃网格）。数据（kendoGrid），
    内容= $（K网的内容。）;
content.scrollTop（grid.select（））;
 

从来就也试过这样：

 变种克= $（＃网格）的数据（kendoGrid）;
VAR的DataItem = gr.dataSource.view（）[gr.select（）最接近（TR），指数（）。]
VAR材料= dataItem.id;
VAR行= grid.tbody.find（＆GT; TR：不（.K-分组行））过滤器（功能（我）{。
    回报（this.dataset.id ==材料）;
}）;
content.scrollTop（行）;
 

任何人都可以点我在正确的方向吗？ ：）

--- --- EDITED

有关其他的原因，我不能绑定到更改事件，所以我必须要能够调用一个函数的滚动列表中选定行。这就是我试图与@Antonis为我提供了答案。

  VAR电网= $（＃网格）。数据（kendoGrid）
grid.element.find（K-格内容）。动画（{
    scrollTop的：。this.select（）的偏移量（）顶部
 }，400）;
 

当我尝试这样做不是有点在列表中向下而不是滚动到所选行。我是不是通过调用scrollTop的使用就可以了网格对象以错误的方式？

这也：

  VAR电网= $（＃ItemGrid）的数据（kendoGrid）;
grid.scrollToSelectedRow =功能（）{
    变种selectedRow = this.select（）;
    如果（！selectedRow）{
        返回false;
    }
    this.element.find（K-格内容）。动画（{
        scrollTop的：selectedRow.offset（）顶部
    }，400）;
    返回true;
    };grid.scrollToSelectedRow（）;
 

解决方案

在选择的行可以自动完成。
绑定功能的改变事件，并在那里，你可以滚动到所选行。 （假设你只能选择一排，这是考虑到'this.select（）'）

在这里看到一个例子 - > http://jsfiddle.net/blackjim/9GCYE/5/

在'变'处理程序

  //绑定到改变事件
功能onChangeSelection（五）{    //我们的动画滚动
    this.element.find（K-格内容）。动画（{//使用$（'HTML，身体'），如果你想滚动身体，而不是K-网内容的div
        scrollTop的：。this.select（）的偏移量（）//上面滚动通过给选定行this.select（）
     }，400）;
}
 

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,

for instance I tried this:

var grid = $("#Grid").data("kendoGrid"),
    content = $(".k-grid-content");
content.scrollTop(grid.select());

I´ve also tried this:

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? :)

--- EDITED ---

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

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?

This too:

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

解决方案

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

See an example here --> http://jsfiddle.net/blackjim/9GCYE/5/

the 'change' handler

//    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屋！