Use Checkboxes inside the Column Menus of the Grid
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | Windows 10 64bit |
| Preferred Language | JavaScript |
Description
How can I use checkboxes inside the column menu of the Kendo UI Grid for jQuery?
Solution
The following example demonstrates how to use checkboxes inside the column menu of a Grid.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id", menu: false },
{ field: "name", menu: false },
{ field: "age" }
],
columnMenu: true,
dataSource: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
columnMenuInit:function(e){
var menu = e.container.children().data("kendoMenu");
var handler = $.proxy(enableCheckbox, menu);
menu.bind("open", handler).bind("select", handler);
}
});
function enableCheckbox() {
this.element.find(".k-columns-item :checkbox").prop("disabled", false);
}
</script>