[Solved] How to add a column menu item to tabbed component?

[Boardy]

In a grid I'm setting up the column menu with the tabbed component style. I would like to add a menu to the second tab.

In the documentation, I found Column Menu mentioning the ColumnMenuInit event. I was able to set up this event and it gets triggered when first opening the menu for a field. But I cannot locate the kendoMenu with

let menu = e.container.find(".k-menu").data("kendoMenu");

I could locate the panels through

let tab = e.container.find("[role=tabpanel]");

but my quest stranded there.

The grid is something like this

 @(Html.Kendo().Grid<DashboardViewModel>()
     .Name("dashboard")
     .Columns(...)
     .Events(e => e.ColumnMenuInit("menuInit"))
     .ColumnMenu(menu =>
     {
          menu.ComponentType("tabbed");
          menu.ClearAllFilters();
          menu.AutoSize();
     })
     ...
)

So how can I accomplish adding a menu to the second tab?

Thanks in advance

[Eyup]

Hello,

 

Thank you for reaching out.

The behavior you're seeing is expected: when using the tabbed column menu (ComponentType("tabbed")), the traditional .k-menu element is not present in the DOM. Instead, the menu content is rendered inside [role=tabpanel] elements, each representing a tab.

To add a custom menu or content to the second tab, you should target the second [role=tabpanel] element inside the ColumnMenuInit event handler and append your desired content.

Here's a concise example:

function menuInit(e) {
    // Locate all tab panels
    var tabPanels = e.container.find("[role=tabpanel]");
    // Access the second tab (index 1)
    var secondTab = tabPanels.eq(1);

    // Create custom menu content
    var customMenu = $('<div class="custom-menu">Custom menu content here</div>');

    // Append to the second tab panel
    secondTab.append(customMenu);
}

Key Points:

• The absence of .k-menu is expected with the tabbed column menu.
• You can inject any HTML or Kendo UI widget into the second tab panel.
• This approach can be extended for more advanced customization.

For reference, here is the documentation for customizing the column menu:

• https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/grid/events/columnmenuinit 

I hope this will prove helpful as a starting point. Keep me updated on the result.

 

Regards,
Eyup
Progress Telerik

[Boardy]

Thanks. So it is as I feared: I have to come up with my own html to hack into the tab panel. But I got it working this way.

Take care