Kendo UI Grid select by data item

|▌冷眼眸甩不掉的悲伤 提交于 2019-12-03 21:24:11
Yablargo

I've gotten this back from Telerik, and is a little cleaner:

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

}

You need to have a common id, or field in the data that you can use to uniquely identify the object in the other dataSource, because the kendo generated UID's are not going to be the same accross two different DataSource instances.

Most generally you define the id in the Model you bound to the grid, which you can use to quickly pluck items from the datasource

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

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

if you don't have a common ID field specified in the model, but do know how to find the item you can loop through the data source looking for it

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

UPDATE:

to select the item in the other grid you need to do this:

 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

I the fiddle you provided uses a really old version of kendo Grid where this won't work...I just realized. are you stuck on the 2011 version? I can probably get something to work at least in theory but the above will work in the newer versions

essentailly you need to match the item you have to a DOM element, in later versions you can use UID because the dom elements all get that on them "data-uid" it looks like if you at id to your model: { } def you can get the tr elements to have data-id which you can use to select the right select using jquery. I use the items()1 method which also doesn't seem to exist on the early version but you can usegrid2.table.find("tr[data-id=]")` instead I believe

Ranga Reddy

Assume div id will be Grid then first we need find the kendoGrid

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

then call the grid.select() to select the currently selected one finally call the grid.dataItem() to get the selected item.

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

To expand upon others, I have a method that takes a single (or multiple) ids to match against:

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

* Obviously Id could be replaced by any field that is in your data item.

Use for selection:

selectItems(grid, "5");
selectItems(grid, ["6", "7"]);
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!