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

Include SelectAll for Grid Column Sections in ColumnMenu


Product Progress® Kendo UI® Grid for jQuery


How can I render a Select All option in the column menu of the Grid and show and hide all columns through a checkbox?


Render the checkbox within the columnMenuInit event of the Grid.

You will always need to have at least one visible column in the Grid.

The below example works visually well with the Kendo UI Default v.2 Sass Theme. If using a different theme you, will need to modify the custom styles.

        padding: 6px 12px 6px 11px;
        background: #fff;
        line-height: 26px;

      .custom-class:hover {
        background-color: #f0f0f0;

      .k-group .k-popup {
        border-style: normal; 
        border-width: 0px; 
      .chbx {
        margin-left: 1px;

    <div id="example">
      <div id="grid"></div>
        $(document).ready(function () {
            columnMenuOpen: function (e) {
              e.container.find("[data-role='menu']").data("kendoMenu").bind("activate", function (e) {
                if (e.item.hasClass("k-columns-item")) {
                  var listitems = e.item.find(".k-animation-container").find("li");

                  $(listitems).on("click", function (e) {
                    var that = this;
                    var allChecked = $(that).closest("ul").find("li.k-item input:checked").length === $(that).closest("ul").find("li.k-item input").length;
                    $(".custom-class input")[0].checked = allChecked;

                    $("<span class='custom-class'><label class='k-link' style='padding: 10px 40px 10px 0px;'><input class='chbx k-checkbox k-checkbox-md k-rounded-md' type='checkbox' checked onclick='checkAllMenu(this)'/>Select All</label></span>").prependTo(e.item.find(".k-animation-container"));
            dataSource: {
              type: "odata",
              transport: {
                read: "//"
              schema: {
                model: {
                  fields: {
                    OrderID: { type: "number" },
                    ShipCountry: { type: "string" },
                    ShipName: { type: "string" },
                    ShipAddress: { type: "string" }
              pageSize: 30,
              serverPaging: true,
              serverFiltering: true,
              serverSorting: true
            height: 550,
            sortable: true,
            filterable: true,
            columnMenu: true,
            pageable: true,
            columns: [{
              field: "OrderID",
              title: "Order ID",
              width: 120
            }, {
              field: "ShipCountry",
              title: "Ship Country"
            }, {
              field: "ShipName",
              title: "Ship Name"
            }, {
              field: "ShipAddress",
              title: "Ship Address",
              filterable: false

        function checkAllMenu(el) {
          var checked = el.checked;
           $(el).parents(".custom-class").siblings(".k-child-animation-container").find("li").each(function (e) {
            if (!$(this).hasClass("custom-class") && $(this).find("input")[0].checked !== checked) {
In this article