Data Binding in Diagram

26 Dec 202224 minutes to read

Diagram can be populated with the nodes and connectors based on the information provided from an external data source.
Diagram exposes its specific data-related properties allowing you to specify the data source fields from where the node information has to be retrieved from.
The dataManager property is used to define the data source either as a collection of objects or as an instance of DataManager that needs to be populated in the diagram.
The ID property is used to define the unique field of each JSON data.
The parentId property is used to define the parent field which builds the relationship between ID and parent field.
The root property is used to define the root node for the diagram populated from the data source.
To explore those properties, see DataSourceSettings.
Diagram supports two types of data binding. They are:

Local data
Remote data

Local data

Diagram can be populated based on the user defined JSON data (Local Data) by mapping the relevant data source fields.

To map the user defined JSON data with diagram, configure the fields of dataSourceSettings.

CSHTML
Local.cs
<ejs-diagram id="diagram" width="100%" height="550px" getNodeDefaults="@ViewBag.getNodeDefaults" getConnectorDefaults="@ViewBag.getConnectorDefaults" created="diagramCreated">
            <e-diagram-snapsettings constraints="None"></e-diagram-snapsettings>
            <e-diagram-datasourcesettings id="Name" parentId="Category" dataManager="new DataManager(){ Data = (List<LocalDataDetails>)ViewBag.Nodes }"></e-diagram-datasourcesettings>
            <e-diagram-layout type="HierarchicalTree" horizontalSpacing="15" verticalSpacing="50"></e-diagram-layout>
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        // GET: LocalData
        public IActionResult LocalData()
        {
            List<LocalDataDetails> localData = new List<LocalDataDetails>();
            localData.Add(new LocalDataDetails("Species", ""));
            localData.Add(new LocalDataDetails("Plants", "Species"));
            localData.Add(new LocalDataDetails("Fungi", "Species"));
            localData.Add(new LocalDataDetails("Lichens", "Species"));
            localData.Add(new LocalDataDetails("Animals", "Species"));
            localData.Add(new LocalDataDetails("Mosses", "Plants"));
            localData.Add(new LocalDataDetails("Ferns", "Plants"));
            localData.Add(new LocalDataDetails("Gymnosperms", "Plants"));
            localData.Add(new LocalDataDetails("Dicotyledens", "Plants"));
            localData.Add(new LocalDataDetails("Monocotyledens", "Plants"));
            localData.Add(new LocalDataDetails("Invertebrates", "Animals"));
            localData.Add(new LocalDataDetails("Vertebrates", "Animals"));
            localData.Add(new LocalDataDetails("Insects", "Invertebrates"));
            localData.Add(new LocalDataDetails("Molluscs", "Invertebrates"));
            localData.Add(new LocalDataDetails("Crustaceans", "Invertebrates"));
            localData.Add(new LocalDataDetails("Others", "Invertebrates"));
            localData.Add(new LocalDataDetails("Fish", "Vertebrates"));
            localData.Add(new LocalDataDetails("Amphibians", "Vertebrates"));
            localData.Add(new LocalDataDetails("Reptiles", "Vertebrates"));
            localData.Add(new LocalDataDetails("Birds", "Vertebrates"));
            localData.Add(new LocalDataDetails("Mammals", "Vertebrates"));

            ViewBag.Nodes = localData;

            ViewBag.getNodeDefaults = "getNodeDefaults";
            ViewBag.getConnectorDefaults = "getConnectorDefaults";
            return View();
        }
    }
    public class LocalDataDetails
    {
        public string Name { get; set; }
        public string Category { get; set; }
        

        public LocalDataDetails(string id, string category)
        {
            this.Name = id;
            this.Category = category;            
        }
    }
}

function diagramCreated() {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            diagram.tool = ej.diagrams.DiagramTools.ZoomPan;
            diagram.dataBind();
        }
 function getNodeDefaults(obj, data, diagram) {
     //Initialize shape
     obj.annotations = [{
            /* tslint:disable:no-string-literal */
            content: obj.data.Name, margin: { top: 10, left: 10, right: 10, bottom: 0 },
            style: { color: 'black' }
        }];
        obj.style =

            {
                fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1
            }

            ; obj.shape = {
                type: 'Basic', shape: 'Rectangle'
            }

            ; obj.width = 95; obj.height = 30; return obj;
        }
        function getConnectorDefaults(connector, diagram) {
            connector.type = 'Orthogonal';
            connector.style.strokeColor = '#4d4d4d';
            connector.targetDecorator.shape = 'None';
            return connector;
        }

CRUD

This feature allows to read the data source and perform add or edit or delete the data in data source at runtime.

Read DataSource

This feature allows to define the nodes and connectors collection in the data source and connectionDataSource respectively.
You can set the data collection in the model’s dataSourceSettings dataManager property. The nodes will be generated based on the data specified in the data source.
You can set the connector collection in the model’s dataSourceSettings connectionDataSource property.
The dataSourceSettings connectionDataSource dataManager property is used to set the data source for the connection data source items.
If you have a data (data will be set in the dataSource property) with parent relationship in the database and also defined the connector in the connectionDataSource simultaneously, then the connectors set in the connectionDataSource will be considered as a priority to render the connector.
The dataSourceSettings crudAction’s read property specifies the method, which is used to read the data source and it populates the nodes in the diagram.
The connectionDataSource crudAction’s read specifies the method, which is used to read the data source and it populates the connectors in the diagram.
The dataSourceSettings’s id and connectionDataSource’s id properties are used to define the unique field of each JSON data.
The connectionDataSource’s sourceID and targetID properties are used to set the sourceID and targetID for connection data source item.
The connectionDataSource’s sourcePointX, sourcePointY, targetPointX, and targetPointY properties are used to define the sourcePoint and targetPoint values for connector from data source.
The dataSourceSettings crudAction’s customFields property is used to maintain the additional information for nodes.
Similarly, connectionDataSource’s crudAction’s customFields is used to maintain the additional information for connectors.

How to perform Editing at runtime

The dataSourceSettings crudAction object allows to define the method, which is used to get the changes done in the data source defined for shapes from the client-side to the server-side.
Similarly, the connectionDataSource crudAction object allows to define the method, which is used to get the changes done in the data source defined for connectors from the client-side to the server-side.

InsertData

The dataSourceSettings crudAction’s create property specifies the method, which is used to get the nodes added from the client-side to the server-side.
The connectionDataSource crudAction’s create specifies the method, which is used to get the connectors added from the client-side to the server-side.

CSHTML
Insertdata.cs
<ejs-diagram id="diagram" width="100%" height="550px" getNodeDefaults="@ViewBag.getNodeDefaults" getConnectorDefaults="@ViewBag.getConnectorDefaults" created="diagramCreated">
            <e-diagram-snapsettings constraints="None"></e-diagram-snapsettings>
            <e-diagram-datasourcesettings id="Name" crudAction="ViewBag.NodeCrud" connectionDataSource="ViewBag.DataSource"></e-diagram-datasourcesettings>
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        // GET: LocalData
        public IActionResult LocalData()
        {
             CRUDAction nodeCrud = new CRUDAction()
            {
                //Define URL to perform CRUD operations with nodes records in database.
                Create = "https://js.syncfusion.com/demos/ejServices/api/Diagram/AddNodes",
            };

            ViewBag.NodeCrud = nodeCrud;


            ConnectionDataSource dataSource = new ConnectionDataSource()
            {
                Id = "Name",
                SourceID = "SourceNode",
                TargetID = "TargetNode",
                CrudAction = new CRUDAction()
                {
                    //Define URL to perform CRUD operations with connector records in database.
                    Create = "https://js.syncfusion.com/demos/ejServices/api/Diagram/AddConnectors",
                }
            };
            ViewBag.DataSource = dataSource;
            return View();
        }
    }
   public class CRUDAction
    {
        [DefaultValue(null)]
        [HtmlAttributeName("read")]
        [JsonProperty("read")]
        public string Read { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("create")]
        [JsonProperty("create")]
        public string Create { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("update")]
        [JsonProperty("update")]
        public string Update { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("destroy")]
        [JsonProperty("destroy")]
        public string Destroy { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("customFields")]
        [JsonProperty("customFields")]
        public object[] CustomFields { get; set; }
    }

    public class ConnectionDataSource
    {
        [DefaultValue(null)]
        [HtmlAttributeName("id")]
        [JsonProperty("id")]
        public string Id { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("sourceID")]
        [JsonProperty("sourceID")]
        public string SourceID { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("targetID")]
        [JsonProperty("targetID")]
        public string TargetID { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("crudAction")]
        [JsonProperty("crudAction")]
        public CRUDAction CrudAction { get; set; }
    }
}

var diagramElement = document.getElementById('element');
var diagram = diagramElement.ej2_instances[0];
//Sends the newly added nodes/connectors from client side to the server side through the URL which is specified in server side.
diagram.insertData();

UpdateData

The dataSourceSettings crudAction’s update property specifies the method, which is used to get the modified nodes from the client-side to the server-side.
The connectionDataSource crudAction’s update specifies the method, which is used to get the modified connectors from the client-side to the server-side.

CSHTML
Updatedata.cs
<ejs-diagram id="diagram" width="100%" height="550px" getNodeDefaults="@ViewBag.getNodeDefaults" getConnectorDefaults="@ViewBag.getConnectorDefaults" created="diagramCreated">
            <e-diagram-snapsettings constraints="None"></e-diagram-snapsettings>
            <e-diagram-datasourcesettings id="Name" crudAction="ViewBag.NodeCrud" connectionDataSource="ViewBag.DataSource"></e-diagram-datasourcesettings>
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        // GET: LocalData
        public IActionResult LocalData()
        {
             CRUDAction nodeCrud = new CRUDAction()
            {
                //Define URL to perform CRUD operations with nodes records in database.
                Update = "https://js.syncfusion.com/demos/ejServices/api/Diagram/UpdateNodes",
            };

            ViewBag.NodeCrud = nodeCrud;


            ConnectionDataSource dataSource = new ConnectionDataSource()
            {
                Id = "Name",
                SourceID = "SourceNode",
                TargetID = "TargetNode",
                CrudAction = new CRUDAction()
                {
                    //Define URL to perform CRUD operations with connector records in database.
                    Update = "https://js.syncfusion.com/demos/ejServices/api/Diagram/UpdateConnectors",
                }
            };
            ViewBag.DataSource = dataSource;
            return View();
        }
    }
   public class CRUDAction
    {
        [DefaultValue(null)]
        [HtmlAttributeName("read")]
        [JsonProperty("read")]
        public string Read { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("create")]
        [JsonProperty("create")]
        public string Create { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("update")]
        [JsonProperty("update")]
        public string Update { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("destroy")]
        [JsonProperty("destroy")]
        public string Destroy { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("customFields")]
        [JsonProperty("customFields")]
        public object[] CustomFields { get; set; }
    }

    public class ConnectionDataSource
    {
        [DefaultValue(null)]
        [HtmlAttributeName("id")]
        [JsonProperty("id")]
        public string Id { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("sourceID")]
        [JsonProperty("sourceID")]
        public string SourceID { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("targetID")]
        [JsonProperty("targetID")]
        public string TargetID { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("crudAction")]
        [JsonProperty("crudAction")]
        public CRUDAction CrudAction { get; set; }
    }
}

var diagramElement = document.getElementById('element');
var diagram = diagramElement.ej2_instances[0];
//Sends the updated nodes/connectors from client side to the server side through the URL which is specified in server side.
diagram.updateData();

DeleteData

The dataSourceSettings crudAction’s destroy property specifies the method, which is used to get the deleted nodes from the client-side to the server-side.
The connectionDataSource crudAction’s destroy specifies the method, which is used to get the deleted connectors from the client-side to the server-side.

CSHTML
Deletedata.cs
<ejs-diagram id="diagram" width="100%" height="550px" getNodeDefaults="@ViewBag.getNodeDefaults" getConnectorDefaults="@ViewBag.getConnectorDefaults" created="diagramCreated">
            <e-diagram-snapsettings constraints="None"></e-diagram-snapsettings>
            <e-diagram-datasourcesettings id="Name" crudAction="ViewBag.NodeCrud" connectionDataSource="ViewBag.DataSource" }"></e-diagram-datasourcesettings>
</ejs-diagram>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        // GET: LocalData
        public IActionResult LocalData()
        {
             CRUDAction nodeCrud = new CRUDAction()
            {
                //Define URL to perform CRUD operations with nodes records in database.
                Destroy = "https://js.syncfusion.com/demos/ejServices/api/Diagram/DeleteNodes",
            };

            ViewBag.NodeCrud = nodeCrud;


            ConnectionDataSource dataSource = new ConnectionDataSource()
            {
                Id = "Name",
                SourceID = "SourceNode",
                TargetID = "TargetNode",
                CrudAction = new CRUDAction()
                {
                    //Define URL to perform CRUD operations with connector records in database.
                    Destroy = "https://js.syncfusion.com/demos/ejServices/api/Diagram/DeleteConnectors",
                }
            };
            ViewBag.DataSource = dataSource;
            return View();
        }
    }
   public class CRUDAction
    {
        [DefaultValue(null)]
        [HtmlAttributeName("read")]
        [JsonProperty("read")]
        public string Read { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("create")]
        [JsonProperty("create")]
        public string Create { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("update")]
        [JsonProperty("update")]
        public string Update { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("destroy")]
        [JsonProperty("destroy")]
        public string Destroy { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("customFields")]
        [JsonProperty("customFields")]
        public object[] CustomFields { get; set; }
    }

    public class ConnectionDataSource
    {
        [DefaultValue(null)]
        [HtmlAttributeName("id")]
        [JsonProperty("id")]
        public string Id { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("sourceID")]
        [JsonProperty("sourceID")]
        public string SourceID { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("targetID")]
        [JsonProperty("targetID")]
        public string TargetID { get; set; }

        [DefaultValue(null)]
        [HtmlAttributeName("crudAction")]
        [JsonProperty("crudAction")]
        public CRUDAction CrudAction { get; set; }
    }
}

var diagramElement = document.getElementById('element');
var diagram = diagramElement.ej2_instances[0];
//Sends the deleted nodes/connectors from client side to the server side through the URL which is specified in server side.
diagram.removeData();