javascript - Kendo UI Grid 按数据项选择

Question

我有一个带有大型数据源和分页的 Kendo UI Grid。

我有一个事件在我知道要选择的基础数据项时触发，但不确定如何以编程方式在网格中分页/选择该项目。如果该项目不在当前网格页面上，当数据不在当前页面上时，我无法使用 datasource.view() 来查看。

有谁知道如何通过其基础数据源对象选择项目？

我遇到了与我在@处类似的情况: http://jsfiddle.net/Sbb5Z/1050/我可以通过以下方式获取数据项:

 change: function (e) {
      var selectedRows = this.select();
      var dataItem = this.dataItem(selectedRows[0]);
   }

但是我不知道如何在另一个网格中选择同一行。

基本上在一个网格的选择事件中，我想去选择另一个网格中的相同项目。它们不是相同的数据源，因为它们具有不同的页面设置，但它们是相同的底层数据数组。

我在目标网格中有数据项——但我不知道如何在目标网格中分页/选择它。

编辑:到目前为止，我想出的最好办法是创建一个与原始数据源具有相同参数的数据源，并以编程方式对它进行分页，直到找到我要查找的内容。一定有更好的方法吗？

Answer 1

我从 Telerik 那里拿回了这个，并且更干净了:

http://jsfiddle.net/RZwQ2/

function findDataItem(theGrid, dataItem) {
//get grid datasource
var ds = theGrid.dataSource;

var view = kendo.data.Query.process(ds.data(), {
                filter: ds.filter(),
                sort: ds.sort()
            })
            .data;

var index = -1;
// find the index of the matching dataItem
for (var x = 0; x < view.length; x++) {
    if (view[x].Id == dataItem.Id) {
        index = x;
        break;
    }
}

if (index === -1) {
    return;
}

var page = Math.floor(index / theGrid.dataSource.pageSize());    
var targetIndex = index - (page * theGrid.dataSource.pageSize()) + 1;    
//page is 1-based index    
theGrid.dataSource.page(++page);
//grid wants a html element. tr:eq(x) by itself searches in the first grid!    
var row = $("#grid2").find("tr:eq(" + targetIndex + ")");
theGrid.select(row);

console.log('Found it at Page: ' + page + 'index: ' + targetIndex);

}