Populate menu items with data source in React Context menu component

7 Oct 20256 minutes to read

The ContextMenu component supports data binding through the items property, allowing you to populate menu items dynamically from local data sources. This approach is particularly useful when menu content needs to be generated from arrays, objects, or other structured data formats, providing flexibility for dynamic menu scenarios.

The following example demonstrates how to bind local data source to the ContextMenu:

import { ContextMenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { data } from '../datasource.tsx';
function App() {
    function getMenuItems() {
        let record;
        const menuItems = [];
        for (const d of data) {
            record = d;
            if (record.parentId) {
                if (!menuItems[record.parentId - 1].items) {
                    menuItems[record.parentId - 1].items = [];
                }
                menuItems[record.parentId - 1].items.push({ text: record.text });
            }
            else {
                menuItems.push({ text: record.text });
            }
        }
        return menuItems;
    }
    function itemBeforeEvent(args) {
        if (!args.item.text) {
            args.element.classList.add('e-separator');
        }
    }
    return (<div className="container">
            <div id='target'>Right click / Touch hold to open the ContextMenu</div>
            <ContextMenuComponent id='contextmenu' target='#target' items={getMenuItems()} beforeItemRender={itemBeforeEvent}/>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
import { ContextMenuComponent, MenuEventArgs, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { data, IRecord } from '../datasource.tsx';


function App() {

    function getMenuItems() {
        let record: IRecord;
        const menuItems: MenuItemModel[] = [];
        for (const d of data) {
            record = d as IRecord;
            if (record.parentId) {
                if (!menuItems[record.parentId - 1].items) {
                    menuItems[record.parentId - 1].items = [];
                }
                menuItems[record.parentId - 1].items.push({ text: record.text });
            } else {
                menuItems.push({ text: record.text });
            }
        }
        return menuItems;
    }

    function itemBeforeEvent(args: MenuEventArgs) {
        if (!args.item.text) {
            args.element.classList.add('e-separator');
        }
    }

    return (
        <div className="container">
            <div id='target'>Right click / Touch hold to open the ContextMenu</div>
            <ContextMenuComponent id='contextmenu' target='#target'
                items={getMenuItems()} beforeItemRender = {itemBeforeEvent} />
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

While accessing Array we got the exception ‘object is possibly undefined’ due to ‘strictNullChecks’ option. So you can disable it in ‘tsconfig.json’ file.