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.v24.2.dll

NuGet Package: DevExpress.Web.Mvc5

#Declaration

public DiagramExtension Bind(
    object nodeDataObject,
    object edgeDataObject
)

#Parameters

Name Type Description
nodeDataObject Object

The node data source.

edgeDataObject Object

The edge data source.

#Returns

Type Description
DiagramExtension

The Diagram extension.

#Remarks

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.

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.

        public ActionResult NodesAndEdgesUpdate(MVCxDiagramNodeUpdateValues<EditableFlowObject, int> 
        nodeUpdateValues, MVCxDiagramEdgeUpdateValues<EditableFlowConnection, int> edgeUpdateValues) {
            foreach(var item in nodeUpdateValues.Update)
                WorkflowDataProvider.UpdateObject(item);
            foreach(var itemKey in nodeUpdateValues.DeleteKeys)
                WorkflowDataProvider.DeleteObject(itemKey);
            foreach(var item in nodeUpdateValues.Insert) {
                var insertedItem = WorkflowDataProvider.InsertObject(item);
                nodeUpdateValues.MapInsertedItemKey(item, insertedItem.ID);
            }

            foreach(var item in edgeUpdateValues.Update)
                WorkflowDataProvider.UpdateConnection(item);
            foreach(var itemKey in edgeUpdateValues.DeleteKeys)
                WorkflowDataProvider.DeleteConnection(itemKey);
            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