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

Conditionally Show ColumnMenu Options per Grid Column


Product Progress® Kendo UI® Grid for jQuery
Product 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: "//"
                            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

In this article