Skip to main content

DiagramExtension.Bind(Object) Method

Binds the Diagram to a data source.

Namespace: DevExpress.Web.Mvc

Assembly: DevExpress.Web.Mvc5.v23.1.dll

NuGet Package: DevExpress.Web.Mvc5


public DiagramExtension Bind(
    object nodeDataObject


Name Type Description
nodeDataObject Object

The data source.


Type Description

The Diagram extension.


Use the Bind(System.Object) method to bind the Diagram extension to a linear tree-like data structure. You should set the Key and ParentKey properties that allow the Diagram extension to transform the linear structure to hierarchical.

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";

    settings.BatchUpdateRouteValues = new { Controller = "DataBinding", Action = "LinearUpdate" };

    settings.Mappings.Node.Key = "ID";
    settings.Mappings.Node.ParentKey = "ParentID";
    settings.Mappings.Node.Text = "DepartmentName";

    settings.SettingsAutoLayout.Type = DevExpress.Web.ASPxDiagram.DiagramAutoLayout.Tree;


The BatchUpdateRouteValues property specifies a Controller and Action that handle callbacks related to node and edge updates.


When you bind the Diagram extension to a data source, use the MapInsertedItemKey(TItem, TKey) method to provide key values for the inserted items.

public ActionResult LinearUpdate(MVCxDiagramNodeUpdateValues<EditableDepartment, int> nodeUpdateValues) {
    foreach(var item in nodeUpdateValues.Update)
    foreach(var itemKey in nodeUpdateValues.DeleteKeys)
    foreach(var item in nodeUpdateValues.Insert) {
        var insertedItem = DepartmentProvider.Insert(item);
        nodeUpdateValues.MapInsertedItemKey(item, insertedItem.ID);
    return DiagramExtension.GetBatchUpdateResult(nodeUpdateValues);

Run Demo: Tree from Linear Data Structure

See Also