New to Kendo UI for jQuery? Download free 30-day trial

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>

See Also

In this article