Your search did not match any results.
Diagram

Item Selection

The onSelectionChanged function is executed after the selection is changed and allows you to access information about the selected items. In this demo, the function fetches selected shape information and displays it under the Diagram component.

The onContentReady function is handled to find the 'Greta Sims' shape, select it, and scroll to it. For this purpose, the following methods are called:

Backend API
Copy to CodeSandBox
Apply
Reset
import React from 'react'; import Diagram, { Nodes, AutoLayout, Toolbox, PropertiesPanel, } from 'devextreme-react/diagram'; import ArrayStore from 'devextreme/data/array_store'; import service from './data.js'; class App extends React.Component { constructor(props) { super(props); this.dataSource = new ArrayStore({ key: 'ID', data: service.getEmployees(), }); this.state = { selectedItemNames: 'Nobody has been selected', }; this.onSelectionChanged = this.onSelectionChanged.bind(this); } onContentReady(e) { const diagram = e.component; // preselect some shape const items = diagram.getItems().filter((item) => item.itemType === 'shape' && (item.text === 'Greta Sims')); if (items.length > 0) { diagram.setSelectedItems(items); diagram.scrollToItem(items[0]); diagram.focus(); } } onSelectionChanged({ items }) { let selectedItemNames = 'Nobody has been selected'; const filteredItems = items .filter((item) => item.itemType === 'shape') .map((item) => item.text); if (filteredItems.length > 0) { selectedItemNames = filteredItems.join(', '); } this.setState({ selectedItemNames, }); } render() { return ( <div> <Diagram id="diagram" onContentReady={this.onContentReady} onSelectionChanged={this.onSelectionChanged}> <Nodes dataSource={this.dataSource} keyExpr="ID" textExpr="Full_Name" parentKeyExpr="Head_ID"> <AutoLayout type="tree" /> </Nodes> <Toolbox visibility="disabled" /> <PropertiesPanel visibility="disabled" /> </Diagram> <div className="selected-data"> <span className="caption">Selected Items:</span>{' '} <span> { this.state.selectedItemNames } </span> </div> </div> ); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app'), );
<!DOCTYPE html> <html> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx-diagram.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css@2.2.3/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/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.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#diagram { height: 600px; } .selected-data { margin-top: 20px; padding: 20px; background-color: rgba(191, 191, 191, 0.15); } .selected-data .caption { font-weight: bold; font-size: 115%; }
const employees = [{ ID: 1, Full_Name: 'John Heart', Prefix: 'Mr.', Title: 'CEO', City: 'Los Angeles', State: 'California', Email: 'jheart@dx-email.com', Skype: 'jheart_DX_skype', Mobile_Phone: '(213) 555-9392', Birth_Date: '1964-03-16', Hire_Date: '1995-01-15', }, { ID: 2, Head_ID: 1, Full_Name: 'Samantha Bright', Prefix: 'Dr.', Title: 'COO', City: 'Los Angeles', State: 'California', Email: 'samanthab@dx-email.com', Skype: 'samanthab_DX_skype', Mobile_Phone: '(213) 555-2858', Birth_Date: '1966-05-02', Hire_Date: '2004-05-24', }, { ID: 3, Head_ID: 1, Full_Name: 'Arthur Miller', Prefix: 'Mr.', Title: 'CTO', City: 'Denver', State: 'Colorado', Email: 'arthurm@dx-email.com', Skype: 'arthurm_DX_skype', Mobile_Phone: '(310) 555-8583', Birth_Date: '1972-07-11', Hire_Date: '2007-12-18', }, { ID: 4, Head_ID: 1, Full_Name: 'Robert Reagan', Prefix: 'Mr.', Title: 'CMO', City: 'Bentonville', State: 'Arkansas', Email: 'robertr@dx-email.com', Skype: 'robertr_DX_skype', Mobile_Phone: '(818) 555-2387', Birth_Date: '1974-09-07', Hire_Date: '2002-11-08', }, { ID: 5, Head_ID: 1, Full_Name: 'Greta Sims', Prefix: 'Ms.', Title: 'HR Manager', City: 'Atlanta', State: 'Georgia', Email: 'gretas@dx-email.com', Skype: 'gretas_DX_skype', Mobile_Phone: '(818) 555-6546', Birth_Date: '1977-11-22', Hire_Date: '1998-04-23', }, { ID: 6, Head_ID: 3, Full_Name: 'Brett Wade', Prefix: 'Mr.', Title: 'IT Manager', City: 'Reno', State: 'Nevada', Email: 'brettw@dx-email.com', Skype: 'brettw_DX_skype', Mobile_Phone: '(626) 555-0358', Birth_Date: '1968-12-01', Hire_Date: '2009-03-06', }, { ID: 7, Head_ID: 5, Full_Name: 'Sandra Johnson', Prefix: 'Mrs.', Title: 'Controller', City: 'Beaver', State: 'Utah', Email: 'sandraj@dx-email.com', Skype: 'sandraj_DX_skype', Mobile_Phone: '(562) 555-2082', Birth_Date: '1974-11-15', Hire_Date: '2005-05-11', }, { ID: 8, Head_ID: 4, Full_Name: 'Ed Holmes', Prefix: 'Dr.', Title: 'Sales Manager', City: 'Malibu', State: 'California', Email: 'edwardh@dx-email.com', Skype: 'edwardh_DX_skype', Mobile_Phone: '(310) 555-1288', Birth_Date: '1973-07-14', Hire_Date: '2005-06-19', }, { ID: 9, Head_ID: 3, Full_Name: 'Barb Banks', Prefix: 'Mrs.', Title: 'Support Manager', City: 'Phoenix', State: 'Arizona', Email: 'barbarab@dx-email.com', Skype: 'barbarab_DX_skype', Mobile_Phone: '(310) 555-3355', Birth_Date: '1979-04-14', Hire_Date: '2002-08-07', }, { ID: 10, Head_ID: 2, Full_Name: 'Kevin Carter', Prefix: 'Mr.', Title: 'Shipping Manager', City: 'San Diego', State: 'California', Email: 'kevinc@dx-email.com', Skype: 'kevinc_DX_skype', Mobile_Phone: '(213) 555-2840', Birth_Date: '1978-01-09', Hire_Date: '2009-08-11', }, { ID: 11, Head_ID: 5, Full_Name: 'Cindy Stanwick', Prefix: 'Ms.', Title: 'HR Assistant', City: 'Little Rock', State: 'Arkansas', Email: 'cindys@dx-email.com', Skype: 'cindys_DX_skype', Mobile_Phone: '(818) 555-6655', Birth_Date: '1985-06-05', Hire_Date: '2008-03-24', }, { ID: 12, Head_ID: 8, Full_Name: 'Sammy Hill', Prefix: 'Mr.', Title: 'Sales Assistant', City: 'Pasadena', State: 'California', Email: 'sammyh@dx-email.com', Skype: 'sammyh_DX_skype', Mobile_Phone: '(626) 555-7292', Birth_Date: '1984-02-17', Hire_Date: '2012-02-01', }, { ID: 13, Head_ID: 10, Full_Name: 'Davey Jones', Prefix: 'Mr.', Title: 'Shipping Assistant', City: 'Pasadena', State: 'California', Email: 'davidj@dx-email.com', Skype: 'davidj_DX_skype', Mobile_Phone: '(626) 555-0281', Birth_Date: '1983-03-06', Hire_Date: '2011-04-24', }, { ID: 14, Head_ID: 10, Full_Name: 'Victor Norris', Prefix: 'Mr.', Title: 'Shipping Assistant', City: 'Little Rock', State: 'Arkansas', Email: 'victorn@dx-email.com', Skype: 'victorn_DX_skype', Mobile_Phone: '(213) 555-9278', Birth_Date: '1986-07-23', Hire_Date: '2012-07-23', }, { ID: 15, Head_ID: 10, Full_Name: 'Mary Stern', Prefix: 'Ms.', Title: 'Shipping Assistant', City: 'Beaver', State: 'Utah', Email: 'marys@dx-email.com', Skype: 'marys_DX_skype', Mobile_Phone: '(818) 555-7857', Birth_Date: '1982-04-08', Hire_Date: '2012-08-12', }, { ID: 16, Head_ID: 10, Full_Name: 'Robin Cosworth', Prefix: 'Mrs.', Title: 'Shipping Assistant', City: 'Los Angeles', State: 'California', Email: 'robinc@dx-email.com', Skype: 'robinc_DX_skype', Mobile_Phone: '(818) 555-0942', Birth_Date: '1981-06-12', Hire_Date: '2012-09-01', }, { ID: 17, Head_ID: 9, Full_Name: 'Kelly Rodriguez', Prefix: 'Ms.', Title: 'Support Assistant', City: 'Boise', State: 'Idaho', Email: 'kellyr@dx-email.com', Skype: 'kellyr_DX_skype', Mobile_Phone: '(818) 555-9248', Birth_Date: '1988-05-11', Hire_Date: '2012-10-13', }, { ID: 18, Head_ID: 9, Full_Name: 'James Anderson', Prefix: 'Mr.', Title: 'Support Assistant', City: 'Atlanta', State: 'Georgia', Email: 'jamesa@dx-email.com', Skype: 'jamesa_DX_skype', Mobile_Phone: '(323) 555-4702', Birth_Date: '1987-01-29', Hire_Date: '2012-10-18', }, { ID: 19, Head_ID: 9, Full_Name: 'Antony Remmen', Prefix: 'Mr.', Title: 'Support Assistant', City: 'Boise', State: 'Idaho', Email: 'anthonyr@dx-email.com', Skype: 'anthonyr_DX_skype', Mobile_Phone: '(310) 555-6625', Birth_Date: '1986-02-19', Hire_Date: '2013-01-19', }, { ID: 20, Head_ID: 8, Full_Name: 'Olivia Peyton', Prefix: 'Mrs.', Title: 'Sales Assistant', City: 'Atlanta', State: 'Georgia', Email: 'oliviap@dx-email.com', Skype: 'oliviap_DX_skype', Mobile_Phone: '(310) 555-2728', Birth_Date: '1981-06-03', Hire_Date: '2012-05-14', }, { ID: 21, Head_ID: 6, Full_Name: 'Taylor Riley', Prefix: 'Mr.', Title: 'Network Admin', City: 'San Jose', State: 'California', Email: 'taylorr@dx-email.com', Skype: 'taylorr_DX_skype', Mobile_Phone: '(310) 555-7276', Birth_Date: '1982-08-14', Hire_Date: '2012-04-14', }, { ID: 22, Head_ID: 6, Full_Name: 'Amelia Harper', Prefix: 'Mrs.', Title: 'Network Admin', City: 'Los Angeles', State: 'California', Email: 'ameliah@dx-email.com', Skype: 'ameliah_DX_skype', Mobile_Phone: '(213) 555-4276', Birth_Date: '1983-11-19', Hire_Date: '2011-02-10', }, { ID: 23, Head_ID: 6, Full_Name: 'Wally Hobbs', Prefix: 'Mr.', Title: 'Programmer', City: 'Chatsworth', State: 'California', Email: 'wallyh@dx-email.com', Skype: 'wallyh_DX_skype', Mobile_Phone: '(818) 555-8872', Birth_Date: '1984-12-24', Hire_Date: '2011-02-17', }, { ID: 24, Head_ID: 6, Full_Name: 'Brad Jameson', Prefix: 'Mr.', Title: 'Programmer', City: 'San Fernando', State: 'California', Email: 'bradleyj@dx-email.com', Skype: 'bradleyj_DX_skype', Mobile_Phone: '(818) 555-4646', Birth_Date: '1988-10-12', Hire_Date: '2011-03-02', }, { ID: 25, Head_ID: 6, Full_Name: 'Karen Goodson', Prefix: 'Miss', Title: 'Programmer', City: 'South Pasadena', State: 'California', Email: 'kareng@dx-email.com', Skype: 'kareng_DX_skype', Mobile_Phone: '(626) 555-0908', Birth_Date: '1987-04-26', Hire_Date: '2011-03-14', }, { ID: 26, Head_ID: 5, Full_Name: 'Marcus Orbison', Prefix: 'Mr.', Title: 'Travel Coordinator', City: 'Los Angeles', State: 'California', Email: 'marcuso@dx-email.com', Skype: 'marcuso_DX_skype', Mobile_Phone: '(213) 555-7098', Birth_Date: '1982-03-02', Hire_Date: '2005-05-19', }]; export default { getEmployees() { return employees; }, };
window.config = { transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'whatwg-fetch': 'npm:whatwg-fetch@2.0.4/fetch.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@21.2.3/cjs', 'devextreme-react': 'npm:devextreme-react@21.2.3', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.5/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.37/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@3.1.24/dist/dx-gantt.js', '@devextreme/vdom': 'npm:@devextreme/vdom@2.2.3', '@devextreme/runtime': 'npm:@devextreme/runtime@2.3.8', 'inferno': 'npm:inferno@7.4.10/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.10/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.10/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.10/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.10/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.10/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.10/dist/inferno-extras.min.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, '@devextreme/vdom': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@2.3.8/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);