How to Access Custom Events on Custom Context Menu React Syncfusion Tree Grid?

Question

I am Using @syncfusion/ej2-react-treegrid,

import {ContextMenuComponent} from "@syncfusion/ej2-react-navigations";

    const [menuItems, setMenuItems] = useState([
        {
            text: "Change Color",
            iconCss: "e-cm-icons e-cut",
            items: [
            

{
                    text: "Blue",
                    iconCss: "e-cm-icons e-pastetext",
                    
                }, {
                    text: "Black",
                    iconCss: "e-cm-icons e-pastespecial",
                },
            ]
        }
            ]
        },
    ]);


return (
<TreeGridComponent id="contextmenutarget"
                dataSource={sampleData}
                treeColumnIndex={1}
                childMapping="subtasks""
                height="auto"
                allowSorting={true}
                editSettings={editOptions}
                selectionSettings={selection}
               
            >
                <ColumnsDirective>
                    <ColumnDirective field="taskID" headerText="Task ID" width="80"/>
                </ColumnsDirective>
                <Inject services={
                    [
                        ContextMenu
                    ]
                }/>
            </TreeGridComponent>
            <ContextMenuComponent target="#contextmenutarget"
                items={menuItems}
                />

Now it is all working fine and I am able to See the Context Menu as Below

Context Menu

Now I want to call a Function on Click of any Menu item, Not sure how this can be achieved?

For Example on Click of Change Color - Blue - It should call a custom function where I can add custom class to change t

Answer 1

Upon clicking any custom context menu items, contentMenuClick event will be triggered. Using this event you can customize the click action of context menu items.

Please refer to the below documentation,

https://ej2.syncfusion.com/react/documentation/treegrid/context-menu/#custom-context-menu-items https://ej2.syncfusion.com/react/documentation/api/treegrid/#contextmenuclick https://ej2.syncfusion.com/react/demos/#/material/treegrid/customcontextmenu