Item Selection

You can access selected shape data via the onSelectionChanged function. In this demo, the function fetches selected shape information and displays it under the Diagram UI component.

See more Hide details

Prev Demo Next Demo

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.

Send Feedback

Thank you!
We appreciate your feedback.

ASP.NET MVC

@(Html.DevExtreme().Diagram() .ID("diagram") .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("FullName") .ParentKeyExpr("HeadID") .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 onSelectionChanged(e) { var items = e.items .filter(function(item) { return item.itemType === "shape"; }) .map(function(item) { return item.text; }); if(items.length > 0) $("#selected-items-container").text(items.join(", ")); else $("#selected-items-container").text("Nobody has been selected"); } </script>

using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class DiagramController : Controller { public ActionResult 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%; }

Item Selection

jQuery

Angular

Vue

React

ASP.NET Core

ASP.NET MVC