Select Only One Grid Row with the Checkbox Selectable Column
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Product Version | Tested up to version 2017.2 621 |
Description
I want to remove the master checkbox of the built-in checkbox column in the Kendo UI Grid. How can I limit the selection to one selected Grid row only?
Solution
- Remove the master checkbox by adding an empty header template to the column.
- Subscribe for the
clickevent of the checkboxes by using a jQuery selector. - In the
clickevent handler, get the row and the row classes by using theclosestjQuery method. - Based on the row classes, use the
clearSelectionmethod of the Grid.
<div id="example">
<div id="grid"></div>
<script>
function onClick(e) {
var grid = $("#grid").data("kendoGrid");
var row = $(e.target).closest("tr");
if(row.hasClass("k-selected")){
setTimeout(function(e) {
var grid = $("#grid").data("kendoGrid");
grid.clearSelection();
})
} else {
grid.clearSelection();
};
};
$(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,
sortable: true,
columns: [{
selectable: true,
width: "50px",
headerTemplate: ' '
},
{
field: "ProductName",
title: "Product Name"
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}"
},
{
field: "UnitsInStock",
title: "Units In Stock"
},
{
field: "Discontinued"
}
]
});
var grid = $("#grid").data("kendoGrid");
grid.tbody.on("click", ".k-checkbox", onClick);
});
</script>
</div>
Notes
The checkbox selectable column is available as of the Kendo UI R2 2017 SP1 release.