How do I get the index and data of a selected row in a grouped Kendo grid

Question

I'm trying to access the row index like this:

var grid = $("#grid").data("kendoGrid");
alert(grid.select().index());

I have added my code in this jsfiddle link. This code worked in my system, I dont know why deleteRecord() method isn't invoked in jsfiddle, But that is not actual question.

Here while clicking on last row's cancel button alert message will says index as 8, But the actual index is 4. every button gives me wrong index only.

Solution 1

You're using a very old version of Kendo UI in your fiddle, so selecting didn't work either. The reason it didn't find deleteRecord is that you set your fiddle to wrap in window.onLoad, which happens after document.ready.

Regarding the row index: you need to determine the index relative to the grid's data rows (if you simply get the index of the selected row, it will count the grouping rows as well; the same would happen for detail rows if you had any), so you can use grid.items() like this:

var grid = $("#grid").data("kendoGrid");        
var dataRows = grid.items();
var rowIndex = dataRows.index(grid.select());

See demo here.

If what you're really interested in is accessing the data of the selected row, you should use something like this (note that all of this is assuming your grid is set to cell or single row selection):

var tr = grid.select().closest("tr");
var dataItem = grid.dataItem(tr);

Solution 2

So, it may just be my kendo configuration but the way I had to access the row index of the selected records was like so:

var archGrid = $("#archiveRecords").data("kendoGrid");
var impGrid = $("#importedRecords").data("kendoGrid");

var archRow = archGrid.select();
var impRow = impGrid.select();

var archRowIndex = archRow[0].rowIndex;
var impRowIndex = impRow[0].rowIndex;

So once I had the index set up in my variables I had to set it by adding and removing CSS classes to my specified rows. I had to use a element.find method to do this like so:

if (condition1) {
    impRow.removeClass('k-state-selected');
    $('#importedRecords').data('kendoGrid').element.find('tbody tr:eq(' + archRowIndex + ')').addClass('k-state-selected');
}
else if (condition2){
    archRow.removeClass('k-state-selected');
    $('#archiveRecords').data('kendoGrid').element.find('tbody tr:eq(' + impRowIndex + ')').addClass('k-state-selected');
}

Just posting because I spent a long time looking for how to do set a selected row by the row index. Good luck!

Comments

[Lars Höppner]

@Gunaseelan added to the answer; you may want to consider asking a separate question for additional problems instead

[Gunaseelan]

Thank you friend. also there is another way too. var grid = $("#grid").data("kendoGrid"); var dataItem = grid.dataItem(grid.select()); I dont know this is right way or not. But this works.

[Lars Höppner]

@Gunaseelan your solution will work if selectable is set to "row"; the one I posted will work if selectable is "cell" or "row"

[Gunaseelan]

Okay friend. Thank you for your nice explanation.

[Joseph]

Thanks a lot.. @LarsHöppner

[Kala J]

@LarsHöppner, what if I have selectable set to "single" for mode, "row" for type.

[Lars Höppner]

@KalaJ the only case that's different would be multi-select mode because you'd have to consider multiple data items

[Cobus Kruger]

Actually, this doesn't seem to work when the rows are grouped. In that case, the index you found is of the display order, but that may be different from the actual order of the underlying data source.