Conditionally Show ColumnMenu Options per Grid Column

Environment

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

Description

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

Solution

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>

            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        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") {                      
                                menu.element.find(">li:not(.k-filter-item)").hide();                      
                      menu.element.find(">li.k-filter-item>ul").unwrap("li").show().prev().hide();
                            }
                        },
                        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
                        }
                        ]
                    });
                });
            </script>
        </div>