Layout events in JavaScript 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.
var diagram = new ej.diagrams.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.
var nodes = [
{
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 = {
// Unique name for the connector
id: 'connector1',
sourceID: 'Start',
targetID: 'Init',
type: 'Orthogonal',
};
let diagram = new ej.diagrams.Diagram({
width: '100%',
height: '600px',
layout: { type: 'HierarchicalTree' },
nodes: nodes,
connectors: [connectors],
expandStateChange: function (args) {
//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">
<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/tailwind3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.
var nodes = [
{
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 ',
},
],
},
];
var connectors = [
{
// 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',
},
];
var diagram = new ej.diagrams.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">
<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/tailwind3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.
var diagram = new ej.diagrams.Diagram({
width: '100%',
height: '550px',
layout: {
type: 'HierarchicalTree',
},
dataSourceSettings: {
id: 'Name',
parentId: 'ReportingPerson',
dataManager: items,
},
layoutUpdated: function (args) {
if (args.state == 'Started') {
console.log('layout started rendering');
}
}
});
diagram.appendTo('#element');