nodes
and connectors
based on the information provided from an external data source.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.ID
property is used to define the unique field of each JSON data.parentId
property is used to defines the parent field which builds the relationship between ID and parent field.root
property is used to define the root node for the diagram populated from the data source.DataSourceSettings
.Diagram supports two types of data binding. They are:
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.
<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;
}
This feature allows you to read the data source and perform add or edit or delete the data in data source at runtime.
dataManager
property. The nodes will be generated based on the data specified in the data source.connectionDataSource
property.dataManager
property is used to set the data source for the connection data source items.crudAction’s
read
property specifies the method, which is used to read the data source and its populate the nodes in the diagram.read
specifies the method, which is used to read the data source and its populates the connectors in the diagram.id
and connectionDataSource’s id
properties are used to define the unique field of each JSON data.sourceID
and targetID
properties are used to set the sourceID and targetID for connection data source item.sourcePointX
, sourcePointY
, targetPointX
, and targetPointY
properties are used to define the sourcePoint and targetPoint values for connector from data source.customFields
property is used to maintain the additional information for nodes.customFields
is used to maintain the additional information for connectors.create
property specifies the method, which is used to get the nodes added from the client-side to the server-side.create
specifies the method, which is used to get the connectors added from the client-side to the server-side.<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();
update
property specifies the method, which is used to get the modified nodes from the client-side to the server-side.update
specifies the method, which is used to get the modified connectors from the client-side to the server-side.<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();
destroy
property specifies the method, which is used to get the deleted nodes from the client-side to the server-side.destroy
specifies the method, which is used to get the deleted connectors from the client-side to the server-side.<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();