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;" })
)
);