Блог

Я использую @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}
                />


 

Теперь все работает нормально, и я могу видеть Контекстное меню, как показано ниже

Контекстное меню

Теперь я хочу вызвать функцию по щелчку любого пункта меню, не зная, как этого можно достичь?

Например, при нажатии кнопки Изменить цвет — Синий — Он должен вызвать пользовательскую функцию, в которой я могу добавить пользовательский класс для изменения t

При нажатии на любые пользовательские пункты контекстного меню будет запущено событие contentMenuClick. С помощью этого события вы можете настроить действие щелчка по пунктам контекстного меню.

Пожалуйста, обратитесь к приведенной ниже документации,

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