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

Highlight

methods

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

highlight

Parameters:elementsjQuery|Array

A jQuery object or array of jQuery objects which represents the table row(s) or cell(s).

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 }
    ],
  });
  var grid = $("#grid").data("kendoGrid");
  const row = grid.tbody.find("tr:eq(0)");
  grid.highlight(row);
</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");
  const row = grid.tbody.find("tr:eq(0)");
  grid.highlight(row);

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

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

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