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 configuration of the Grid.


Product Progress® Kendo UI® Grid for jQuery


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


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>

              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").addClass("hidden");  

                $(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

                .hidden {
                    display: none !important;
In this article