Customizing the Render Container for Cell Menu and Header Menu in Bryntum Grid

[yvelikova]

Hello,

I am currently utilizing the Bryntum Grid component extensively in one of my projects, and I've been very impressed with its flexibility and performance.

However, I have encountered a specific requirement that I need some assistance with. By default, I understand that the cell menu and header menu are appended as children to the body tag within the DOM structure. For my current implementation, I have a particular need to have these menus rendered as children of a different, custom DOM element within my application's structure.

I have looked through the documentation but have not been able to find a setting or property that would allow me to specify an alternative parent element for these menus. I would appreciate it if you could provide me with some guidance on how this could be achieved. Is there perhaps a configuration option or a method of extending the Grid's default behavior to designate a different container for these elements?

Thank you very much for your time and support. Any help or pointers you could provide on this matter would be greatly appreciated.

Best Regards,
Yordanka Velikova

[tasnim]

Hi,

Glad to hear that you liked our product.

Regarding your question, As it is a floating element, it needs to be there. Could you please explain a bit more about your requirement for what you want the menu to show for and do you want the same header menu to show in there or not and same for the cell menu?

We have a demo here https://bryntum.com/products/grid/examples/contextmenu/
Which shows cell menu on the three dots icon click

Good Luck ,
Tasnim

[yvelikova]

Hello,

My end goal is to add some styling to the menu and submenus. I've successfully applied custom styles to the main menu, but I'm encountering an issue where these styles are not being reflected on the submenus (on the attached picture). My objective is to ensure that the styling is consistent across both the main menu and all associated submenus.
I applied these custom styles using config property:

features.cellMenu.menu = {
      style: variableDeclarations,
}

Thanks!

Best Regards,
Yordanka Velikova

[tasnim]

Hi,

Please try adding the styles by selecting this CSS selector

.b-menu { ... }

Please let us know if that helps.

[yvelikova]

Thank you for your guidance. However, it seems that the suggested approach might not suit my specific situation, as there are multiple tables within the body element, each requiring distinct styling for their respective menus and submenus. Is there a configurable property available that would allow me to apply unique styles to the menus and submenus of each table individually, similar to the property I utilized to style the main menu?

[tasnim]

Hi,

You can make them unique by adding a reference to that menu

    features : {
        headerMenu : {
            menu : {
                ref : 'mainHeaderMenu',
            },
            items : {
                columnPicker : {
                    menu : {
                        ref : 'mainHeaderSubMenu'
                    }
               }
            }
        }
    }

And apply css

Example

.b-menu[data-ref="mainHeaderMenu"] .b-menuitem,
.b-menu[data-ref="mainHeaderSubMenu"] .b-menuitem {
    color : red;
}

Hope this helps

[yvelikova]

That solves my issue! Thank you!

[Animal]

We could add identifying classes to help with this requirement.

So the HeaderMenu feature can add b-headermenu to its Menu widgets.

https://github.com/bryntum/support/issues/8767