Group in Diagram Control

26 Dec 202224 minutes to read

Group is used to cluster multiple nodes and connectors into a single element. It acts like a container for its children (nodes, groups, and connectors). Every change made to the group also affects the children. Child elements can be edited individually.

Create group

Add group when initializing diagram

A group can be added to the diagram model through nodes collection. To define an object as group, add the child objects to the children collection of the group.

• The padding property of a group node defines the spacing between the group node’s edges and its children.

• While creating group, its child node needs to be declared before the group declaration.

• Add a node to the existing group child by using the diagram.group method.

• The group’s diagram.unGroup method is used to define whether the group can be ungrouped or not.

• A group can be added into a child of another group.

CSHTML

<ejs-diagram id="container" width="100%" height="700px"  nodes="ViewBag.nodes">
   
</ejs-diagram>

Group.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram {
    public partial class DiagramController: Controller {
        // GET: Nodes
        public ActionResult Nodes() {
            List < DiagramNode > nodes = new List < DiagramNode > ();
            List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
            Node1.Add(new DiagramNodeAnnotation() {
                Content = "node1", Style = new DiagramTextStyle() {
                    Color = "White", StrokeColor = "None"
                }
            });
            List < DiagramNodeAnnotation > Node2 = new List < DiagramNodeAnnotation > ();
            Node2.Add(new DiagramNodeAnnotation() {
                Content = "Node2"
            });
            List < DiagramNodeAnnotation > Node3 = new List < DiagramNodeAnnotation > ();
            Node3.Add(new DiagramNodeAnnotation() {
                Content = "Node3"
            });
            nodes.Add(new Node() {
                Id = "node1",
                    Width = 100,
                    Height = 100,
                    Style = new NodeStyleNodes() {
                        fill = "#6BA5D7",
                            strokeColor = "White"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
                    Annotations = Node1,
            });
            nodes.Add(new Node() {
                Id = "node2", OffsetX = 100, OffsetY = 170, Annotations = Node2
            });
            nodes.Add(new Node() {
                Id = "node3", OffsetX = 100, OffsetY = 240, Annotations = Node3
            });
            string[] children = {"node1", "node2"};
            nodes.Add(new Node() {
                Id = "group", Children = children  
            });
            ViewBag.nodes = nodes;

            return View();
        }
    }
    public class Node: DiagramNode {
        public string text;
    }
}

var diagram = document.getElementById("container").ej2_instances[0];
diagram.selectAll();
// Adding the third node into the existing group
diagram.group();

CSHTML

<ejs-diagram id="container" width="100%" height="700px"  nodes="ViewBag.nodes">
   
</ejs-diagram>

Ungroup.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram {
    public partial class DiagramController: Controller {
        // GET: Nodes
        public ActionResult Nodes() {
            List < DiagramNode > nodes = new List < DiagramNode > ();
            List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
            Node1.Add(new DiagramNodeAnnotation() {
                Content = "node1", Style = new DiagramTextStyle() {
                    Color = "White", StrokeColor = "None"
                }
            });
            List < DiagramNodeAnnotation > Node2 = new List < DiagramNodeAnnotation > ();
            Node2.Add(new DiagramNodeAnnotation() {
                Content = "Node2"
            });
            List < DiagramNodeAnnotation > Node3 = new List < DiagramNodeAnnotation > ();
            Node3.Add(new DiagramNodeAnnotation() {
                Content = "Node3"
            });
            nodes.Add(new Node() {
                Id = "node1",
                    Width = 100,
                    Height = 100,
                    Style = new NodeStyleNodes() {
                        fill = "#6BA5D7",
                            strokeColor = "White"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
                    Annotations = Node1,
            });
            nodes.Add(new Node() {
                Id = "node2", OffsetX = 100, OffsetY = 170, Annotations = Node2
            });
            string[] children = {"node1", "node2"};
            nodes.Add(new Node() {
                Id = "group", Children = children  
            });
            ViewBag.nodes = nodes;

            return View();
        }
    }
    public class Node: DiagramNode {
        public string text;
    }
}

var diagram = document.getElementById("container").ej2_instances[0];
diagram.selectAll();
// Ungroup the selected group into nodes
diagram.unGroup();

Add group at runtime

A group node can be added at runtime by using the client-side method diagram.add.

CSHTML

<ejs-diagram id="container" width="100%" height="700px"  nodes="ViewBag.nodes">
   
</ejs-diagram>

Run.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram {
    public partial class DiagramController: Controller {
        // GET: Nodes
        public ActionResult Nodes() {
            List < DiagramNode > nodes = new List < DiagramNode > ();
            List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
            Node1.Add(new DiagramNodeAnnotation() {
                Content = "node1", Style = new DiagramTextStyle() {
                    Color = "White", StrokeColor = "None"
                }
            });
            List < DiagramNodeAnnotation > Node2 = new List < DiagramNodeAnnotation > ();
            Node2.Add(new DiagramNodeAnnotation() {
                Content = "Node2"
            });
            List < DiagramNodeAnnotation > Node3 = new List < DiagramNodeAnnotation > ();
            Node3.Add(new DiagramNodeAnnotation() {
                Content = "Node3"
            });
            nodes.Add(new Node() {
                Id = "node1",
                    Width = 100,
                    Height = 100,
                    Style = new NodeStyleNodes() {
                        fill = "#6BA5D7",
                            strokeColor = "White"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
                    Annotations = Node1,
            });
            nodes.Add(new Node() {
                Id = "node2", OffsetX = 100, OffsetY = 170, Annotations = Node2
            });
            nodes.Add(new Node() {
                Id = "node3", OffsetX = 100, OffsetY = 240, Annotations = Node3
            });
            ViewBag.nodes = nodes;

            return View();
        }
    }
    public class Node: DiagramNode {
        public string text;
    }
}

var diagram = document.getElementById("container").ej2_instances[0];
var group= {
    id: 'group2',
    children: ['node1', 'node2']
};
// Add the group into the diagram
diagram.add(group);

Container

Containers are used to automatically measure and arrange the size and position of the child elements in a predefined manner. There are two types of containers available.

Canvas

• The canvas panel supports absolute positioning and provides the least layout functionality to its contained diagram elements.

• Canvas allows to position its contained elements by using the margin and alignment properties.

• Rendering alone possible in canvas container.

• It allows elements to be either vertically or horizontally aligned.

• Child can be defined with the collection canvas.children property.

• Basic element can be defined with the collection of basicElements.

Stack

• Stack panel is used to arrange its children in a single line or stack order, either vertically or horizontally.

• It controls spacing by setting margin properties of child and padding properties of group. By default, a stack panel’s orientation is vertical.

CSHTML

<ejs-diagram id="container" width="100%" height="700px" getNodeDefaults = "@ViewBag.getNodeDefaults" setNodeTemplate="@ViewBag.setNodeTemplate">
</ejs-diagram>

Stack.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram {
    public partial class DiagramController: Controller {
        // GET: Nodes
        public ActionResult Nodes() {
            List < DiagramNode > nodes = new List < DiagramNode > ();
            List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
            Node1.Add(new DiagramNodeAnnotation() {
                Content = "node1", Style = new DiagramTextStyle() {
                    Color = "White", StrokeColor = "None"
                }
            });
            nodes.Add(new Node() {
                Id = "node1",
                    Width = 100,
                    Height = 100,
                    Style = new NodeStyleNodes() {
                        Fill = "darkcyan"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
                    Annotations = Node1
            });
            ViewBag.nodes = nodes;
            ViewBag.getNodeDefaults = "getNodeDefaults";
            ViewBag.setNodeTemplate = "setNodeTemplate";


            return View();
        }
    }
    public class Node: DiagramNode {
        public string text;
    }
}

function getTextElement(text)  {
    let textElement: TextElement = new TextElement();
    textElement.width = 50;
    textElement.height = 20;
    textElement.content = text;
    return textElement;
}
function addRows (column) {
    column.children.push(getTextElement('Row1'));
    column.children.push(getTextElement('Row2'));
    column.children.push(getTextElement('Row3'));
    column.children.push(getTextElement('Row4'));
}
function getNodeDefaults (node) {
        node.height = 100;
        node.width = 100;
        node.style.fill = '#6BA5D7';
        node.style.strokeColor = 'white';
        return node;
    },
    function setNodeTemplate(obj, diagram) {
        if (obj.id.indexOf('node5') !== -1) {
            // It will be replaced with grid panel
            var table = new StackPanel();
            table.orientation = 'Horizontal';
            table.padding.left
            var column1 = new StackPanel();
            column1.children = [];
            column1.children.push(getTextElement('Column1'));
            addRows(column1);
            var column2 = new StackPanel();
            column2.children = [];
            column2.children.push(getTextElement('Column2'));
            addRows(column2);

            table.children = [column1, column2];
            return table;
        }
        return null;
    }

Difference between a basic group and containers

Group	Container
It arranges the child elements based on the child elements position and size properties.	Each container has a predefined behavior to measure and arrange its child elements. Canvas and stack containers are supported in the diagram.
The Padding, Min, and Max Size properties are not applicable for basic group.	It is applicable for container.
The Children’s margin and alignment properties are not applicable for basic group.	It is applicable for container.

Interaction

You can edit the group and its children at runtime. For more information about how to interact with a group, refer to Edit Groups.

See Also

• How to add annotations to the node
• How to add ports to the node
• How to enable/disable the behavior of the node
• How to add nodes to the symbol palette
• How to create diagram nodes using drawing tools
• How to perform the interaction on the group