Search results

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.

Source
Preview
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
ReactDOM.render( <DiagramComponent id = "diagram"
        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>,   document.getElementById("diagram") );
        export interface EmployeeInfo {
            Role: string;
            color: string;
        }
        export interface DataInfo {
            [key: string]: string;
        }

Remote data

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

It uses two different classes: DataManager for processing and Query for serving data. DataManager communicates with data source and Query generates data queries that are read by the dataManager.

To learn more about data manager, refer to Data Manager.

To bind remote data to the diagram,configure the fields of dataSourceSettings. The following code illustrates how to bind remote data to the diagram.

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

//Initializes diagram control
ReactDOM.render( <DiagramComponent id = "diagram"
        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: Node) => {
                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) => {
                connector.type = 'Orthogonal';
                connector.style.strokeColor = '#048785';
                connector.targetDecorator.shape = 'None';
            }
        }
        //Configures data source
        dataSourceSettings = {
            {
                id: 'EmployeeID',
                parentId: 'ReportsTo',
                dataManager: new DataManager({
                        url: 'http://mvc.syncfusion.com/Services/Northwnd.svc/',
                        crossDomain: true
                    },
                    new Query().from('Employees').select('EmployeeID,ReportsTo,FirstName').take(9),
                ),
                //binds the external data with node
                doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
                    nodeModel.annotations = [{
                        /* tslint:disable:no-string-literal */
                        content: data['FirstName'],
                        style: {
                            color: 'white'
                        }
                    }];
                }
            }
        }
        //Disables all interactions except zoom/pan
        tool = {
            DiagramTools.ZoomPan
        }
        snapSettings = {
            {
                constraints: 0
            }
        }
        ><Inject services = {
            [DataBinding, HierarchicalTree]
        }
        />
        </DiagramComponent>,   document.getElementById("diagram") );
        export interface DataInfo {
            [key: string]: string;
            }

See Also