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

Declaration

C#

public DiagramExtension Bind(
    object nodeDataObject,
    object edgeDataObject
)

VB.NET

Public Function Bind(
    nodeDataObject As Object,
    edgeDataObject As Object
) As DiagramExtension

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.

Razor

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

C#

        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