JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Menu & Tree › Menu Blazor ItemClicked syntax
Tagged: blazor, blazor events, blazor main menu, blazor menu
- This topic has 3 replies, 2 voices, and was last updated 3 years, 7 months ago by
admin.
-
AuthorPosts
-
January 28, 2021 at 8:13 pm #101397
ScottP
MemberHi,
I am trying to subscribe to a Blazor Menu ItemClicked event but I can’t figure out what the syntax in the mark up to connect it up with the handler.
I have thisĀ in the markup:
<Menu DataSource=”@MenuItems” ItemClicked=”MenuClicked” id=”menu”>
and this in the code section
public void MenuClicked(object sender, MenuItemClickedEventArgs args)
{}
How connect the ItemClicked event to the MenuClicked handler?January 29, 2021 at 7:23 am #101399admin
KeymasterHi ScottP,
Thanks for trying out our Blazor components.
In order to subscribe to the Menu event, you can use the following syntax:@page "/menu" <Example Name="Menu"> <Menu OnItemClick="OnItemClick" id="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> <MenuItemsGroup DropDownHeight=300> Encoding <MenuItem>Encode in ANSI</MenuItem> <MenuItem>Encode in UTF-8</MenuItem> <MenuItem>Encode in UTF-8-BOM</MenuItem> <MenuItem>Encode in UTCS-2 BE BOM</MenuItem> <MenuItem>Encode in UTCS-2 LE BOM</MenuItem> <MenuItemsGroup separator> Character sets <MenuItemsGroup> Cyrillic <MenuItem>ISO 8859-5</MenuItem> <MenuItem>KOI8-R</MenuItem> <MenuItem>KOI8-U</MenuItem> <MenuItem>Windows-1251</MenuItem> </MenuItemsGroup> <MenuItemsGroup> Chinese <MenuItem>Big5 (Traditional)</MenuItem> <MenuItem>GB2312 (Simplified)</MenuItem> </MenuItemsGroup> <MenuItemsGroup> Western European <MenuItem>ISO 8859-1</MenuItem> <MenuItem>ISO 8859-15</MenuItem> <MenuItem>OEM 850</MenuItem> <MenuItem>Windows-1252</MenuItem> </MenuItemsGroup> </MenuItemsGroup> <MenuItem>Convert to ANSI</MenuItem> <MenuItem>Convert to UTF-8</MenuItem> <MenuItem>Convert to UTF-8-BOM</MenuItem> <MenuItem>Convert to UTCS-2 BE BOM</MenuItem> <MenuItem>Convert to UTCS-2 LE BOM</MenuItem> </MenuItemsGroup> </Menu> </Example> @code { void OnItemClick(Event eventObj) { MenuItemClickEventDetail detail = eventObj["Detail"]; Console.WriteLine(detail.Label); } }
Hope this helps.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/January 29, 2021 at 3:23 pm #101405ScottP
MemberThanks for the reply.
Your response was for:
<table class=”table”>
<tbody>
<tr>
<td>OnItemClick</td>
<td>EventCallback<Event></td>
<td>This event is triggered when a menu item is clicked.</td>
<td>dynamic item, string label, dynamic value</td>
</tr>
</tbody>
</table>
but I was asking about:
<table class=”table”>
<tbody>
<tr>
<td>ItemClicked</td>
<td>event MenuItemClickedEventHandler</td>
<td>This event is triggered when a menu item is clicked.</td>
<td>MenuItemClickedEventArgs</td>
</tr>
</tbody>
</table>
Can you please show an example for this handler?
Thanks.January 30, 2021 at 12:21 pm #101410admin
KeymasterHi Scott,
It is not possible to subscribe to ItemClicked event using Razor syntax, because it is not defined as a component Parameter and it cannot be as it is “event” type. It is possible to subscribe to the event using the syntax I sent you. ItemClicked way to subscribe to events is useful only when you want to add multiple event handlers.
For Example:@page "/menu"<Example Name="Menu"> <Menu OnReady="OnReady" OnItemClick="OnItemClick" id="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> <MenuItemsGroup DropDownHeight=300> Encoding <MenuItem>Encode in ANSI</MenuItem> <MenuItem>Encode in UTF-8</MenuItem> <MenuItem>Encode in UTF-8-BOM</MenuItem> <MenuItem>Encode in UTCS-2 BE BOM</MenuItem> <MenuItem>Encode in UTCS-2 LE BOM</MenuItem> <MenuItemsGroup separator> Character sets <MenuItemsGroup> Cyrillic <MenuItem>ISO 8859-5</MenuItem> <MenuItem>KOI8-R</MenuItem> <MenuItem>KOI8-U</MenuItem> <MenuItem>Windows-1251</MenuItem> </MenuItemsGroup> <MenuItemsGroup> Chinese <MenuItem>Big5 (Traditional)</MenuItem> <MenuItem>GB2312 (Simplified)</MenuItem> </MenuItemsGroup> <MenuItemsGroup> Western European <MenuItem>ISO 8859-1</MenuItem> <MenuItem>ISO 8859-15</MenuItem> <MenuItem>OEM 850</MenuItem> <MenuItem>Windows-1252</MenuItem> </MenuItemsGroup> </MenuItemsGroup> <MenuItem>Convert to ANSI</MenuItem> <MenuItem>Convert to UTF-8</MenuItem> <MenuItem>Convert to UTF-8-BOM</MenuItem> <MenuItem>Convert to UTCS-2 BE BOM</MenuItem> <MenuItem>Convert to UTCS-2 LE BOM</MenuItem> </MenuItemsGroup> </Menu></Example>@code { void OnReady(Menu menu) { menu.ItemClicked += delegate(object sender, MenuItemClickedEventArgs args) { Console.WriteLine(args.Label); }; } void OnItemClick(Event eventObj) { MenuItemClickEventDetail detail = eventObj["Detail"]; Console.WriteLine(detail.Label); }}
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.