Use Both Standard and Checkbox Selection in Grid
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Product Version | Created with version 2020.3.1021 |
Description
How can I use both standard and checkbox selection in the Grid?
Solution
- Enable the checkbox selection.
- Attach an event handler to the
click
event of the row. - By using the
select
method, select or deselect the rows.
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/orders.js"></script>
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: orders,
pageSize: 6,
schema: {
model: {
id: "OrderID"
}
}
},
pageable: {
buttonCount: 5
},
scrollable: false,
persistSelection: true,
navigatable: true,
columns: [
{
selectable:true
},
{
field: "ShipCountry",
title: "Ship Country",
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
]
});
$("#grid tbody").on("click", "tr", function(e) {
if(!$(e.target).is('.k-checkbox')){
var rowElement = this;
var row = $(rowElement);
var grid = $("#grid").getKendoGrid();
if (row.hasClass("k-selected")) {
var selected = grid.select();
selected = $.grep(selected,function(x){
var itemToRemove = grid.dataItem(row);
var currentItem = grid.dataItem(x);
return itemToRemove.OrderID != currentItem.OrderID
})
grid.clearSelection();
grid.select(selected);
e.stopPropagation();
}else{
grid.select(row)
e.stopPropagation();
}
}
});
});
</script>