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 selectedKeyNames array.

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>