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
- Use the
columnMenuInitevent of the Grid and add ahiddenCSS class to the desired element or elements by using jQuery. - Set
display: noneto the element by targeting it with the added classhidden.
<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>