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

Exclude Specific Columns from Column Menu List in Grid

Environment

Product Progress® Kendo UI® Grid for jQuery
Product Version 2018.2.516

Description

A Grid allows the user to hide or show columns through its column menu but how can I hide a specific column and avoid showing it in the column menu list?

Solution

  1. Use the columnMenuInit event of the Grid and add a hidden CSS class to the desired element or elements by using jQuery.
  2. Set display: none to the element by targeting it with the added class hidden.
  <style>
    .hidden {
      display: none !important;
    }
  </style>
columnMenuInit(e){
  e.container.find('li[role="menuitemcheckbox"]:nth-child(2)').addClass("hidden");
}

The following example demonstrates the full implementation of the suggested approach.

<style>
  .hidden {
    display: none !important;
  }
</style>
<div id="grid"></div>
<script>
  $(document).ready(function() {
    $("#grid").kendoGrid({
      columnMenuInit(e){
        e.container.find('li[role="menuitemcheckbox"]:nth-child(2)').addClass("hidden");
      },
      dataSource: {
        type: "odata",
        transport: {
          read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
        },
        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",
        filterable: false
      }
               ]
    });
  });
</script>

See Also

In this article