Remove Specific Grid Columns from ColumnMenu


Product Grid for ProgressĀ® Kendo UIĀ®


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


Manipulate the columnMenu within the columnMenuInit event of the Grid&mdah;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>

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

                $(document).ready(function () {
                        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: "//"
                            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
In this article
Not finding the help you need? Improve this article