Your search did not match any results.

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 component.

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("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 onContentReady(e) { var diagram = e.component; // preselect some shape var items = diagram.getItems().filter(function (item) { return item.itemType === "shape" && (item.text === "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.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%; }