Data binding in EJ2 JavaScript Diagram control

4 Dec 202423 minutes to read

Its essential for binding external data to the diagram, enabling dynamic creation of nodes and connectors based on the provided data. Here’s a detailed explanation of the key properties and their usage:

DataSource settings

The dataSourceSettings property of diagram configures the external data source that binds to the diagram, making it possible to populate the diagram with nodes and connectors dynamically.

  • Data Manager - Defines the data source as a collection of objects or an instance of DataManager to populate the diagram.

  • ID - The unique identifier for each data in the data source.

  • parentId - Establishes the hierarchical relationship between nodes by linking each node to its parent node. This property is vital for creating tree structures within the diagram.

  • root - Specifies the root node of the diagram when data is loaded. This root node serves as the starting point for the diagram’s structure.

  • The doBinding function is used to customize a node based on the data source. It is triggered during the initialization of each node, allowing you to apply specific configurations or data-driven customizations to the node.

  • Diagram supports two types of data binding. They are:

    1. Local data
    2. Remote data

Local data

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

To map user-defined JSON data to the diagram, configure the fields in dataSourceSettings. The following code example illustrates how to bind local data with the diagram.

var species = [
    { Name: 'Species', fillColor: '#3DD94A' },
    { Name: 'Plants', Category: 'Species' },
    { Name: 'Fungi', Category: 'Species' },
    { Name: 'Lichens', Category: 'Species' },
    { Name: 'Animals', Category: 'Species' },
    { Name: 'Mosses', Category: 'Plants' },
    { Name: 'Ferns', Category: 'Plants' },
    { Name: 'Gymnosperms', Category: 'Plants' },
    { Name: 'Dicotyledens', Category: 'Plants' },
    { Name: 'Monocotyledens', Category: 'Plants' },
    { Name: 'Invertebrates', Category: 'Animals' },
    { Name: 'Vertebrates', Category: 'Animals' },
    { Name: 'Insects', Category: 'Invertebrates' },
    { Name: 'Molluscs', Category: 'Invertebrates' },
    { Name: 'Crustaceans', Category: 'Invertebrates' },
    { Name: 'Others', Category: 'Invertebrates' },
    { Name: 'Fish', Category: 'Vertebrates' },
    { Name: 'Amphibians', Category: 'Vertebrates' },
    { Name: 'Reptiles', Category: 'Vertebrates' },
    { Name: 'Birds', Category: 'Vertebrates' },
    { Name: 'Mammals', Category: 'Vertebrates' },
  ];
  
  ej.diagrams.Diagram.Inject(
    ej.diagrams.DataBinding,
    ej.diagrams.HierarchicalTree
  );
  //Initializes diagram control
  var diagram = new ej.diagrams.Diagram({
    width: '100%',
    height: 490,
    //Configures data source
    dataSourceSettings: {
      id: 'Name',
      parentId: 'Category',
      dataManager: new ej.data.DataManager(species),
      //binds the external data with node
      doBinding: function (nodeModel, data, diagram) {
        nodeModel.annotations = [
          {
            content: data.Name,
            margin: { top: 10, left: 10, right: 10, bottom: 10 },
            style: { color: 'black' },
          },
        ];
        nodeModel.style = {
          fill: '#ffeec7',
          strokeColor: '#f5d897',
          strokeWidth: 1,
        };
      },
    },
    //Configrues HierarchicalTree layout
    layout: {
      type: 'HierarchicalTree',
      horizontalSpacing: 15,
      verticalSpacing: 50,
      margin: { top: 10, left: 10, right: 10, bottom: 10 },
    },
    //Sets the default values of nodes
    getNodeDefaults: function (obj, diagram) {
      obj.shape = { type: 'Basic', shape: 'Rectangle' };
      obj.style = { strokeWidth: 1 };
      obj.width = 95;
      obj.height = 30;
    },
    //Sets the default values of connectors.
    getConnectorDefaults: function (connector, diagram) {
      connector.type = 'Orthogonal';
      connector.style.strokeColor = '#4d4d4d';
      connector.targetDecorator.shape = 'None';
    },
    //Disables all interactions except zoom/pan
    tool: ej.diagrams.DiagramTools.ZoomPan,
    snapSettings: { constraints: 0 },
  });
  diagram.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

NOTE

To convert the data source into nodes and connectors, DataBinding should be injected into the diagram.

Remote data

You can bind the diagram with remote data by using dataManager.

DataManager can be bound to remote data source by assigning service end point URL to the url property. With the provided url, the DataManager handles all communication with the data server with help of queries.

When querying data, the DataManager will convert the query object(Query) into server request after calling executeQuery and waits for the server response(JSON format).

The following code illustrates how to bind remote data to the diagram.

ej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);
    //Initializes diagram control
    var diagram = new ej.diagrams.Diagram({
        width: '100%', height: 490,
        //Configrues hierarchical tree layout
        layout: {
            type: 'HierarchicalTree', margin: { left: 0, right: 0, top: 100, bottom: 0 },
            verticalSpacing: 40,
            getLayoutInfo: function (node, options) {
                if (options.level === 3) {
                    node.style.fill = '#3c418d';
                }
                if (options.level === 2) {
                    node.style.fill = '#108d8d';
                    options.type = 'Center';
                    options.orientation = 'Horizontal';
                }
                if (options.level === 1) {
                    node.style.fill = '#822b86';
                }
            }
        },
        //Sets the default values of nodes
        getNodeDefaults: function (obj) {
            obj.width = 80;
            obj.height = 40;
            obj.shape = { type: 'Basic', shape: 'Rectangle' };
            obj.style = { fill: '#048785', strokeColor: 'Transparent' };
        },
        //Sets the default values of connector
        getConnectorDefaults: function (connector) {
            connector.type = 'Orthogonal';
            connector.style.strokeColor = '#048785';
            connector.targetDecorator.shape = 'None';
        },
          //Configures data source
          dataSourceSettings: {
            id: 'Id',
            parentId: 'ParentId',
            dataSource: new ej.data.DataManager({ 
            url: 'https://services.syncfusion.com/js/production/api/RemoteData',
            crossDomain: true,
            }),
            //binds the external data with node
            doBinding: function (nodeModel, data, diagram) {
                nodeModel.annotations = [{
                    content: data.Label,
                    style: { color: 'white' }
                }];
            }
        },
        //Disables all interactions except zoom/pan
        tool: ej.diagrams.DiagramTools.ZoomPan,
        snapSettings: { constraints: 0 }
    });
    diagram.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

CRUD

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

Read DataSource

  • This feature allows you 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 its populate the nodes in the diagram.

  • The connectionDataSource crudAction’s read specifies the method, which is used to read the data source and its 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 you 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 you 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.

  • The following code example illustrates how to send the newly added or inserted data from the client to server-side.

//Initialize diagram
var diagram = new ej.diagrams.Diagram({
     dataSourceSettings: {
       crudAction:
        {
            //Url which triggers the server side AddNodes method
            create: 'https://ej2services.syncfusion.com/development/web-services/api/Crud/AddNodes',
        },
     }
     connectionDataSource: {
            crudAction: {
                //Url which triggers the server side AddConnectors method
                create: 'https://ej2services.syncfusion.com/development/web-services/api/Crud/AddConnectors',
            }
     }
},'#diagram');
//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.

  • The following code example illustrates how to send the updated data from the client to the server side.

//Initialize diagram
var diagram = new ej.diagrams.Diagram({
     dataSourceSettings: {
       crudAction:
        {
           //Url which triggers the server side UpdateNodes method
           update: 'https://ej2services.syncfusion.com/development/web-services/api/Crud/UpdateNodes',
        },
     }
     connectionDataSource: {
        crudAction: {
           //Url which triggers the server side UpdateConnectors method
           update: 'https://ej2services.syncfusion.com/development/web-services/api/Crud/UpdateConnectors',
        }
     }
},'#diagram');
//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.

//Initialize diagram
var diagram = new ej.diagrams.Diagram({
     dataSourceSettings: {
       crudAction:
        {
          //Url which triggers the server side DeleteNodes method
          destroy: 'https://ej2services.syncfusion.com/development/web-services/api/Crud/DeleteNodes',
        },
     }
     connectionDataSource: {
        crudAction: {
           //Url which triggers the server side DeleteConnectors method
           destroy: 'https://ej2services.syncfusion.com/development/web-services/api/Crud/DeleteConnectors',
        }
     }
},'#diagram');
//Sends the deleted nodes/connectors from client side to the server side through the URL which is specified in server side.
diagram.removeData();

See Also