How to get row and column index of selected cell in Kendo UI Grid?

Kendo UI is professional HTML 5/ JavaScript framework which provides various HTML 5 controls that can be added to your page efficiently. This article will demonstrate how to fetch row and column index of selected cell in Kendo UI grid. Kendo UI grid returns the selected element from the data source, but it does not return row and column indexes of the same out of box.

To get row and column indexes of selected cell in Kendo UI grid, I have developed a function in JavaScript/ jQuery. Find below configuration for grid with sample data and also function ‘onChange’ contains logic to get the indexes. Variables iRowIndex and iColIndex will store the row and column indexes of selected cell respectively.

Demo: JS Fiddle

Code walkthrough:
1. When user clicks on any cell onChange function will be called automatically as we have set change attribute of grid configuration to ‘onChange’ function.
Note: This function will work if ‘selectable’ property is set to ‘cell’. You can try updating the function if you want only row index.
Click here for more information about change attribute of grid configuration.

2. $.map function searches for selected element and assign it to item variable passed to callback function.

3. Callback function fetches all siblings of selected item and iterates through all the siblings to check column index.
Code:

var oGridData = {
dataSource:{
autoSync: true
, data: [
{ col1: "Row 1", col2: 15, col3: 12, col4: 35, col5: 4, col6: 23, col7: 10, col8: 0 },
{ col1: "Row 2", col2: 15, col3: 12, col4: 35, col5: 4, col6: 23, col7: 10, col8: 0 },
{ col1: "Row 3", col2: 15, col3: 12, col4: 35, col5: 4, col6: 23, col7: 10, col8: 0 },
{ col1: "Row 4", col2: 15, col3: 12, col4: 35, col5: 4, col6: 23, col7: 10, col8: 0 },
{ col1: "Row 14", col2: 15, col3: 12, col4: 35, col5: 4, col6: 23, col7: 10, col8: 0 },
{ col1: "Row 15", col2: 15, col3: 12, col4: 35, col5: 4, col6: 23, col7: 10, col8: 0 },
]
},, columns: [{
field: "col1"
, title: "Column 1"
}, {
field: "col2"
, title: "Column 2"
}, {
field: "col3"
, title: "Column 3"
}, {
field: "col4"
, title: "Column 4"
}, {
field: "col5"
, title: "Column 5"
}, {
field: "col6"
, title: "Column 6"
}, {
field: "col7"
, title: "Column 7"
}, {
field: "col8"
, title: "Column 8"
}
]
, pageable: { pageSize: 5, pageSizes: true }
, editable: {
createAt: “bottom”
}
, change: onChange
, selectable: “cell”
}
};
$(document).ready(function () {$(“#grid”).kendoGrid(oGridData);});
function onChange(oParam, oThis) {
“use strict”;
var that = oThis, sThisDay = “”;
var iRowIndex = -1, iColIndex = -1;
var selected = $.map(this.select(), function (item) {
var arrElements = $(item).parent().children();
var iCounter = 0, iLength = 0
var arrParentElements = $(item).parent().parent().children();
var oCurrentParent = $(item).parent();
iRowIndex = $.inArray(oCurrentParent[0], arrParentElements) + ((oParam.sender.pager.dataSource._page – 1) * oParam.sender.pager.dataSource._pageSize);
iLength = arrElements.length;
for (iCounter = 0; iCounter < iLength; iCounter++) {
if (arrElements[iCounter] === item) {
iColIndex = iCounter;
alert(“Row Number: ” + iRowIndex + “, Col Number: ” + iColIndex);
break;
}
}
});
};

To get more information visit : http://www.cloudfronts.com

Corporate Office Address:
CloudFronts Technologies LLP
503, T-Square
Saki Vihar Road, Andheri E.
Mumbai 400072, INDIA
Phone: +91 92  2358  3878