Edit this page

Conditionally Show ColumnMenu Options per Grid Column


Product Progress Kendo UI Grid
Progress Kendo UI version 2017.3.913


How can I show the columnMenu options for some columns only and keep the filtering options for other columns only?


Customize the columnMenu within the columnMenuInit event per column.

The following example demonstrates how to hide the columnMenu options for some of the columns and expose the filtering for them directly in the popup.

       <div id="example">
            <div id="grid"></div>

                $(document).ready(function () {
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "//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
                        columnMenuInit: function(e) {
                            var menu = e.container.find(".k-menu").data("kendoMenu");
                            var field = e.field;
                    //Only the OrderID and ShipAddress columnMenu will show Columns and Sorting options
                    //ShipCountry and ShipName will display only the filter menu (directly in the columnMenu)
                            if (field != "OrderID" && field != "ShipAddress") {                      
                        height: 550,
                        sortable: true,
                        filterable: true,
                        pageable: true,
                        columnMenu: true,
                        columns: [{
                            field: "OrderID",
                            title: "Order ID",
                            width: 120
                        }, {
                            field: "ShipCountry",
                            title: "Ship Country"
                        }, {
                            field: "ShipName",
                            title: "Ship Name"
                        }, {
                            field: "ShipAddress",
                            filterable: false

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

Give article feedback

Tell us how we can improve this article