Expand icon and collapse icon in React Diagram control

11 Dec 202424 minutes to read

Diagram provides support to describe the state of the node. i.e., the node is expanded or collapsed state. The IsExpanded property of node is used to expand or collapse the children nodes.The Expand and Collapse support is used to compress the hierarchy view so that only the roots of each elements are visible.

The following properties of the Node are used to represent the state of the node and allows user to Expand and Collapse the desired Node:

  • ExpandIcon

  • CollapseIcon

NOTE

Icon can be created only when the node has outEdges.

To explore the properties of expand and collapse icon, refer to expandIcon and collapseIcon.

Customizing expand and collapse icon

Size and shape

Set a size for an icon by using width and height properties.

The expandIcon’s and collapseIcon’s shape property allows to define the shape of the icon.

The following code example illustrates how to create an icon of various shapes.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  DiagramComponent,
  Inject,
  HierarchicalTree,
  DataBinding,
} from '@syncfusion/ej2-react-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';
//Initializes data source
let data = [
  {
    Name: 'Node 1',
  },
  {
    Name: 'Node 2',
    ReportingPerson: 'Node 1',
  },
];
let items = new DataManager(data, new Query().take(7));
function App() {
  return (
    <div className="control-pane">
      <div className="control-section">
        <div className="content-wrapper" style={{ width: '100%' }}>
          <DiagramComponent
            id="container"
            width={'100%'}
            height={'550px'}
            //Uses layout to auto-arrange nodes on the diagram page
            layout={{
              //Sets layout type
              type: 'HierarchicalTree',
            }}
            //Configures data source for diagram
            dataSourceSettings={{
              id: 'Name',
              parentId: 'ReportingPerson',
              dataManager: items,
            }}
            //Sets the default properties for nodes
            getNodeDefaults={(obj) => {
              obj.shape = {
                type: 'Text',
                content: obj.data.Name,
              };
              obj.style = {
                fill: 'None',
                strokeColor: 'none',
                strokeWidth: 2,
                bold: true,
                color: 'white',
              };
              obj.borderColor = 'white';
              obj.width = 100;
              obj.height = 40;
              obj.backgroundColor = '#6BA5D7';
              obj.borderWidth = 1;
              obj.shape.margin = {
                left: 5,
                right: 5,
                top: 5,
                bottom: 5,
              };
              obj.expandIcon = {
                height: 10,
                width: 10,
                shape: 'ArrowDown',
                fill: 'lightgray',
                offset: { x: 0.5, y: 1 },
              };
              obj.collapseIcon.offset = { x: 0.5, y: 1 };
              obj.collapseIcon.height = 10;
              obj.collapseIcon.width = 10;
              obj.collapseIcon.shape = 'ArrowUp';
              obj.collapseIcon.fill = 'lightgray';
              return obj;
            }}
          >
            <Inject services={[DataBinding, HierarchicalTree]} />
          </DiagramComponent>
        </div>
      </div>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from 'react-dom';
import {
  DiagramComponent,
  Inject,
  HierarchicalTree,
  DataBinding,
} from "@syncfusion/ej2-react-diagrams";
import { DataManager, Query } from "@syncfusion/ej2-data";
//Initializes data source
let data: object[] = [
  {
    Name: 'Node 1',
  },
  {
    Name: 'Node 2',
    ReportingPerson: 'Node 1',
  },
];
let items = new DataManager(data, new Query().take(7));
function App() {
  return (
    <div className="control-pane">
      <div className="control-section">
        <div className="content-wrapper" style={{ width: '100%' }}>
          <DiagramComponent
            id="container"
            width={'100%'}
            height={'550px'}
            //Uses layout to auto-arrange nodes on the diagram page
            layout={{
              //Sets layout type
              type: 'HierarchicalTree',
            }}
            //Configures data source for diagram
            dataSourceSettings={{
              id: 'Name',
              parentId: 'ReportingPerson',
              dataManager: items,
            }}
            //Sets the default properties for nodes
            getNodeDefaults={(obj) => {
              obj.shape = {
                type: 'Text',
                content: obj.data.Name,
              };
              obj.style = {
                fill: 'None',
                strokeColor: 'none',
                strokeWidth: 2,
                bold: true,
                color: 'white',
              };
              obj.borderColor = 'white';
              obj.width = 100;
              obj.height = 40;
              obj.backgroundColor = '#6BA5D7';
              obj.borderWidth = 1;
              obj.shape.margin = {
                left: 5,
                right: 5,
                top: 5,
                bottom: 5,
              };
              obj.expandIcon = {
                height: 10,
                width: 10,
                shape: 'ArrowDown',
                fill: 'lightgray',
                offset: { x: 0.5, y: 1 },
              };
              obj.collapseIcon.offset = { x: 0.5, y: 1 };
              obj.collapseIcon.height = 10;
              obj.collapseIcon.width = 10;
              obj.collapseIcon.shape = 'ArrowUp';
              obj.collapseIcon.fill = 'lightgray';
              return obj;
            }}
          >
            <Inject services={[DataBinding, HierarchicalTree]} />
          </DiagramComponent>
        </div>
      </div>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

Appearance and alignment of icon

Set the borderColor, borderWidth, and background color for an icon using borderColor, borderWidth, and fill properties.

The corner radius can be set using the cornerRadius property of the icon.

The icon can be aligned relative to the node boundaries. It has margin, offset, horizontalAlignment, and verticalAlignment settings. It is quite tricky, when all four alignments are used together but gives you more control over alignment.

The iconColor property can be used to set the strokeColor of the Icon.

The following code example illustrates the customization of icons.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  DiagramComponent,
  Inject,
  HierarchicalTree,
  DataBinding,
} from '@syncfusion/ej2-react-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';
//Initializes data source
let data = [
  {
    Name: 'Node 1',
  },
  {
    Name: 'Node 2',
    ReportingPerson: 'Node 1',
  },
];
let items = new DataManager(data, new Query().take(7));
function App() {
  return (
    <div className="control-pane">
      <div className="control-section">
        <div className="content-wrapper" style={{ width: '100%' }}>
          <DiagramComponent
            id="container"
            width={'100%'}
            height={'550px'}
            //Uses layout to auto-arrange nodes on the diagram page
            layout={{
              //Sets layout type
              type: 'HierarchicalTree',
            }}
            //Configures data source for diagram
            dataSourceSettings={{
              id: 'Name',
              parentId: 'ReportingPerson',
              dataManager: items,
            }}
            //Sets the default properties for nodes
            getNodeDefaults={(obj) => {
              obj.shape = {
                type: 'Text',
                content: obj.data.Name,
              };
              obj.style = {
                fill: 'None',
                strokeColor: 'none',
                strokeWidth: 2,
                bold: true,
                color: 'white',
              };
              obj.borderColor = 'white';
              obj.width = 100;
              obj.height = 40;
              obj.backgroundColor = '#6BA5D7';
              obj.borderWidth = 1;
              obj.shape.margin = {
                left: 5,
                right: 5,
                top: 5,
                bottom: 5,
              };
              obj.expandIcon = {
                height: 10,
                width: 10,
                shape: 'ArrowDown',
                fill: 'lightgray',
                offset: { x: 0.5, y: 1 },
              };
              obj.collapseIcon.offset = { x: 0.5, y: 1 };
              obj.collapseIcon.height = 10;
              obj.collapseIcon.width = 10;
              obj.collapseIcon.shape = 'ArrowUp';
              obj.collapseIcon.fill = 'lightgray';
              return obj;
            }}
          >
            <Inject services={[DataBinding, HierarchicalTree]} />
          </DiagramComponent>
        </div>
      </div>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from 'react-dom';
import {
  DiagramComponent,
  Inject,
  HierarchicalTree,
  DataBinding,
} from "@syncfusion/ej2-react-diagrams";
import { DataManager, Query } from "@syncfusion/ej2-data";
//Initializes data source
let data: object[] = [
  {
    Name: 'Node 1',
  },
  {
    Name: 'Node 2',
    ReportingPerson: 'Node 1',
  },
];
let items = new DataManager(data, new Query().take(7));
function App() {
  return (
    <div className="control-pane">
      <div className="control-section">
        <div className="content-wrapper" style={{ width: '100%' }}>
          <DiagramComponent
            id="container"
            width={'100%'}
            height={'550px'}
            //Uses layout to auto-arrange nodes on the diagram page
            layout={{
              //Sets layout type
              type: 'HierarchicalTree',
            }}
            //Configures data source for diagram
            dataSourceSettings={{
              id: 'Name',
              parentId: 'ReportingPerson',
              dataManager: items,
            }}
            //Sets the default properties for nodes
            getNodeDefaults={(obj) => {
              obj.shape = {
                type: 'Text',
                content: obj.data.Name,
              };
              obj.style = {
                fill: 'None',
                strokeColor: 'none',
                strokeWidth: 2,
                bold: true,
                color: 'white',
              };
              obj.borderColor = 'white';
              obj.width = 100;
              obj.height = 40;
              obj.backgroundColor = '#6BA5D7';
              obj.borderWidth = 1;
              obj.shape.margin = {
                left: 5,
                right: 5,
                top: 5,
                bottom: 5,
              };
              obj.expandIcon = {
                height: 10,
                width: 10,
                shape: 'ArrowDown',
                fill: 'lightgray',
                offset: { x: 0.5, y: 1 },
              };
              obj.collapseIcon.offset = { x: 0.5, y: 1 };
              obj.collapseIcon.height = 10;
              obj.collapseIcon.width = 10;
              obj.collapseIcon.shape = 'ArrowUp';
              obj.collapseIcon.fill = 'lightgray';
              return obj;
            }}
          >
            <Inject services={[DataBinding, HierarchicalTree]} />
          </DiagramComponent>
        </div>
      </div>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

IsExpanded

isExpanded property is used to defines whether the node is expanded or not. The following example demonstrate node’s isExpanded property. The default value of isExpanded property is true.

let node:NodeModel =  {
        id: 'Start', width: 140, height: 50, offsetX: 300, offsetY: 50,
        //Expand state of node
        isExpanded:false
        expandIcon: {shape: 'ArrowDown',   width: 20,
        height: 15},
        collapseIcon: {shape: 'ArrowUp',  width: 20,
        height: 15}
    }