Is it possible (and if so how) to add an item to the column menu of a kendo UI grid?

Question

So I have a grid and the columns have the good ol' column menu on them with the filtering/sorting/excluding of columns and it all works fine.

The fly in the ointment is that I would like to allow the user to rename a column heading and the obvious place in the UI to allow this is in said column menu.

Something like this:

(where the red bit is just another option that I click on and popup a little window to let me type in a new heading)

Is this possible and how would I do it?

I see that menus can be customized and the grid demo shows how to adjust the stuff in the filter popup but I am not sure how I would add this item (I can see how I would programmatically do the rename but just this getting an option onto the menu has me stumped).

Answer 1

You can use the columnMenuInit event. Two possibilities:

$("#grid").kendoGrid({
    dataSource: dataSource,
    columnMenu: true,
    columnMenuInit: function (e) {
        var menu = e.container.find(".k-menu").data("kendoMenu");
        var field = e.field;

        // Option 1: use the kendoMenu API ...
        menu.append({
            text: "Rename"
        });

        // Option 2: or create custom html and append manually ..
        var itemHtml = '<li id="my-id" class="k-item k-state-default" role="menuitem">' + 
                       '<span class="k-link"><b>Manual entry</b></span></li>';
        $(e.container).find("ul").append(itemHtml);

        // add an event handler
        menu.bind("select", function (e) {
            var menuText = $(e.item).text();
            if (menuText == "Rename") {
                console.log("Rename for", field);
            } else if (menuText === "Manual entry") {
                console.log("Manual entry for", field);
            }
        });
    }
})

See fiddle with two alternatives: http://jsfiddle.net/lhoeppner/jJnQF/

Answer 2

I guess that the point of a filter is to filter, not to make changes on the grid. But anyways i found this Kendo Post that may help you to achieve what you need.

You can also take a look a this one too.