Close menu on custom column menu item

[Brian Vallelunga]

I have a need for a custom column editor for a grid I'm working on. As such, I'm adding a custom column menu item to handle column editing. My code looks like:

element.kendoGrid({
    columnMenu: {
        filterable: true,
        sortable: true,
        columns: false
    },
    columnMenuInit: function(e) {
        var menu = e.container.find(".k-menu").data("kendoMenu");
        var field = e.field;
        menu.append({ text: "Columns", spriteCssClass: "k-i-columns" });
        menu.bind("select", function(e) {
            if ($(e.item).text() == "Columns") {
                console.log("Custom button for", field);
            }
        });
    }
  // Other configuration here
}

The good news is that the column menu now has my custom Columns menu item in it. The bad news is that after running the custom select function when being clicked, the menu won't close. I've tried menu.close(), but that doesn't do anything. How do I get the popup menu to close after performing my custom action?

[Kiril Nikolov]

Hi Brian,

The problem comes from the fact that you are not closing the popup that is holding the menu item. Please check this example, and let me know if it helps:

http://jsbin.com/IJAQOBi/2

Regards,
Kiril Nikolov
Telerik

[Brian Vallelunga]

Yes, thanks for the code. I couldn't figure out how to access the popup control.

[Kiril Nikolov]

Hi Brian,

I am glad it helped.

In case you have any further questions, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik