Select Grid Rows Programmatically Based on the DataItem
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Product Version | Tested up to version 2017.2 621 |
Description
I want to have a Grid with some of its checkboxes checked by default when it loads. How can I check checkboxes programmatically by using the selectable column in the Kendo UI Grid?
Solution
- In the
dataBoundevent handler, get the rows with theitems()method of the grid. - Loop through the rows by using the jQuery
eachmethod. - Get every row data by using the
dataItemmethod. - Set the current row as selected by using the
selectmethod.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
pageSize: 10,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
schema: {
model: {
id: "ProductID"
}
}
},
pageable: true,
dataBound: function(e) {
var grid = this;
var rows = grid.items();
$(rows).each(function(e) {
var row = this;
var dataItem = grid.dataItem(row);
if (dataItem.UnitPrice >= 22) {
grid.select(row);
}
});
},
scrollable: false,
persistSelection: true,
sortable: true,
columns: [{
selectable: true,
width: "50px"
},
{
field: "ProductName",
title: "Product Name"
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}"
},
{
field: "UnitsInStock",
title: "Units In Stock"
},
{
field: "Discontinued"
}
]
});
});
</script>
</div>
Notes
The checkbox selectable column is available as of the Kendo UI R2 2017 SP1 release.