Data Binding

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 defines 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:
1. Local data
2. 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. The following code example illustrates how to bind local data with the diagram.

tagHelper

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

Data Binding

Local data

See Also