No info about submenus in documentation

In overview there are info that dropdown menu supports submenus




But I cannot find any info in the documentation on how to create submenus.

How can I create submenus like presented in the screenshot?


1 Reply

TS Thaneegairaj Sankar Syncfusion Team December 27, 2021 03:12 PM UTC

  
We have checked your query and we can be able to create submenu in dropdown menu. We would like to let you know that we can able to add Context Menu in Dropdown Menu popup by using PopupContent Tag Directive. Please find the below code example, 
 
[index.razor] 
 
@using Syncfusion.Blazor.Navigations 
@using Syncfusion.Blazor.SplitButtons 
 
<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" } 
            }; 
     public void OnMenuCreated() 
     { 
         ContextMenu.Open(); 
     } 
 
     public void Selected(MenuEventArgs<ContextMenuItemModel> args) 
     { 
         if(args.Item.Content == "Align") 
         { 
             isClose = true; 
         } else { 
             isClose = false; 
         } 
     } 
  } 
 
For your reference, please check the below sample link.  
 
 
And we have a created documentation task to provide popup menu with mutilevel submenu topic in dropdown documentation, it will be available in any of our upcoming releases. 
 
Please check and get back to us, if you need further assistance.  
 
Regards,  
Thaneegairaj S 


Loader.
Up arrow icon