Edit this page

Use Checkboxes inside Column Menus

The following example demonstrates how to use checkboxes inside the column menu of a Grid.

Example
     <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

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve the information

close
Dummy