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 client 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!

Backend API

@(Html.DevExtreme().Diagram() .ID("diagram") .OnContentReady("onContentReady") .OnSelectionChanged("onSelectionChanged") .PropertiesPanel(pp => pp.Visibility(DiagramPanelVisibility.Disabled)) .Toolbox(t => t.Visibility(DiagramPanelVisibility.Disabled)) .Nodes(ns => ns .DataSource(d => d .Array() .Key("ID") .Data(Model) ) .KeyExpr("ID") .TextExpr("Full_Name") .ParentKeyExpr("Head_ID") .AutoLayout(al => al.Type(DiagramDataLayoutType.Tree)) ) ) <div class="selected-data"> <span class="caption">Selected Items:</span> <span id="selected-items-container">Nobody has been selected</span> </div> <script type="text/javascript"> function onContentReady(e) { var diagram = e.component; // preselect some shape var items = diagram.getItems().filter(function (item) { return item.itemType === "shape" && (item.dataItem.Full_Name === "Greta Sims"); }); if(items.length > 0) { diagram.setSelectedItems(items); diagram.scrollToItem(items[0]); diagram.focus(); } } function onSelectionChanged(e) { var items = e.items .filter(function(item) { return item.itemType === "shape"; }) .map(function(item) { return item.dataItem.Full_Name; }); if(items.length > 0) $("#selected-items-container").text(items.join(", ")); else $("#selected-items-container").text("Nobody has been selected"); } </script>

using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class DiagramController : Controller { public IActionResult ItemSelection() { return View(SampleData.OrgItemsPlain); } } }

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