Layout events in TypeScript Diagram control
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/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></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/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>Layout updated event
The layoutUpdated event is triggered when the layout rendering process in the diagram either starts or completes. This event allows users to track the state of the layout rendering process.
The following code example explains the layout updated 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,
},
layoutUpdated: function (args: ILayoutUpdatedEventArgs) {
if (args.state == 'Started') {
console.log('layout started rendering');
}
}
});
diagram.appendTo('#element');