ContextMenu Integration - React Tree View

import React, { useCallback, useRef, useState } from 'react'; import TreeView, { TreeViewTypes } from 'devextreme-react/tree-view'; import ContextMenu, { ContextMenuTypes } from 'devextreme-react/context-menu'; import List from 'devextreme-react/list'; import service from './data.ts'; const products = service.getProducts(); const menuItems = service.getMenuItems(); const App = () => { const contextMenuRef = useRef(null); const treeViewRef = useRef(null); const [logItems, setLogItems] = useState([]); const [selectedTreeItem, setSelectedTreeItem] = useState(undefined); const treeViewItemContextMenu = useCallback(( e: TreeViewTypes.ItemContextMenuEvent & { itemData: { price?: any; }; }, ) => { setSelectedTreeItem(e.itemData); const isProduct = e.itemData.price !== undefined; contextMenuRef.current.instance().option('items[0].visible', !isProduct); contextMenuRef.current.instance().option('items[1].visible', !isProduct); contextMenuRef.current.instance().option('items[2].visible', isProduct); contextMenuRef.current.instance().option('items[3].visible', isProduct); contextMenuRef.current.instance().option('items[0].disabled', e.node.expanded); contextMenuRef.current.instance().option('items[1].disabled', !e.node.expanded); }, []); const contextMenuItemClick = useCallback(( e: ContextMenuTypes.ItemClickEvent & { itemData: { id?: any; }; }, ) => { let logEntry = ''; switch (e.itemData.id) { case 'expand': { logEntry = `The '${selectedTreeItem.text}' group was expanded`; treeViewRef.current.instance().expandItem(selectedTreeItem.id); break; } case 'collapse': { logEntry = `The '${selectedTreeItem.text}' group was collapsed`; treeViewRef.current.instance().collapseItem(selectedTreeItem.id); break; } case 'details': { logEntry = `Details about '${selectedTreeItem.text}' were displayed`; break; } case 'copy': { logEntry = `Information about '${selectedTreeItem.text}' was copied`; break; } default: break; } const updatedLogItems = [...logItems, logEntry]; setLogItems(updatedLogItems); }, [logItems, selectedTreeItem, setLogItems]); return ( <div className="form"> <TreeView id="treeview" ref={treeViewRef} items={products} width={300} height={450} onItemContextMenu={treeViewItemContextMenu} /> <div className="log-container"> <div> <i className="icon dx-icon-clock"></i> Operations log: </div> <List id="log" width={400} height={300} showScrollbar="always" items={logItems} /> </div> <ContextMenu ref={contextMenuRef} dataSource={menuItems} target="#treeview .dx-treeview-item" onItemClick={contextMenuItemClick} /> </div> ); }; export default App;

import React, { useCallback, useRef, useState } from 'react'; import TreeView from 'devextreme-react/tree-view'; import ContextMenu from 'devextreme-react/context-menu'; import List from 'devextreme-react/list'; import service from './data.js'; const products = service.getProducts(); const menuItems = service.getMenuItems(); const App = () => { const contextMenuRef = useRef(null); const treeViewRef = useRef(null); const [logItems, setLogItems] = useState([]); const [selectedTreeItem, setSelectedTreeItem] = useState(undefined); const treeViewItemContextMenu = useCallback((e) => { setSelectedTreeItem(e.itemData); const isProduct = e.itemData.price !== undefined; contextMenuRef.current.instance().option('items[0].visible', !isProduct); contextMenuRef.current.instance().option('items[1].visible', !isProduct); contextMenuRef.current.instance().option('items[2].visible', isProduct); contextMenuRef.current.instance().option('items[3].visible', isProduct); contextMenuRef.current.instance().option('items[0].disabled', e.node.expanded); contextMenuRef.current.instance().option('items[1].disabled', !e.node.expanded); }, []); const contextMenuItemClick = useCallback( (e) => { let logEntry = ''; switch (e.itemData.id) { case 'expand': { logEntry = `The '${selectedTreeItem.text}' group was expanded`; treeViewRef.current.instance().expandItem(selectedTreeItem.id); break; } case 'collapse': { logEntry = `The '${selectedTreeItem.text}' group was collapsed`; treeViewRef.current.instance().collapseItem(selectedTreeItem.id); break; } case 'details': { logEntry = `Details about '${selectedTreeItem.text}' were displayed`; break; } case 'copy': { logEntry = `Information about '${selectedTreeItem.text}' was copied`; break; } default: break; } const updatedLogItems = [...logItems, logEntry]; setLogItems(updatedLogItems); }, [logItems, selectedTreeItem, setLogItems], ); return ( <div className="form"> <TreeView id="treeview" ref={treeViewRef} items={products} width={300} height={450} onItemContextMenu={treeViewItemContextMenu} /> <div className="log-container"> <div> <i className="icon dx-icon-clock"></i> Operations log: </div> <List id="log" width={400} height={300} showScrollbar="always" items={logItems} /> </div> <ContextMenu ref={contextMenuRef} dataSource={menuItems} target="#treeview .dx-treeview-item" onItemClick={contextMenuItemClick} /> </div> ); }; export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

.form { display: flex; } .form > div, #treeview { display: inline-block; vertical-align: top; } .log-container { padding: 20px; margin-left: 20px; font-size: 115%; font-weight: bold; background-color: rgba(191, 191, 191, 0.15); height: 100%; } .log-container .dx-icon-clock { position: relative; top: 1px; } #log { margin-top: 10px; } #log .dx-empty-message { padding-left: 0; } .dx-list-item-content { padding-left: 0; }

React Tree View - ContextMenu Integration