Edit this page

Conditionally Show ColumnMenu Options per Grid Column

Environment

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

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

Give article feedback

Tell us how we can improve this article

close
Dummy