Articles in this section
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

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied