React 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:

getItems returns an array of diagram items.
setSelectedItems selects the specified items.
scrollToItem scrolls the view area to the specified item.
focus focuses the Diagram.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

import React, { useCallback, useState } from 'react'; import Diagram, { Nodes, AutoLayout, Toolbox, PropertiesPanel, DiagramTypes, } from 'devextreme-react/diagram'; import ArrayStore from 'devextreme/data/array_store'; import service from './data.ts'; const dataSource = new ArrayStore({ key: 'ID', data: service.getEmployees(), }); const textExpression = 'Full_Name'; function onContentReady(e: DiagramTypes.ContentReadyEvent) { const diagram = e.component; // preselect some shape const items = diagram.getItems().filter( (item) => item.itemType === 'shape' && (item.dataItem[textExpression] === 'Greta Sims'), ); if (items.length > 0) { diagram.setSelectedItems(items); diagram.scrollToItem(items[0]); diagram.focus(); } } export default function App() { const [selectedItemNames, setSelectedItemNames] = useState('Nobody has been selected'); const onSelectionChanged = useCallback(({ items }) => { let selectedItems = 'Nobody has been selected'; const filteredItems = items .filter((item) => item.itemType === 'shape') .map((item) => item.text); if (filteredItems.length > 0) { selectedItems = filteredItems.join(', '); } setSelectedItemNames(selectedItems); }, [setSelectedItemNames]); return ( <div> <Diagram id="diagram" onContentReady={onContentReady} onSelectionChanged={onSelectionChanged}> <Nodes dataSource={dataSource} keyExpr="ID" textExpr={textExpression} 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> {selectedItemNames} </span> </div> </div> ); }

import React, { useCallback, useState } from 'react'; import Diagram, { Nodes, AutoLayout, Toolbox, PropertiesPanel, } from 'devextreme-react/diagram'; import ArrayStore from 'devextreme/data/array_store'; import service from './data.js'; const dataSource = new ArrayStore({ key: 'ID', data: service.getEmployees(), }); const textExpression = 'Full_Name'; function onContentReady(e) { const diagram = e.component; // preselect some shape const items = diagram .getItems() .filter((item) => item.itemType === 'shape' && item.dataItem[textExpression] === 'Greta Sims'); if (items.length > 0) { diagram.setSelectedItems(items); diagram.scrollToItem(items[0]); diagram.focus(); } } export default function App() { const [selectedItemNames, setSelectedItemNames] = useState('Nobody has been selected'); const onSelectionChanged = useCallback( ({ items }) => { let selectedItems = 'Nobody has been selected'; const filteredItems = items .filter((item) => item.itemType === 'shape') .map((item) => item.text); if (filteredItems.length > 0) { selectedItems = filteredItems.join(', '); } setSelectedItemNames(selectedItems); }, [setSelectedItemNames], ); return ( <div> <Diagram id="diagram" onContentReady={onContentReady} onSelectionChanged={onSelectionChanged} > <Nodes dataSource={dataSource} keyExpr="ID" textExpr={textExpression} 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>{selectedItemNames}</span> </div> </div> ); }

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.6/css/dx-diagram.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.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>

#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%; }