Events in EJ2 TypeScript Diagram control

15 Dec 20247 minutes to read

Events in diagrams are triggered during interactions with diagram elements, allowing for extensive customization and enhancing the overall user experience. These events can be used to dynamically update the diagram, apply specific styles, validate user actions, and more. By leveraging these events, you can create interactive and responsive diagramming applications tailored to specific needs.

Load event

The load event triggers before the diagram load.

Loaded Event

The loaded event triggers when all diagram elements are loaded using loadDiagram method. You can use this event to customize diagram elements during the loading process.

var diagram = new ej.diagrams.Diagram({
    loaded:(args) {
      // You can use this event to customize diagram elements during the loading process.
      }
});

The event has two arguments such as name, diagram

name

Type: String

Description: Returns the event name.

diagram

Type: Diagram

Description: Returns the diagram model properties.

Users can perform customizations or modifications to the diagram elements once the loading process is complete.

Data loaded event

The dataLoaded event is triggered when the data source is loaded in diagram.

Created event

The created event is triggered when the diagram component is rendered. You can perform any action in the created event such as selecting any object in the diagram or customizing the nodes/connector.

The following example shows the order of these event triggers and how to handle these events in a diagram.

import {
  Diagram,
  HierarchicalTree,
  IDataLoadedEventArgs,
  ILoadEventArgs,
  DataBinding,
} from '@syncfusion/ej2-diagrams';
import { DataManager } from '@syncfusion/ej2-data';
Diagram.Inject(HierarchicalTree, DataBinding);
let data: Object = [
  { id: 'CEO', parent: null },
  { id: 'Manager', parent: 'CEO' },
  { id: 'Lead', parent: 'CEO' },
];
let diagram: Diagram = new Diagram({
  width: '100%',
  height: '600px',
  layout: { type: 'HierarchicalTree' },
  dataSourceSettings: {
    id: 'id',
    parentId: 'parent',
    dataSource: new DataManager(data),
  },
  load: function (args: ILoadEventArgs) {
    //Triggers before diagram load
    console.log('Load event triggered');
  },
  dataLoaded: function (args: IDataLoadedEventArgs) {
    //Notifies after the data is loaded
    console.log('Data source loaded');
  },
  created: function () {
    console.log('Diagram Created');
  },
});
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/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/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>

Mouse wheel event

The mouseWheel event triggers when the mouse is scrolled over the diagram area. You can use this event to prevent zooming and scrolling with the mouse wheel. The following example demonstrates how to handle this event and customize it to prevent zooming and scrolling using the mouse wheel.

import { Diagram, IMouseWheelEventArgs } from '@syncfusion/ej2-diagrams';

let diagram: Diagram = new Diagram({
  width: '100%',
  height: '600px',
  scrollSettings: { scrollLimit: 'Infinity' },
  nodes: [
    {
      id: 'node1',
      offsetX: 300,
      offsetY: 200,
      width: 200,
      height: 100,
      style: { fill: '#64Abbd' },
    },
  ],
  mouseWheel: function (args: IMouseWheelEventArgs) {
    //Prevents scrolling and zooming in diagram.
    args.cancel = true;
  },
});
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/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/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>

Other events

There are several other events that will be triggered while interacting with diagram elements. To learn more about these events, refer to the sections on node-events , connector-events , port-events , annotation-events , scroll-events , history-events , layout-events, user-handle-events , fixed-user-handle-events , Symbol-palette-events.