highlight
Gets or sets the table rows (or cells) which are highlighted.
Parameters
elements jQuery|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.
The
highlight
method will not trigger thechange event
.
In case of using frozen (locked) columns, the
highlight
method will return two table row elements for each highlighted item. Each pair of table row elements that correspond to the same data item, will have the samedata-uid
attribute value. One of the table rows will be a descendant ofdiv.k-grid-content-locked
and the other one will be a descendant ofdiv.k-grid-content
.
In order to clear the currently selected row, use the clearHighlight() method.
Example - highlight the first 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 }
],
});
var grid = $("#grid").data("kendoGrid");
const row = grid.tbody.find("tr:eq(0)");
grid.highlight(row);
</script>
Example - get the selected table rows
<div id="grid"></div>
<button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base' 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>
In this article