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

}

Answer 2

您需要在数据中有一个共同的 id 或字段，您可以使用它来唯一标识其他数据源中的对象，因为 kendo 生成的 UID 在两个不同的 DataSource 实例中不会相同。

大多数情况下，您在绑定到网格的模型中定义 id，您可以使用它来快速从数据源中提取项目

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

  var otherItem = otherGrid.dataSource.get(dataItem.id) // will get
}

如果您没有在模型中指定公共 ID 字段，但知道如何查找项目，则可以循环通过数据源查找它

var selectedRows = this.select();
var dataItem = this.dataItem(selectedRows[0]);
var data = otherGrid.dataSource.view();

var otherItem;

for ( var i = 0; i < data.length; i++ ){
    if( data[i].myCommonField === dataItem.myCommonField ) {
       otherItem = data[i];
       break;
    }
}

更新：

要选择另一个网格中的项目，您需要这样做：

 var elements = otherGrid.items(),
     element;

 element = elements.filter("[data-uid='" + otherItem.uid + "']")

 otherGrid.select(element) // to select just the one item

 //OR
 otherGrid.select( otherGrid.select().add(element) ) // to add the item to the current selection

我你提供的小提琴使用了一个非常旧版本的剑道网格，这不起作用......我刚刚意识到。你卡在2011版本上吗？至少在理论上我可能会得到一些工作，但上述内容将在较新的版本中工作

本质上，您需要将您拥有的项目与 DOM 元素相匹配，在以后的版本中，您可以使用 UID，因为 dom 元素都在它们“data-uid”上获取它，如果您在 id 到您的 @ 987654325@ def 您可以让 tr 元素拥有data-id ，您可以使用它来使用 jquery 选择正确的选择。我使用items()1 method which also doesn't seem to exist on the early version but you can usegrid2.table.find("tr[data-id=]")`代替我相信

Answer 3

假设 div id 将是 Grid 那么首先我们需要找到 kendoGrid

var grid = $("#Grid").data("kendoGrid"); 

然后调用grid.select()来选择当前选中的那个 最后调用grid.dataItem()获取选中的item。

var selectedDataItem = grid.dataItem(grid.select());

Answer 4

为了扩展其他人，我有一个方法，它需要一个（或多个）id 来匹配：

function selectItems(grid, idAr)
{
  if(!idAr instanceof Array)idAr = [idAr];
  var items = grid
    .items()
    .filter(function(i, el)
    { 
      return idAr.indexOf(grid.dataItem(el).Id) !== -1; 
    });
  grid.select(items);
}

* 显然 Id 可以替换为数据项中的任何字段。

用于选择：

selectItems(grid, "5");
selectItems(grid, ["6", "7"]);