3

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?

4 Answers 4

11

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

}
0
3

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

9
  • I do have a common id (the fiddle isnt the best example). I can find the data item in the target data source -- but how do I get the grid to page/select that data item? My main problem is when the item is not on the grid's current page. I will update the fiddle..
    – Yablargo
    Nov 4, 2013 at 20:03
  • I've updated the fiddle. I have the "otherItem" -- but have no idea how to page to /select that item in the 2nd grid.
    – Yablargo
    Nov 4, 2013 at 20:08
  • Therein lies the rub. Grid2.items() only has stuff on the current page.
    – Yablargo
    Nov 4, 2013 at 20:51
  • 1
    well yeah, you can only select something that exists, do you want to page through until the element exists? in that case first navigate to the correct page: grid2.dataSource.indexOf(otherItem) / pagesize to get the page, use the page() method to go to the page, then do items() select Nov 4, 2013 at 21:00
  • 1
    hmnm, i would suggest using the .view() method to get the data rather then .data() (or ._data), which would preserve your sort, but I imagine that also respects the page, and only returns the current page? You could load the raw data into a new daaSource, and apply the current filter, sort, but not page, and then get the index. I don't know if that is better then looping but it may be. something like new newds.query($.extend(true {},dataSource.filter(), dataSource.sort())) Nov 4, 2013 at 21:15
2

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());
3
  • Right. OP was to select the same item in another list, by the object reference. This isn't explicitly available and you have to iterate until you find it, sadly.
    – Yablargo
    Feb 24, 2014 at 20:46
  • I am getting grid.select is not a function (type error)
    – Kala J
    Apr 27, 2015 at 2:31
  • check you are given proper div id or not May 1, 2015 at 4:16
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.