New to Kendo UI for jQuery? Start a free 30-day trial

Select

methods

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.

select

Parameters:rowsString|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.

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

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

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