How to create submenu items in a Dropdown Menu
On this web page there seems to be an example of a DropDownButton that has submenu items (toward the end of the page, under the "Popup menu with multilevel submenu" heading).
I can't seem to find out how to implement this functionality. Could you point me to the right documentation or provide an example?
|
<SfDropDownButton @ref="FileButton" Id="btnFileMenu" Content="File" CssClass="e-dropDown-button">
<ChildContent>
<DropDownButtonEvents OnClose="@DropDownButtonClose"></DropDownButtonEvents>
</ChildContent>
<PopupContent>
<SfContextMenu @ref="ContextMenu" Items="FileMenuItems" TValue="ContextMenuItemModel" ShowItemOnClick="true">
<MenuFieldSettings Text="Content"></MenuFieldSettings>
<MenuEvents TValue="ContextMenuItemModel" OnClose="BeforeClose" Created="OnMenuCreated" ItemSelected="Selected"></MenuEvents>
</SfContextMenu>
</PopupContent>
</SfDropDownButton>
@code {
SfDropDownButton FileButton;
SfContextMenu< ContextMenuItemModel> ContextMenu;
public bool isClose = false;
private void DropDownButtonClose(BeforeOpenCloseMenuEventArgs args)
{
args.Cancel = true;
}
private void BeforeClose(BeforeOpenCloseMenuEventArgs<ContextMenuItemModel> args)
{
if (!isClose)
{
FileButton.Toggle();
}
}
public class ContextMenuItemModel
{
public List<ContextMenuItemModel> Items { get; set; }
public string Content { get; set; }
public string Id { get; set; }
public string IconCss { get; set; }
public Boolean Separator { get; set; }
}
private List< ContextMenuItemModel> FileMenuItems = new List< ContextMenuItemModel>{
new ContextMenuItemModel {Id ="FileMenuItemsNew", Content = "Align" , Items = new List< ContextMenuItemModel>
{
new ContextMenuItemModel { Content="Left" },
new ContextMenuItemModel { Content="Right" },
new ContextMenuItemModel { Content="Center" },
new ContextMenuItemModel { Content="Top"},
new ContextMenuItemModel { Content="Bottom" },
new ContextMenuItemModel { Content="Middle"}
}},
new ContextMenuItemModel {Id ="FileMenuItemsOpen", Content = "Open" },
new ContextMenuItemModel { Separator = true },
new ContextMenuItemModel { Id ="FileMenuItemsSave",Content = "Space", Items = new List< ContextMenuItemModel>
{
new ContextMenuItemModel { Content="Double" },
new ContextMenuItemModel { Content="Single" },
new ContextMenuItemModel { Content="Small" },
new ContextMenuItemModel { Content="Big"},
new ContextMenuItemModel { Content="Large" },
}},
new ContextMenuItemModel { Id ="FileMenuItemsSaveAs",Content = "Save As", Items = new List< ContextMenuItemModel>
{
new ContextMenuItemModel { Content="PDF" },
new ContextMenuItemModel { Content="Excel" },
new ContextMenuItemModel { Content="Word" },
new ContextMenuItemModel { Content=".XLS"},
} },
new ContextMenuItemModel {Id ="FileMenuItemsExport", Content = "Export"},
new ContextMenuItemModel { Separator = true},
new ContextMenuItemModel { Id ="FileMenuItemsPrint",Content = "Print" }
};
public void OnMenuCreated()
{
ContextMenu.Open();
}
public void Selected(MenuEventArgs<ContextMenuItemModel> args)
{
if(args.Item.Content == "Space" || args.Item.Content == "Save As")
{
isClose = true;
} else {
isClose = false;
}
}
} |
Thank you - it works!
I have modified it to suit my requirements for opening with a click, and then hovering to open submenus:
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.SplitButtons
<SfDropDownButton @ref="MainMenuButton" Id="btnMainMenu" Content="File" CssClass="e-dropDown-button">
<ChildContent>
<DropDownButtonEvents OnClose="@((e) => { e.Cancel = true; })"></DropDownButtonEvents>
</ChildContent>
<PopupContent>
<SfContextMenu @ref="MainMenu" ShowItemOnClick="false" TValue="MenuItem">
<MenuEvents TValue="MenuItem" OnClose="@((args)=> { if (args.ParentItem == null) MainMenuButton.Toggle(); })" Created="@(() => { MainMenu.Open(); })" ItemSelected="Selected"></MenuEvents>
<MenuItems>
<MenuItem Text="Item 1" Id="Item1"></MenuItem>
<MenuItem Text="Item 2" Id="Item2">
<MenuItems>
<MenuItem Text="Item 3" Id="Item3"></MenuItem>
<MenuItem Text="Item 4" Id="Item4"></MenuItem>
</MenuItems>
</MenuItem>
<MenuItem Text="Item 1" Id="Item1"></MenuItem>
<MenuItem Text="Item 2" Id="Item2">
<MenuItems>
<MenuItem Text="Item 3" Id="Item3"></MenuItem>
<MenuItem Text="Item 4" Id="Item4"></MenuItem>
</MenuItems>
</MenuItem>
<MenuItem Text="Item 1" Id="Item1"></MenuItem>
<MenuItem Text="Item 2" Id="Item2">
<MenuItems>
<MenuItem Text="Item 3" Id="Item3"></MenuItem>
<MenuItem Text="Item 4" Id="Item4"></MenuItem>
</MenuItems>
</MenuItem>
</MenuItems>
</SfContextMenu>
</PopupContent>
</SfDropDownButton>
@code {
SfDropDownButton MainMenuButton;
SfContextMenu<MenuItem> MainMenu;
}
Hello Support Team,
Hello John,
I got a strange behavior.
I copy paste the code from John and built it with package 19.3.0.55. It works perfectly.
If I build it with package 26.2.10, then the popup menu doesn't close when I click outside of the menu.
What I missed?
Thanks for your support.
Artilizansa.
Update
To close the Popup when clicking outside of the menu (ie. no item selected), I needed to comment the
<DropDownButtonEvents>. Means, I do not to implement the OnClose.
Hi Artilizansa,
Yes, you are correct. It is a sample-level issue. To close the popup menu when I click outside of it, you need to remove the DropDownButton OnClose event. Please refer to the code snippets below.
|
<SfDropDownButton @ref="MainMenuButton" Id="btnMainMenu" Content="File" CssClass="e-dropDown-button"> <PopupContent> <SfContextMenu @ref="ContextMenu" ShowItemOnClick="false" TValue="MenuItem"> <MenuEvents TValue="MenuItem" OnClose="BeforeClose" Created="OnMenuCreated"></MenuEvents> <MenuItems> <MenuItem Text="Item 1" Id="Item1"></MenuItem> <MenuItem Text="Item 2" Id="Item2"> <MenuItems> <MenuItem Text="Item 3" Id="Item3"></MenuItem> <MenuItem Text="Item 4" Id="Item4"></MenuItem> </MenuItems> </MenuItem> <MenuItem Text="Item 1" Id="Item1"></MenuItem> <MenuItem Text="Item 2" Id="Item2"> <MenuItems> <MenuItem Text="Item 3" Id="Item3"></MenuItem> <MenuItem Text="Item 4" Id="Item4"></MenuItem> </MenuItems> </MenuItem> <MenuItem Text="Item 1" Id="Item1"></MenuItem> <MenuItem Text="Item 2" Id="Item2"> <MenuItems> <MenuItem Text="Item 3" Id="Item3"></MenuItem> <MenuItem Text="Item 4" Id="Item4"></MenuItem> </MenuItems> </MenuItem> </MenuItems> </SfContextMenu> </PopupContent> </SfDropDownButton> @code { SfDropDownButton MainMenuButton; SfContextMenu<MenuItem> ContextMenu; private void BeforeClose(BeforeOpenCloseMenuEventArgs<MenuItem> args) { if (args.ParentItem == null) { MainMenuButton.Toggle(); } } public void OnMenuCreated() { ContextMenu.OpenAsync(); } } |
Please let us know if you need any further assistance on this.
Regards,
KeerthiKaran K V
Hello Support Team,
No further assistance needed. Thanks for all.
