selectedKeyNames
Gets an array that holds the id field values of the selected rows.
There are a few important things to keep in mind when using
selectedKeyNames.
- In order for the method to return the selected IDs you need to define an ID field in
schema.model.- The selected IDs are sorted in ascending order inside the
selectedKeyNamesarray.
Returns
Array of the id field values of the selected rows.
Example - select the second table row and displays it's dataItem id value
<div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [ { field: "name" }, { field: "age" } ], dataSource: { data: [ { id: 1, name: "Jane Doe", age: 30 }, { id: 2, name: "John Doe", age: 33}, { id: 3, name: "Jim Doe", age: 30 }, { id: 4, name: "Jack Doe", age: 33} ], schema: { model: { id: "id" } } }, selectable: "multiple, row", persistSelection: true }); var grid = $("#grid").data("kendoGrid"); grid.select("tr:eq(2)"); /* The result can be observed in the DevTools(F12) console of the browser. */ console.log(grid.selectedKeyNames()); // displays the id field value for the selected row </script>Example - select a row by Model UID
<div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [ { field: "name" }, { field: "age" } ], dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ], selectable: "multiple, row" }); var grid = $("#grid").data("kendoGrid"); var uid = grid.dataSource.at(1).uid; grid.select("tr[data-uid='" + uid + "']"); </script>Example - select the first table cell
<div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [ { field: "name" }, { field: "age" } ], dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ], selectable: "cell" }); var grid = $("#grid").data("kendoGrid"); grid.select("td:eq(0)"); </script>Example - get the selected table row
<div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [ { field: "name" }, { field: "age" } ], dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ], selectable: "row" }); var grid = $("#grid").data("kendoGrid"); grid.select("tr:eq(1)"); var row = grid.select(); var data = grid.dataItem(row); /* The result can be observed in the DevTools(F12) console of the browser. */ console.log(data.name); // displays "Jane Doe" </script>In this article