Layout events in EJ2 TypeScript Diagram control

4 Dec 202412 minutes to read

DataLoaded event

The dataLoaded event is triggered after the diagram is populated from the external data source.

The following code example explains the data loaded event in the diagram.

// Initializes the diagram
let diagram: Diagram = new Diagram({
  width: '100%',
  height: '550px',
  layout: {
    type: 'HierarchicalTree',
  },
  dataSourceSettings: {
    id: 'Name',
    parentId: 'ReportingPerson',
    dataManager: items,
  },
  dataLoaded: function (args) {
    //we can get diagram instance in args.
    console.log(args);
  },
});

diagram.appendTo('#element');

ExpandStateChange event

The expandStateChange will be triggered when the state of the expand and collapse icon change for a node.

The following code example explains the expandStateChange event in the diagram.

import {
    Diagram,
    NodeModel,
    ConnectorModel,
    HierarchicalTree,
    IExpandStateChangeEventArgs,
  } from '@syncfusion/ej2-diagrams';
  Diagram.Inject(HierarchicalTree);
  let nodes: NodeModel[] = [
    {
      id: 'Start',
      width: 140,
      height: 50,
      offsetX: 300,
      offsetY: 50,
      annotations: [
        {
          content: 'Node1',
        },
      ],
      style: {
        fill: '#6BA5D7',
        strokeColor: 'white',
      },
      expandIcon: {
        shape: 'ArrowDown',
        width: 20,
        height: 15,
      },
      collapseIcon: {
        shape: 'ArrowUp',
        width: 20,
        height: 15,
      },
    },
    {
      id: 'Init',
      width: 140,
      height: 50,
      offsetX: 300,
      offsetY: 140,
      style: {
        fill: '#6BA5D7',
        strokeColor: 'white',
      },
      annotations: [
        {
          content: 'Node2',
        },
      ],
    },
  ];
  let connectors: ConnectorModel = {
    // Unique name for the connector
    id: 'connector1',
    sourceID: 'Start',
    targetID: 'Init',
    type: 'Orthogonal',
  };
  let diagram: Diagram = new Diagram({
    width: '100%',
    height: '600px',
    layout: { type: 'HierarchicalTree' },
    nodes: nodes,
    connectors: [connectors],
    expandStateChange: function (args: IExpandStateChangeEventArgs) {
      //We can get the expanded or collapsed state in args
      console.log('Expanded ' + args.state);
    },
  });
  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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Animation complete event

The animationComplete event is triggered after the animation of the diagram elements is completed. The following example demonstrates how to handle the animation complete event and customize based on the expand state of the root node.

import {
  Diagram,
  NodeModel,
  ConnectorModel,
  HierarchicalTree,
  LayoutAnimation,
} from '@syncfusion/ej2-diagrams';
Diagram.Inject(HierarchicalTree, LayoutAnimation);
let nodes: NodeModel[] = [
  {
    id: 'Start',
    width: 140,
    height: 50,
    offsetX: 300,
    offsetY: 50,
    annotations: [
      {
        content: 'Node1',
      },
    ],
    style: {
      fill: '#6BA5D7',
      strokeColor: 'white',
    },
    expandIcon: {
      shape: 'ArrowDown',
      width: 20,
      height: 15,
    },
    collapseIcon: {
      shape: 'ArrowUp',
      width: 20,
      height: 15,
    },
  },
  {
    id: 'Init',
    width: 140,
    height: 50,
    offsetX: 300,
    offsetY: 140,
    style: {
      fill: '#6BA5D7',
      strokeColor: 'white',
    },
    annotations: [
      {
        content: 'Node2',
      },
    ],
  },
  {
    id: 'Init2',
    width: 140,
    height: 50,
    offsetX: 100,
    offsetY: 140,
    style: {
      fill: '#6BA5D7',
      strokeColor: 'white',
    },
    annotations: [
      {
        content: 'Node3 ',
      },
    ],
  },
  {
    id: 'Init3',
    width: 140,
    height: 50,
    offsetX: 150,
    offsetY: 140,
    style: {
      fill: '#6BA5D7',
      strokeColor: 'white',
    },
    annotations: [
      {
        content: 'Node4 ',
      },
    ],
  },
];
let connectors: ConnectorModel[] = [
  {
    // Unique name for the connector
    id: 'connector1',
    sourceID: 'Start',
    targetID: 'Init',
    type: 'Orthogonal',
  },
  {
    // Unique name for the connector
    id: 'connector2',
    sourceID: 'Start',
    targetID: 'Init2',
    type: 'Orthogonal',
  },
  {
    // Unique name for the connector
    id: 'connector3',
    sourceID: 'Init2',
    targetID: 'Init3',
    type: 'Orthogonal',
  },
];
let diagram: Diagram = new Diagram({
  width: '100%',
  height: '600px',
  layout: { type: 'HierarchicalTree' },
  nodes: nodes,
  connectors: connectors,
  animationComplete: function () {
    console.log('Animation complete');
    diagram.nodes[0].style.fill =
      diagram.nodes[0].style.fill === '#6BA5D7' ? 'red' : '#6BA5D7';
    diagram.dataBind();
    //customize
  },
});
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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>