Implement Default Checkbox Selection in Grid as Initially Checked
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | All |
| Browser | All |
| Browser Version | All |
Description
How can I render everything as selected in the selectable column when the Grid loads?
Solution
Currently, the Grid does not support the setting of the checkbox default state to selected. However, you can still implement related scenarios.
-
To set the
checkedproperty totrue, set it on thedataBoundevent.$("#grid tbody input:checkbox").prop("checked", true); -
To select the checkboxes and the rows they belong to, trigger their
clickin thedataBoundevent.$("#grid tbody input:checkbox").trigger( "click" );
The following example demonstrates how to implement the suggested scenarios.
<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,
scrollable: false,
persistSelection: true,
sortable: true,
dataBound: onDataBound,
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"}]
});
});
function onDataBound(){
if (!$("#grid tbody input:checkbox").prop("checked")) {
$("#grid tbody input:checkbox").trigger("click");
}
}
</script>
</div>