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

Removing Specific Options from Grid's Classic ColumnMenu

Environment

Product Version
Progress® Kendo UI® Grid for jQuery 2024.1.130

Description

I want to remove specific options from the Grid's classic columnMenu without using CSS. Specifically, I would like to remove the 'Group column' and 'Set column position' options.

Solution

To achieve this, you can use jQuery during the columnMenuInit event to remove the desired options. Here's an example of how to do it:

$("#grid").kendoGrid({
    columnMenuInit: function(e){
        // hide group, ungroup, setPosition options, and last separator
        var groupOption = $(e.container).find("li.k-menu-item.k-group");
        $(groupOption).css("display", "none");
        var ungroupOption = $(e.container).find("li.k-menu-item.k-ungroup");
        $(ungroupOption).css("display", "none");
        var positionOption = $(e.container).find(".k-position-item");
        $(positionOption).css("display", "none");
        var lastSeparator = $(e.container).find("li.k-separator").last();
        $(lastSeparator).css("display", "none");
    },
    // other grid configurations
});

Please refer to the Progress Kendo UI Dojo for a working example of this solution.

In this article