Data Binding in React Diagram Component

21 Oct 202524 minutes to read

The React Diagram component supports data binding to populate nodes and connectors from external data sources. This feature enables dynamic diagram creation based on structured data, making it ideal for visualizing organizational charts, flowcharts, and hierarchical data structures.

Data binding in the Diagram component works by mapping data source fields to diagram elements through the dataSourceSettings property. The component supports both local JSON data and remote data sources, providing flexibility for various application scenarios.

Key Data Binding Properties

The Diagram component exposes several data-related properties that control how data is mapped to diagram elements:

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

Data Binding Types

The Diagram component supports two primary data binding approaches:

1. Local data binding - Uses client-side JSON data.
2. Remote data binding - Fetches data from server endpoints using DataManager.

Local Data Binding

Local data binding allows the diagram to render nodes and connectors based on client-side JSON data. This approach is ideal for static data or scenarios where the entire dataset is available on the client side.

To implement local data binding, configure the [dataSourceSettings]fields to map your JSON data structure to diagram elements.

The following code example illustrates how to bind local data with the diagram.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DataBinding, HierarchicalTree, DiagramTools, Inject } from "@syncfusion/ej2-react-diagrams";
import { DataManager } from '@syncfusion/ej2-data';
let 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' }
];
//Initializes diagram control
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={490} 
    //Configures data source
    dataSourceSettings={{
            id: 'Name',
            parentId: 'Category',
            dataManager: new DataManager(species),
            //binds the external data with node
            doBinding: (nodeModel, data, diagram) => {
                nodeModel.annotations = [
                    {
                        /* tslint:disable:no-string-literal */
                        content: data['Name'],
                        margin: {
                            top: 10,
                            left: 10,
                            right: 10,
                            bottom: 0,
                        },
                        style: {
                            color: 'black',
                        },
                    },
                ];
                /* tslint:disable:no-string-literal */
                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: 0,
            },
        }} 
    //Sets the default values of nodes
    getNodeDefaults={(obj, diagram) => {
            //Initialize shape
            obj.shape = {
                type: 'Basic',
                shape: 'Rectangle',
            };
            obj.style = {
                strokeWidth: 1,
            };
            obj.width = 95;
            obj.height = 30;
        }} 
    //Sets the default values of connectors
    getConnectorDefaults={(connector, diagram) => {
            connector.type = 'Orthogonal';
            connector.style.strokeColor = '#4d4d4d';
            connector.targetDecorator.shape = 'None';
        }} 
    //Disables all interactions except zoom/pan
    tool={DiagramTools.ZoomPan} snapSettings={{
            constraints: 0,
        }}>
      <Inject services={[DataBinding, HierarchicalTree]}/>
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    DiagramComponent,
    NodeModel,
    ConnectorModel,
    Node,
    DataBinding,
    HierarchicalTree,
    DiagramTools,
    Inject
} from "@syncfusion/ej2-react-diagrams";
import {
    DataManager
} from '@syncfusion/ej2-data';

let species: object[] = [
    { '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' }
];
//Initializes diagram control
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={490}
      //Configures data source
      dataSourceSettings={{
        id: 'Name',
        parentId: 'Category',
        dataManager: new DataManager(species),
        //binds the external data with node
        doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
          nodeModel.annotations = [
            {
              /* tslint:disable:no-string-literal */
              content: data['Name'],
              margin: {
                top: 10,
                left: 10,
                right: 10,
                bottom: 0,
              },
              style: {
                color: 'black',
              },
            },
          ];
          /* tslint:disable:no-string-literal */
          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: 0,
        },
      }}
      //Sets the default values of nodes
      getNodeDefaults={(obj: Node, diagram: Diagram) => {
        //Initialize shape
        obj.shape = {
          type: 'Basic',
          shape: 'Rectangle',
        };
        obj.style = {
          strokeWidth: 1,
        };
        obj.width = 95;
        obj.height = 30;
      }}
      //Sets the default values of connectors
      getConnectorDefaults={(connector: ConnectorModel, diagram: Diagram) => {
        connector.type = 'Orthogonal';
        connector.style.strokeColor = '#4d4d4d';
        connector.targetDecorator.shape = 'None';
      }}
      //Disables all interactions except zoom/pan
      tool={DiagramTools.ZoomPan}
      snapSettings={{
        constraints: 0,
      }}
    >
      <Inject services={[DataBinding, HierarchicalTree]} />
    </DiagramComponent>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

export interface EmployeeInfo {
    Role: string;
    color: string;
}
export interface DataInfo {
    [key: string]: string;
}

Remote Data Binding

Remote data binding enables the diagram to fetch data from server endpoints using the DataManager service. This approach is suitable for large datasets, real-time data, or when data needs to be retrieved from databases or web services.

The DataManager handles data communication, while Query objects generate the requests that DataManager processes. This architecture provides powerful data manipulation capabilities including filtering, sorting, and paging.

For comprehensive DataManager information, see the dataSourceSettings. The following code illustrates how to bind remote data to the diagram.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DataBinding, HierarchicalTree, DiagramTools, Inject } from "@syncfusion/ej2-react-diagrams";
import { DataManager, Query } from '@syncfusion/ej2-data';
//Initializes diagram control
function App() {
    return (<DiagramComponent id="container" width={'100%'} height={490} 
    //Configrues hierarchical tree layout
    layout={{
            type: 'HierarchicalTree',
            margin: {
                left: 0,
                right: 0,
                top: 100,
                bottom: 0,
            },
            verticalSpacing: 40,
            getLayoutInfo: (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={(obj) => {
            obj.width = 80;
            obj.height = 40;
            //Initialize shape
            obj.shape = {
                type: 'Basic',
                shape: 'Rectangle',
            };
            obj.style = {
                fill: '#048785',
                strokeColor: 'Transparent',
            };
        }} 
    //Sets the default values of connector
    getConnectorDefaults={(connector) => {
            connector.type = 'Orthogonal';
            connector.style.strokeColor = '#048785';
            connector.targetDecorator.shape = 'None';
        }} 
    //Configures data source
        dataSourceSettings={{
            id: "Id",
            parentId: "ParentId",
            dataSource: new DataManager({
                url: "https://services.syncfusion.com/react/production/api/RemoteData",
                crossDomain: true
            }),
            //binds the external data with node
            doBinding: (nodeModel, data, diagram) => {
                nodeModel.annotations = [
                    {
                        /* tslint:disable:no-string-literal */
                        content: data["Label"],
                        style: { color: "white" }
                    }
                ];
            }
        }}
    //Disables all interactions except zoom/pan
    tool={DiagramTools.ZoomPan} snapSettings={{
            constraints: 0,
        }}>
      <Inject services={[DataBinding, HierarchicalTree]}/>
    </DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    DiagramComponent,
    NodeModel,
    Node,
    Connector,
    DataBinding,
    HierarchicalTree,
    TreeInfo,
    DiagramTools,
    Inject,
    ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
import {
    DataManager,
    Query
} from '@syncfusion/ej2-data';

//Initializes diagram control

function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={490}
      //Configrues hierarchical tree layout
      layout={{
        type: 'HierarchicalTree',
        margin: {
          left: 0,
          right: 0,
          top: 100,
          bottom: 0,
        },
        verticalSpacing: 40,
        getLayoutInfo: (node: Node, options: TreeInfo) => {
          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={(obj: NodeModel) => {
        obj.width = 80;
        obj.height = 40;
        //Initialize shape
        obj.shape = {
          type: 'Basic',
          shape: 'Rectangle',
        };
        obj.style = {
          fill: '#048785',
          strokeColor: 'Transparent',
        };
      }}
      //Sets the default values of connector
      getConnectorDefaults={(connector: ConnectorModel) => {
        connector.type = 'Orthogonal';
        connector.style.strokeColor = '#048785';
        connector.targetDecorator.shape = 'None';
      }}
      //Configures data source
      dataSourceSettings={{
        id: "Id",
        parentId: "ParentId",
        dataSource: new DataManager({
            url: "https://services.syncfusion.com/react/production/api/RemoteData",
            crossDomain: true
        }),
        //binds the external data with node
        doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
            nodeModel.annotations = [
                {
                    /* tslint:disable:no-string-literal */
                    content: data["Label"],
                    style: { color: "white" }
                }
            ];
        }
    }}
      //Disables all interactions except zoom/pan
      tool={DiagramTools.ZoomPan}
      snapSettings={{
        constraints: 0,
      }}
    >
      <Inject services={[DataBinding, HierarchicalTree]} />
    </DiagramComponent>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

export interface DataInfo {
    [key: string]: string;
}

CRUD operations with Data Binding

The Diagram component supports Create, Read, Update, and Delete (CRUD) operations, allowing real-time synchronization between the diagram and its data source. This functionality enables users to modify diagram elements and persist changes to the backend.

Reading Data from Multiple Sources

The diagram can simultaneously read from two data sources: one for nodes and another for connectors. This separation provides greater flexibility when dealing with complex data relationships.

Node Data Source Configuration:

• Set the dataSource property to define the node data collection

*Use the id property to specify the unique identifier field

Connector Data Source Configuration:

• Configure the connectionDataSource property for connector data.

• Set sourceID and targetID to establish connections.

• Define connection points using sourcePointX, sourcePointY, targetPointX, and targetPointY

• The dataSourceSettings connectionDataSource dataManager property is used to set the data source for the connection data source items.

Priority handling: When both parent-child relationships in the main data source and explicit connectors in the connectionDataSource are defined, the explicit connectors take priority for rendering.

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

Custom fields: Use the customFields property in crudAction to maintain additional information for both nodes and connectors.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import {
  DiagramComponent,
  Inject,
  DataBinding,
  HierarchicalTree,
} from "@syncfusion/ej2-react-diagrams";

const App = () => {
  const diagramRef = useRef(null);

  const dataModify = [
    {
      id: "288192",
      IsAssistant: false,
      ParentId: "288200",
      shapeType: "Electrical Analytical Bus",
      load: "2600000 VA",
      current: "3127 A",
      voltage: "480 V",
      Name: "SWGREM4-B",
    },
    {
      id: "288193",
      IsAssistant: false,
      ParentId: "288192",
      shapeType: "Electrical Analytical Transformer",
      load: "800000 VA",
      current: "962 A",
      voltage: "480 V",
      Name: "ATS-EQ-1",
    },
    {
      id: "288198",
      IsAssistant: false,
      ParentId: "288192",
      shapeType: "Electrical Analytical Transfer Switch",
      load: "800000 VA",
      current: "962 A",
      voltage: "480 V",
      Name: "ATS-EQ-2",
    },
  ];

  const designConnectors = () => {
    const connectors = [];
    let count = 1;

    dataModify.forEach((node) => {
      const childNodes = checkIfAnyChildExists(node.id);
      childNodes.forEach((child) => {
        connectors.push({
          id: `connector-${count}`,
          sourceID: node.id,
          srcPortID: `portOut-${child.id}`,
          targetID: child.id,
          targetPortID: `portIn-${child.id}`,
        });
        count++;
      });
    });

    return connectors;
  };

  const checkIfAnyChildExists = (id) => {
    return dataModify.filter((data) => data.ParentId === id);
  };

  const getNodeDefaults = (node) => {
    node.width = 60;
    node.height = 100;
    node.shape = { type: "Basic", shape: "Rectangle" };
    node.style = { fill: "#6BA5D7", strokeColor: "White" };
    return node;
  };

  const getConnectorDefaults = (connector) => {
    connector.style = { strokeColor: "black", strokeWidth: 2 };
    connector.targetDecorator = {
      shape: "None",
      style: { fill: "#6BA5D7", strokeColor: "#6BA5D7" },
    };
    connector.type = "Orthogonal";
    connector.segmentThumbShape = "Circle";
    connector.sourcePortID = connector.srcPortID;
    connector.targetPortID = connector.targetPortID;
    return connector;
  };

  return (
    <DiagramComponent
      id="container"
      ref={diagramRef}
      width="100%"
      height="700px"
      layout={{
        type: "OrganizationalChart",
        verticalSpacing: 100,
        getLayoutInfo: (node, options) => {
          if (!options.hasSubTree) {
            options.orientation = "Horizontal";
          }
        },
      }}
      dataSourceSettings={{
        id: "id",
        parentId: "ParentId",
        dataSource: dataModify,
        crudAction: {
          customFields: ["Id", "Description", "Color"],
        },
        connectionDataSource: {
          id: "id",
          sourceID: "sourceID",
          targetID: "targetID",
          crudAction: {
            customFields: ["srcPortID", "targetPortID"],
          },
          dataManager: designConnectors(),
        },
      }}
      getNodeDefaults={getNodeDefaults}
      getConnectorDefaults={getConnectorDefaults}
    >
      <Inject services={[DataBinding, HierarchicalTree]} />
    </DiagramComponent>
  );
};

const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
import {
  DiagramComponent,
  Inject,
  DataBinding,
  HierarchicalTree,
} from "@syncfusion/ej2-react-diagrams";

const App = () => {
  const diagramRef = useRef(null);

  const dataModify = [
    {
      id: "288192",
      IsAssistant: false,
      ParentId: "288200",
      shapeType: "Electrical Analytical Bus",
      load: "2600000 VA",
      current: "3127 A",
      voltage: "480 V",
      Name: "SWGREM4-B",
    },
    {
      id: "288193",
      IsAssistant: false,
      ParentId: "288192",
      shapeType: "Electrical Analytical Transformer",
      load: "800000 VA",
      current: "962 A",
      voltage: "480 V",
      Name: "ATS-EQ-1",
    },
    {
      id: "288198",
      IsAssistant: false,
      ParentId: "288192",
      shapeType: "Electrical Analytical Transfer Switch",
      load: "800000 VA",
      current: "962 A",
      voltage: "480 V",
      Name: "ATS-EQ-2",
    },
  ];

  const designConnectors = () => {
    const connectors = [];
    let count = 1;

    dataModify.forEach((node) => {
      const childNodes = checkIfAnyChildExists(node.id);
      childNodes.forEach((child) => {
        connectors.push({
          id: `connector-${count}`,
          sourceID: node.id,
          srcPortID: `portOut-${child.id}`,
          targetID: child.id,
          targetPortID: `portIn-${child.id}`,
        });
        count++;
      });
    });

    return connectors;
  };

  const checkIfAnyChildExists = (id) => {
    return dataModify.filter((data) => data.ParentId === id);
  };

  const getNodeDefaults = (node) => {
    node.width = 60;
    node.height = 100;
    node.shape = { type: "Basic", shape: "Rectangle" };
    node.style = { fill: "#6BA5D7", strokeColor: "White" };
    return node;
  };

  const getConnectorDefaults = (connector) => {
    connector.style = { strokeColor: "black", strokeWidth: 2 };
    connector.targetDecorator = {
      shape: "None",
      style: { fill: "#6BA5D7", strokeColor: "#6BA5D7" },
    };
    connector.type = "Orthogonal";
    connector.segmentThumbShape = "Circle";
    connector.sourcePortID = connector.srcPortID;
    connector.targetPortID = connector.targetPortID;
    return connector;
  };

  return (
    <DiagramComponent
      id="container"
      ref={diagramRef}
      width="100%"
      height="700px"
      layout={{
        type: "OrganizationalChart",
        verticalSpacing: 100,
        getLayoutInfo: (node, options) => {
          if (!options.hasSubTree) {
            options.orientation = "Horizontal";
          }
        },
      }}
      dataSourceSettings={{
        id: "id",
        parentId: "ParentId",
        dataSource: dataModify,
        crudAction: {
          customFields: ["Id", "Description", "Color"],
        },
        connectionDataSource: {
          id: "id",
          sourceID: "sourceID",
          targetID: "targetID",
          crudAction: {
            customFields: ["srcPortID", "targetPortID"],
          },
          dataManager: designConnectors(),
        },
      }}
      getNodeDefaults={getNodeDefaults}
      getConnectorDefaults={getConnectorDefaults}
    >
      <Inject services={[DataBinding, HierarchicalTree]} />
    </DiagramComponent>
  );
};

const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);

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.

Creating New Data (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.

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    DiagramComponent,
    Inject,
    DataBinding
} from "@syncfusion/ej2-react-diagrams";
let diagramInstance: DiagramComponent;
function App() {
  return (
    <DiagramComponent
      id="container"
      // diagram instance for an diagram
      ref={(diagram) => (diagramInstance = diagram)}
      width={'100%'}
      height={'550px'}
      //Configures data source for 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',
          },
        },
      }}
    >
      <Inject services={[DataBinding]} />
    </DiagramComponent>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

//Sends the inserted nodes/connectors from client side to the server side through the URL which is specified in server side.
diagramInstance.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.

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    DiagramComponent,
    Inject,
    DataBinding
} from "@syncfusion/ej2-react-diagrams";
let diagramInstance: DiagramComponent;
function App() {
  return (
    <DiagramComponent
      id="container"
      // diagram instance for an diagram
      ref={(diagram) => (diagramInstance = diagram)}
      width={'100%'}
      height={'550px'}
      //Configures data source for 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',
          },
        },
      }}
    >
      <Inject services={[DataBinding]} />
    </DiagramComponent>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

//Sends the updated nodes/connectors from client side to the server side through the URL which is specified in server side.
diagramInstance.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.

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    DiagramComponent,
    Inject,
    DataBinding
} from "@syncfusion/ej2-react-diagrams";
let diagramInstance: DiagramComponent;
function App() {
  return (
    <DiagramComponent
      id="container"
      // diagram instance for an diagram
      ref={(diagram) => (diagramInstance = diagram)}
      width={'100%'}
      height={'550px'}
      //Configures data source for 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',
          },
        },
      }}
    >
      <Inject services={[DataBinding]} />
    </DiagramComponent>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

//Sends the deleted nodes/connectors from client side to the server side through the URL which is specified in server side.
diagramInstance.removeData();

See Also

• How to arrange the diagram nodes and connectors using varies layout