DiagramExtension.Bind(Object) Method

Binds the Diagram to a data source.

Namespace: DevExpress.Web.Mvc

Assembly: DevExpress.Web.Mvc5.v19.2.dll

Declaration

C#

public DiagramExtension Bind(
    object nodeDataObject
)

VB.NET

Public Function Bind(
    nodeDataObject As Object
) As DiagramExtension

Parameters

Name	Type	Description
nodeDataObject	Object	The data source.

Returns

Type	Description
DiagramExtension	The Diagram extension.

Remarks

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.

Razor

@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;

}).Bind(Model).GetHtml()

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

Important

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

C#

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

Online Demo

Diagram - Tree from Linear Data Structure