Skip to main content

DiagramExtension.Bind(Object, Object) Method

Binds the Diagram to a node and an edge data sources.

Namespace: DevExpress.Web.Mvc

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

NuGet Package: DevExpress.Web.Mvc5


public DiagramExtension Bind(
    object nodeDataObject,
    object edgeDataObject


Name Type Description
nodeDataObject Object

The node data source.

edgeDataObject Object

The edge data source.


Type Description

The Diagram extension.


Use this Bind method to bind the Diagram extension to two data sources: one for shapes (nodeDataObject) and another for shape connectors (edgeDataObject). You should add mapping information for a shape’s Key and a connector’s Key, FromKey and ToKey properties.

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

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

    settings.Mappings.Node.Key = "ID";

    settings.Mappings.Edge.Key = "ID";
    settings.Mappings.Edge.FromKey = "FromID";
    settings.Mappings.Edge.ToKey = "ToID";

}).Bind(Model.Objects, Model.Connections).GetHtml()

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 NodesAndEdgesUpdate(MVCxDiagramNodeUpdateValues<EditableFlowObject, int> 
        nodeUpdateValues, MVCxDiagramEdgeUpdateValues<EditableFlowConnection, int> edgeUpdateValues) {
            foreach(var item in nodeUpdateValues.Update)
            foreach(var itemKey in nodeUpdateValues.DeleteKeys)
            foreach(var item in nodeUpdateValues.Insert) {
                var insertedItem = WorkflowDataProvider.InsertObject(item);
                nodeUpdateValues.MapInsertedItemKey(item, insertedItem.ID);

            foreach(var item in edgeUpdateValues.Update)
            foreach(var itemKey in edgeUpdateValues.DeleteKeys)
            foreach(var item in edgeUpdateValues.Insert) {
                var insertedItem = WorkflowDataProvider.InsertConnection(item);
                edgeUpdateValues.MapInsertedItemKey(item, insertedItem.ID);

            return DiagramExtension.GetBatchUpdateResult(nodeUpdateValues, edgeUpdateValues);

Run Demo: Node and Edge Data Sources

See Also