Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Diagram

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.

@(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 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%; }