Blazor - Get Started with Smart.Menu

Setup The Project

Follow the Getting Started guide to set up your Blazor Application with Smart UI.

Setup Basic Menu

Smart.Menu is a custom component that consists of possibly nested action and button elements.

1. Add the Menu component to the Pages/Index.razor file

   <Menu></Menu>

2. Menu Items are added directly as children elements of Menu or as children of MenuItemsGroup

   <Menu>
     <MenuItemsGroup>
         File
         <MenuItem Shortcut="Ctrl+N">New</MenuItem> 
         <MenuItem Shortcut="Ctrl+0">Open</MenuItem>
         <MenuItemsGroup>
             Open Containing Folder
             <MenuItem>Explorer</MenuItem>
             <MenuItem>cmd</MenuItem>
         </MenuItemsGroup>
         <MenuItem Shortcut="Ctrl+S" disabled>Save</MenuItem>
         <MenuItem Shortcut="Ctrl+Alt+S" separator>Save As...</MenuItem>
         <MenuItem Shortcut="Alt+F4">Exit</MenuItem>
     </MenuItemsGroup>
     <MenuItemsGroup>
         Edit
         <MenuItem Shortcut="Ctrl+Z">Undo</MenuItem>
         <MenuItem Shortcut="Ctrl+Y" separator>Redo</MenuItem>
         <MenuItem Shortcut="Ctrl+X">Cut</MenuItem>
         <MenuItem Shortcut="Ctrl+C">Copy</MenuItem>
         <MenuItem Shortcut="Ctrl+V" disabled>Paste</MenuItem>
     </MenuItemsGroup>
   </Menu>

   
3. Items can also be added as an array of objects, set to the DataSource property:

   <Menu DataSource="@items"></Menu>
   
   @code{
     IEnumerable<object> items = new dynamic[]{
       new{
           label="Item 1", 
           value="item1", 
           items= new object[]{
               new{label="Action 1"},
               new{label="Action 2"},
           }
       }, 
       new{label="Item 2", value="item2"}
     };
   }

   

Menu Modes

By default, the menu is displayed horizontally. Using the Mode property, the menu can be set to Vertical, DropDown or Tree.

<Menu  Mode="MenuMode.Tree">
  ....
</Menu>

• Tree Mode
  
• Vertical Mode
  

Checkable

Smart.Menu supports selection of the Menu items. The Selection can be of type Checkbox or Radio.
Top level items can become checkable by setting the properties to the Menu
Lower level items can become checkable by setting the properties to their MenuItemsGroup

<Menu Checkable="true" Checkboxes="true">
  <MenuItemsGroup Checkable CheckMode="MenuCheckMode.RadioButton">File
    ....
  </MenuItemsGroup>
  ....
</Menu>

Menu Events

Smart.Menu provides multiple events that can help you expand the component's functionality.
Each event object can have unique event.detail parameters.

• OnClose - triggered when the menu is closed. The event is fired only in DropDown mode
  Event Details: N/A
• OnClosing - triggered when the menu is about to be closed
  Event Details: dynamic trigger
• OnCollapse - triggered when a jqx-menu-items-group is collapsed
  Event Details: dynamic item, string label, dynamic value, dynamic path, dynamic children
• OnCollapsing - triggered when a jqx-menu-items-group is collapsing
  Event Details: dynamic item, string label, dynamic value, dynamic path, dynamic children
• OnExpand - triggered when a jqx-menu-items-group is expanded
  Event Details: dynamic item, string label, dynamic value, dynamic path, dynamic children
• OnExpanding - triggered before a jqx-menu-items-group is expanded.
  Event Details: dynamic item, string label, dynamic value, dynamic path, dynamic children
• OnItemCheckChange - triggered when a menu item check state is changed
  Event Details: dynamic item, string label, dynamic value, dynamic checked
• OnItemClick - triggered when a menu item is clicked
  Event Details: dynamic item, string label, dynamic value
• OnOpen - triggered when the menu is opened. The event is fired only in DropDown mode
  Event Details: N/A
• OnOpening - triggered when the menu is about to be opened
  Event Details: N/A

The demo below uses the OnItemClick Event to generate a "Login" tab if the user selects "Show Login Tab" and a "Register" tab if the users selects "Show Register Tab":

<Menu @ref="@menu" OnItemClick="OnItemClick">
  <MenuItemsGroup>
      File
      <MenuItem Value='@("login")' Shortcut="Ctrl+N">Show Login Tab</MenuItem>
      <MenuItem Value='@("register")' Shortcut="Ctrl+0">Show Register Tab</MenuItem>
      <MenuItemsGroup>
          Open Containing Folder
          <MenuItem>Explorer</MenuItem>
          <MenuItem>cmd</MenuItem>
      </MenuItemsGroup>
      <MenuItem Shortcut="Ctrl+S" Disabled>Save</MenuItem>
      <MenuItem Shortcut="Ctrl+Alt+S" Separator>Save As...</MenuItem>
      <MenuItem Shortcut="Alt+F4">Exit</MenuItem>
  </MenuItemsGroup>
  <MenuItemsGroup>
      Edit
      <MenuItem Shortcut="Ctrl+Z">Undo</MenuItem>
      <MenuItem Shortcut="Ctrl+Y" Separator>Redo</MenuItem>
      <MenuItem Shortcut="Ctrl+X">Cut</MenuItem>
      <MenuItem Shortcut="Ctrl+C">Copy</MenuItem>
      <MenuItem Shortcut="Ctrl+V" Disabled>Paste</MenuItem>
  </MenuItemsGroup>
</Menu>

@code{
  Menu menu;
  private void OnItemClick(Event ev){
      MenuItemClickEventDetail detail = ev["Detail"];
      if(detail.Value == "login"){
          menu.AddItem(new {label="Login"});
      }
      else if(detail.Value == "register"){
          menu.AddItem(new {label="Register"});
      }
  }
}