Edit this page

Exclude Hidden Columns from Column Menu List in Grid

Environment

Product Grid for ProgressĀ® Kendo UIĀ®
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

Use the columnMenuInit event of the Grid and remove the desired element or elements by using jQuery.

columnMenuInit(e){
  e.container.find('li[role="menuitemcheckbox"]:nth-child(2)').remove();
}

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

<div id="grid"></div>
<script>
  $(document).ready(function() {
    $("#grid").kendoGrid({
      columnMenuInit(e){
        e.container.find('li[role="menuitemcheckbox"]:nth-child(2)').remove();
      },
      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

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

Give article feedback

Tell us how we can improve this article

close
Dummy