select

Gets or sets the table rows (or cells) which are selected.

If the Grid is using frozen (locked) columns and multiple cell selection with string selector, the select method will select and return two table cell elements. This is because the frozen columns feature works with the separate tables for the frozen and non-frozen columns. Each cell element corresponds to the jQuery selector applied for each table. One of the table cells will be a descendant of div.k-grid-content-locked and the other one will be a descendant of div.k-grid-content. The two divs are siblings in the Grid DOM structure. To select just one table cell please use jQuery selector to find the exact one cell from the specific table element and set k-selected class instead of using the select method.

Parameters

rows String|Element|jQuery

A string, DOM element or jQuery object which represents the table row(s) or cell(s). A string is treated as a jQuery selector.

Returns

jQuery the selected table rows or cells.

The select method will not trigger the change event. In older versions of Kendo UI, the select method would trigger the change event, however this behavior was not intended. Refer to the second example for a workaround.

In case of using frozen (locked) columns and row selection, the select method will return two table row elements for each selected item. Each pair of table row elements that correspond to the same data item, will have the same data-uid attribute value. One of the table rows will be a descendant of div.k-grid-content-locked and the other one will be a descendant of div.k-grid-content.

In order to clear the currently selected row, use the clearSelection() method.

Example - select the first and second table rows

<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");
  grid.select("tr:eq(0), tr:eq(1)");
</script>

Example - trigger the change event when a row is selected programmatically.

<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",
    change: function(e) {kendo.alert("Change triggered")}
  });
  var grid = $("#grid").data("kendoGrid");
  grid.select("tr:eq(0), tr:eq(1)");
  grid.trigger("change");
</script>

Example - get the selected table rows

<div id="grid"></div>
<button class='k-button' id="btn">Get selected rows</button>
<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");
  grid.select("tr:eq(0), tr:eq(1)");

  $("#btn").on("click", function(e){
    var rows = grid.select();
    var selectedIds = [];

    $(rows).each(function(){
      selectedIds.push($(this).attr("data-uid"))
    });

/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("Selected row Ids: " + selectedIds.join(", "));
  })
</script>