I am trying to put an "action" menu on the toolbar of my grid. I have used a dropdownlist as is shown on your examples. The issue that I have with this is that action menus have a placeholder because all of the menu items have equal importance so no one menu item is the default. So I have rigged up menu like events with my javascript but it is still not ideal since the "placeholder" is a selectable list item. So then I had the brilliant idea of using telerik's menu within my custom client template. Easy peasy. Right? No, the dropdown or the .k-animation-container .k-animation-container-shown's z-order is 10002 and no matter how hard I try I can't get it to change and the dropdown is hidden by the grid header.
I was left to wonder if it is because it is limited to the confines of the toolbar. I am open to suggestions. I would hate to have to go back to the clunky dropdownlist option. Here's my code:
<style>.k-animation-container, .k-animation-container-shown{
z-index: 30000 !important;
}
</style>
@(
Html.Kendo().Grid<CommunityAssociationMasterModel>()
.Name("CommunityAssociationMasterList")
.Columns(columns =>
{
columns.Bound(p => p.DistrictCode).Title("District").Width(70);
columns.Bound(p => p.IndexNumber).Title("Index").Width(100);
columns.Bound(p => p.CreditName).Title("Credit");
columns.Command(command => { command.Destroy(); }).Width(210);
})
.ToolBar(toolbar => {
toolbar.Create().Text("Add Credit Account");
toolbar.Excel();
toolbar.Spacer();
toolbar.Custom().ClientTemplate(
Html.Kendo().Template()
.AddComponent(c => c
.Menu()
.Name("actionmenu")
.Items(items =>
{
items.Add().Text("Master List Action")
.Items(children =>
{
children.Add().Text("Import");
children.Add().Separator(true);
children.Add().Text("Delete");
});
})
.Events(e => e.Select("actionSelected"))
.HtmlAttributes(new { style = "width: 200px;" })
)
);
1 Answer, 1 is accepted
Hi Cynthia,
Thank you for reaching out.
You are correct that using the Kendo Menu inside the Grid toolbar can lead to z-index and stacking context issues, causing the menu popup to be hidden behind grid elements. Let me address your main concerns and offer targeted suggestions:
Z-Index and Popup Visibility Issue
- The issue with
.k-animation-containerbeing hidden is typically due to parent elements (like the toolbar or grid header) having CSS properties such asoverflow: hiddenor a lower z-index, which create a stacking context that can obscure the menu popup. - Your use of a high z-index with
!importantis correct, but it may not work if the popup is still confined by its parent containers.
Workaround: Force Popup to <body>
You can force the menu popup to be appended directly to the <body>, which ensures it is not restricted by the toolbar’s stacking context:
$(function() {
var menu = $("#actionmenu").data("kendoMenu");
if (menu && menu.popup) {
menu.popup.element.appendTo(document.body);
}
});
This code should be placed after your grid and menu initialization.
Additional Recommendations
- Check Parent Containers: Inspect the DOM and verify that none of the parent elements of your grid or toolbar have
overflow: hidden,overflow: auto, or a lower z-index. These properties can clip or hide the popup. - Alternative Widgets: If you only need a popup menu, the Kendo ContextMenu widget is designed to display above all content and is less likely to be affected by stacking context issues.
References
- https://docs.telerik.com/kendo-ui/getting-started/web/menu/overview
- https://demos.telerik.com/aspnet-core/menu/api
I hope this will prove helpful. If the issue still remains, can you please isolate it in a REPL sample and send the URL to us for further investigation?
https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base/repl-isolate-sample
Regards,
Eyup
Progress Telerik
Start the 2025 Survey