javascriptkendo-uikendo-grid

Kendo UI Grid select by data item


I have a Kendo UI Grid with a large datasource and paging.

I have an event that fires where I know the underlying data item that I want to select, but am unsure on how to programatically page/select this item in the grid. If the item is not on the current grid page, I cannot use datasource.view() to poke through when the data is not on the current page.

Does anyone know how I can select an item by its underlying data source object?

I've got a similar situation to where i am at @: http://jsfiddle.net/Sbb5Z/1050/ I can get the data item with the following:

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

But then I don't know how to select the same row in the other grid.

Basically in the select event of one grid, I want to go select the same item in another grid. These are not the same datasource, as they have different page setups, but it is the same underlying data array.

I have the data item in the target grid -- but I have no clue how to page/select it in the target grid.

Edit: The best I've come up with sofar is creating a datasource with the same parameters as the original, and paging through it programatically, until I find what I am looking for. Surely there must be a better way?


Solution

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