Select Multiple Rows with Checkboxes
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | All |
| Browser | All |
| Browser Version | All |
Description
How can I select multiple rows with checkboxes in the Kendo UI Grid for jQuery?
Solution
The following example demonstrates how to select multiple rows by using the checkbox template in the Grid.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
selectable:"multiple, row",
dataSource: {
data: [
{id: 1, foo: "item1", bar: "name1"},
{id: 2, foo: "item2", bar: "name2"},
{id: 3, foo: "item3", bar: "name3"},
{id: 4, foo: "item4", bar: "name4"},
{id: 5, foo: "item5", bar: "name5"},
{id: 6, foo: "item6", bar: "name6"},
{id: 7, foo: "item7", bar: "name7"},
{id: 8, foo: "item8", bar: "name8"},
{id: 9, foo: "item9", bar: "name9"}
]
},
change: function(e) {
$('tr').find('[type=checkbox]').prop('checked', false);
$('tr.k-selected').find('[type=checkbox]').prop('checked', true);
},
columns: [{
title: "select",
template: '<input class="k-checkbox k-checkbox-md k-rounded-md" type="checkbox" />'
},
{ field: "id" },
{ field: "foo" },
{ field: "bar" }
],
dataBound: function (e) {
$(".checkbox").bind("click", function (e) {
e.stopPropagation();
$(e.target).closest("tr").toggleClass("k-selected");
});
var rows = e.sender.element.find("tr");
rows.each(function(e){
$(this).children().first().on("click", onFirstTDClick);
})
}
});
function onFirstTDClick(e){
e.stopPropagation();
var tr = $(e.target).closest("tr");
tr.find('[type=checkbox]').prop('checked', !tr.hasClass("k-selected"));
tr.toggleClass("k-selected");
}
</script>
For selection or deselection of all rows on the current page of the Grid with a Select All header checkbox please refer to this article.