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.

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

Answer 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!