Category / Section
How to get the parent menu item details on selecting menu items
1 min read
This knowledge base explains to get the parent menu item details on selecting menu items.
It can be achieved in the client side ‘select’ event while selecting the menu item. The parent menu item details are available in item.parentObj’ from ‘select’ event argument.
[HTML]
<ul id="menu"></ul>
[TS]
import { enableRipple } from '@syncfusion/ej2-base'; enableRipple(true); import { Menu, MenuItemModel } from '@syncfusion/ej2-navigations'; // Menu items definition let menuItems: MenuItemModel[] = [ { text: 'File', iconCss: 'em-icons e-file', items: [ { text: 'Open', iconCss: 'em-icons e-open' }, { text: 'Save', iconCss: 'e-icons e-save' }, { separator: true }, { text: 'Exit' } ] }, { text: 'Edit', iconCss: 'em-icons e-edit', items: [ { text: 'Cut', iconCss: 'em-icons e-cut' }, { text: 'Copy', iconCss: 'em-icons e-copy' }, { text: 'Paste', iconCss: 'em-icons e-paste' } ] }, { text: 'View', items: [ { text: 'Toolbars', items: [ { text: 'Menu Bar' }, { text: 'Bookmarks Toolbar' }, { text: 'Customize' }, ] }, { text: 'Zoom', items: [ { text: 'Zoom In' }, { text: 'Zoom Out' }, { text: 'Reset' }, ] }, { text: 'Full Screen' } ] }, { text: 'Tools', items: [ { text: 'Spelling & Grammar' }, { text: 'Customize' }, { separator: true }, { text: 'Options' } ] }, { text: 'Help' } ]; // Menu initialization new Menu({ items: menuItems, select: (args) => { if (args.item.parentObj.text) { alert(args.item.parentObj.text + "/" + args.item.text); } } }, '#menu');
Demo Sample: https://stackblitz.com/edit/cw9bre