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

Remove Specific Grid Columns from ColumnMenu

Deprecated The functionality is available from the API. Check column.menu configuration of the Grid.

Environment

Product Grid for Progress® Kendo UI®

Description

How can I remove specific columns from the columnMenu of the Grid?

Solution

Manipulate the columnMenu within the columnMenuInit event of the Grid. With this approach, the specific elements cannot be found based on the field name that is bound to the column, and removed from the DOM.

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

            <script>
              function removeColumnsFromColumnMenu(columns, eventArg){
                var mylist = eventArg.container.find(".k-columns-item>ul li");
                    var listitems = mylist.children('li').get();
                columns.forEach(function(col){
                    mylist.find("[data-field="+ col +"]").closest("li").addClass("hidden");  
                })                  
              }

                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        columnMenuInit: function (e) {
                            //here we pass an array with field names that we want removed from the columnMenu
                            removeColumnsFromColumnMenu(["OrderID", "ShipCountry"], e);                         
                        },
                        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
                        },
                        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",
                            title: "Ship Address",
                            filterable: false
                        }
                        ]
                    });
                });
            </script>

            <style>
                .hidden {
                    display: none !important;
                }
            </style>
        </div>
In this article
Not finding the help you need? Improve this article