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 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);
}
}
}