grid - adding new menu items to individual column header

[loulou]

I am currently adding a new menu item to a grids columnheader menu:

var currentHeaders=grid.headerCt.getMenu();

currentHeaders.add([{
text: 'new option',
menu : {
items: [
{
text: 'item 1', handler: function() {
}
}]
}}]);

this adds the new option to every column header menu - I would like to target a specific column and add the new menu option to just that one - is this possible ?

[James Goddard]

All the columns use a shared menu. To achieve what you are trying to do, you'll need to override the showMenuBy function and customize the menu there.

[loulou]

Ok thanks James, I will look into that

[joshua.ball@osi.com]

Just figured this out this morning. Since the menu is common to all grid columns, you'll need to add all menu items that you'll need into the menu and then show/hide them based on the activeHeader property of the menu. This will allow certain menu items to display based on the column that triggered then menu to be displayed.

var mainMenu = view.headerCt.getMenu();
        mainMenu.on({
            beforeshow: function(menu){
                // If the Severity column triggered the menu, show Severity-specific menu items
                if (menu.activeHeader.dataIndex == 'severity'){
                    for (var i=0; i<menu.items.items.length; i++){
                        if (menu.items.items[i].itemId == 'severityIndicatorMenuItem'){
                            menu.items.items[i].show();
                        }
                    }
                // If any other column, hide Severity-specific menu items
                } else {
                    for (var i=0; i<menu.items.items.length; i++){
                        if (menu.items.items[i].itemId == 'severityIndicatorMenuItem'){
                            menu.items.items[i].hide();
                        }
                    }
                }
            }
        });
        
        // Add custom menu items to the default grid menu
        mainMenu.insert(mainMenu.items.length-2, [{
            itemId: 'toggleSortMenuItem',
            text: 'Toggle Sort',
            handler: function() {
                mainMenu.activeHeader.sortable = (mainMenu.activeHeader.sortable) ? false : true;
            }
        },{
            itemId: 'severityIndicatorMenuItem',
            text: 'Severity Indicator',
            handler: function() {
                // JB - Start here...
            }
        }]);

[loumac]

Hi Joshua, I will try your solution - I never did find the answer so thank you!

[joshua.ball@osi.com]

No prob! You should just have to switch the dataIndex and itemId properties in the example above to whatever you've got for it to work.