Container in React Diagram component
27 Jun 202515 minutes to read
A Container is a group of logically related shapes surrounded by a visible boundary. Shapes can be added or removed from the container at runtime. Changes made to the container do not affect its child elements, which can be individually selected, moved, or edited.
Create Container
Add a Container
The following code illustrates how to create a container node:
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DiagramComponent } from '@syncfusion/ej2-react-diagrams';
let diagramInstance;
// Define a collection of nodes used in the diagram
let nodes = [
// First rectangle node
{
id: 'node1',
// Margin from the left and top
margin: { left: 50, top: 30 },
width: 100, height: 100,
style: { fill: 'white', strokeColor: '#2546BB', strokeWidth: 1 },
shape: { type: 'Basic', shape: 'Rectangle', cornerRadius: 4 },
annotations: [{ content: 'Node 1' }]
},
// Second rectangle node
{
id: 'node2',
// Margin from the left and top
margin: { left: 200, top: 130 },
width: 100, height: 100,
style: { fill: 'white', strokeColor: '#2546BB', strokeWidth: 1 },
shape: { type: 'Basic', shape: 'Rectangle', cornerRadius: 4 },
annotations: [{ content: 'Node 2' }]
},
// Container node configuration to contain node1 and node2
{
id: 'container',
width: 350, height: 280, // Width and height of the container
offsetX: 250, offsetY: 250, // Position of the container
shape: {
// Define the type as a container
type: 'Container',
// Includes node1 and node2 as children
children: ['node1', 'node2'],
},
// Style properties for the container
style: { fill: '#E9EEFF', strokeColor: '#2546BB', strokeWidth: 1 }
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent id="divcontainer" ref={(diagram) => (diagramInstance = diagram)}
width={'100%'} height={'500px'}
nodes={nodes} created={() => {
diagramInstance.select([diagramInstance.getObject('container')]);
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DiagramComponent, NodeModel } from '@syncfusion/ej2-react-diagrams';
let diagramInstance: DiagramComponent;
// Define a collection of nodes used in the diagram
let nodes: NodeModel[] = [
// First rectangle node
{
id: 'node1',
// Margin from the left and top
margin: { left: 50, top: 30 },
width: 100, height: 100,
style: { fill: 'white', strokeColor: '#2546BB', strokeWidth: 1 },
shape: { type: 'Basic', shape: 'Rectangle', cornerRadius: 4 },
annotations: [{ content: 'Node 1' }]
},
// Second rectangle node
{
id: 'node2',
// Margin from the left and top
margin: { left: 200, top: 130 },
width: 100, height: 100,
style: { fill: 'white', strokeColor: '#2546BB', strokeWidth: 1 },
shape: { type: 'Basic', shape: 'Rectangle', cornerRadius: 4 },
annotations: [{ content: 'Node 2' }]
},
// Container node configuration to contain node1 and node2
{
id: 'container',
width: 350, height: 280, // Width and height of the container
offsetX: 250, offsetY: 250, // Position of the container
shape: {
// Define the type as a container
type: 'Container',
// Includes node1 and node2 as children
children: ['node1', 'node2'],
},
// Style properties for the container
style: { fill: '#E9EEFF', strokeColor: '#2546BB', strokeWidth: 1 }
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent id="divcontainer" ref={(diagram) => (diagramInstance = diagram)}
width={'100%'} height={'500px'}
nodes={nodes} created={() => {
diagramInstance.select([diagramInstance.getObject('container')]);
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Setting a Header
You can provide a textual description for a container using its header property. Also, users can customize the header’s appearance using the header’s style property.
The following code example explains how to define a container header and its customization:
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DiagramComponent } from '@syncfusion/ej2-react-diagrams';
let nodes = [
{
id: 'node1',
margin: { left: 50, top: 30 },
width: 100, height: 100,
style: { fill: '#357BD2', strokeColor: 'white' },
annotations: [{ content: 'Node 1', style: { color: 'white', fontFamily: 'Arial' } }],
},
{
id: 'node2',
margin: { left: 200, top: 130 },
width: 100, height: 100,
style: { fill: '#357BD2', strokeColor: 'white' },
annotations: [{ content: 'Node 2', style: { color: 'white', fontFamily: 'Arial' } }],
},
// Container Node
{
id: 'container',
// Container Size
width: 350, height: 300,
// Container Position
offsetX: 250, offsetY: 250,
// Define Shape
shape: {
// Set type as Container
type: 'Container',
// Define header for container
header: {
annotation: {
content: 'Container Title',
// Style of container title text
style: { fontSize: 18, bold: true, color: 'white' },
},
// Height of container header
height: 40,
// Style of container header
style: { fill: '#3c63ac', strokeColor: '#30518f' },
},
// children of container
children: ['node1', 'node2'],
},
// style of container
style: { fill: 'white', strokeColor: '#30518f', strokeDashArray: '4 4' },
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent id="divcontainer"
width={'100%'} height={'500px'}
nodes={nodes}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from "react-dom";
import { DiagramComponent, NodeModel } from '@syncfusion/ej2-react-diagrams';
let nodes: NodeModel[] = [
{
id: 'node1',
margin: { left: 50, top: 30 },
width: 100, height: 100,
style: { fill: '#357BD2', strokeColor: 'white' },
annotations: [{ content: 'Node 1', style: { color: 'white', fontFamily: 'Arial' } }],
},
{
id: 'node2',
margin: { left: 200, top: 130 },
width: 100, height: 100,
style: { fill: '#357BD2', strokeColor: 'white' },
annotations: [{ content: 'Node 2', style: { color: 'white', fontFamily: 'Arial' } }],
},
// Container Node
{
id: 'container',
// Container Size
width: 350, height: 300,
// Container Position
offsetX: 250, offsetY: 250,
// Define Shape
shape: {
// Set type as Container
type: 'Container',
// Define header for container
header: {
annotation: {
content: 'Container Title',
// Style of container title text
style: { fontSize: 18, bold: true, color: 'white' },
},
// Height of container header
height: 40,
// Style of container header
style: { fill: '#3c63ac', strokeColor: '#30518f' },
},
// children of container
children: ['node1', 'node2'],
},
// style of container
style: { fill: 'white', strokeColor: '#30518f', strokeDashArray: '4 4' },
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent id="divcontainer"
width={'100%'} height={'500px'}
nodes={nodes}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);NOTE
You can edit the header by double-clicking the region of the container’s header.
Container from symbol palette
Container nodes can be preconfigured and added to the symbol palette. Users can drag and drop these container nodes into the diagram as needed.
To learn more, refer to the Symbol Palette documentation.
Interactively add or remove diagram elements into Container
You can interactively add or remove diagram elements from the Container in the runtime. When a diagram element is dropped near the container’s edge, the container automatically resizes to accommodate it.
Interaction
Containers support the same interactions as regular nodes—such as selection, dragging, resizing, and rotating. For more information refer to the nodes interactions
Events
The events triggered when interacting with container nodes are similar to those for individual nodes. For more information, refer to the nodes events