Group

7 Jun 20197 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

You can add a group to the Diagram model through nodes collection. To define an object as group, set its type property as “group” and you need to add the child objects to the children collection of the group. The following code illustrates how to create a group node.

  • The group’s canUngroup property is used to defines whether the group can be ungrouped or not.
  • JAVASCRIPT
  • var nodes = [{
    	//Sets the name
    	name: "group1",
    	// Sets the type as group
    	type: "group",
    	//Defines the collection of children
    	children: [{
    		name: "rectangle1",
    		offsetX: 100,
    		offsetY: 100,
    		width: 100,
    		height: 100,
    		type: "node",
    		fillColor: "darkCyan",
    		borderWidth: 2,
    		labels: [{
    			text: "rectangle1"
    		}]
    	},{
    		name: "rectangle2",
    		offsetX: 200,
    		offsetY: 200,
    		width: 100,
    		height: 100,
    		type: "node",
    		fillColor: "darkCyan",
    		borderWidth: 2,
    		labels: [{
    		text: "rectangle2"
    		}]
    	}]
    }]
    
    //Initialize Diagram
    $("#DiagramContent").ejDiagram({
    	//Sets nodes collection to Diagram model.
    	nodes: nodes
    });

    Add group at run time

    You can add a group node at runtime by using the client side method add.

    The following code illustrates how a group node is added at run time.

  • JAVASCRIPT
  • var group = {
    	name: "group1",
    	type: "group",
    	children: [{
    		name: "rectangle1",
    		offsetX: 100,
    		offsetY: 100,
    		width: 100,
    		height: 100,
    		type: "node",
    		fillColor: "darkCyan",
    		borderWidth: 2,
    		labels: [{
    			text: "rectangle1"
    		}]
    	}, {
    		name: "rectangle2",
    		offsetX: 200,
    		offsetY: 200,
    		width: 100,
    		height: 100,
    		type: "node",
    		fillColor: "darkCyan",
    		borderWidth: 2,
    		labels: [{
    			text: "rectangle2"
    		}]
    	}]
    };
    
    
    var diagram = $("#DiagramContent").ejDiagram("instance");
    // Adds group to the Diagram.
    diagram.add(group);

    In a group node, when you add or remove a children, the groupChange event gets triggered.

    Group from palette

    Group nodes can be predefined and added to symbol palette. You can drop those groups into Diagram, when required.

    To explore how to add groups from symbol palette, refer to Symbol Palette

    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 you to position its contained elements by using margin and alignment properties.
    • It allows elements to be either vertically or horizontally aligned.

    The container property of group should be defined and its type should be set as canvas to create a canvas panel. Also, you can set an orientation as horizontal or vertical for canvas panel using nodes container orientation property. The following code illustrates how to add a canvas panel.

  • JAVASCRIPT
  • var nodes = [{
    	type: "group",
    	name: "canvas",
    	offsetX: 400,
    	offsetY: 400,
    	
    	children: [{
    		type: "node",
    		name: "node1",
    		fillColor: "darkCyan",
    		width: 100,
    		height: 100
    	}, {
    		type: "node",
    		name: "node2",
    		// Sets the margin to define the space around the child node.
    		marginTop: 30,
    		marginLeft: 30,
    		fillColor: "white",
    		width: 100,
    		height: 100
    	}, {
    		type: "node",
    		name: "node3",
    		marginTop: 60,
    		marginLeft: 60,
    		fillColor: "darkCyan",
    		width: 100,
    		height: 100
    	}, {
    		type: "node",
    		name: "node4",
    		marginTop: 90,
    		marginLeft: 90,
    		fillColor: "white",
    		width: 100,
    		height: 100
    	}],
    	
    	//Sets the container as canvas.
    	container: {
    		type: "canvas"
    	},
    	fillColor: "#E7EBF4",
    	borderColor: "black",
    	
    	//Sets the padding to give space between the group border and group content.
    	paddingLeft: 30,
    	paddingTop: 30,
    	paddingRight: 30,
    	paddingBottom: 30
    }];
    
    $("#DiagramContent").ejDiagram({
    	nodes: nodes
    });

    Diagram Group node

    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.

    • The container property of group should be defined and its type should be set as stack to create a canvas panel.

    • The group’s paddingTop, paddingBottom,paddingLeft and paddingRight properties allows you to controls the spacing around an children defined in the stack.

    • The connector marginTop, marginBottom,marginLeft and marginRight properties allows you to controls the spacing of the connector within the stack.

    • The nodes marginTop, marginBottom,marginLeft and marginRight properties allows you to controls the spacing of the connector within the stack.

    • The nodes horizontalAlign and verticalAlign properties are used to align the node on the container with set of predefined horizontal and vertical direction.

    • The connectors horizontalAlign and verticalAlign properties are used to align the connector on the container with set of predefined horizontal and vertical direction.

    The following code illustrates how to add a stack panel.

  • JAVASCRIPT
  • var nodes = [{
    	type: "group",
    	name: "Stack",
    	offsetX: 600,
    	offsetY: 200,
    	fillColor: "#E7EBF4",
    	borderColor: "black",
    	// Sets the minimum size for stack panel.
    	minHeight: 300,
    	minWidth: 300,
    	children: [{
    		type: "node",
    		name: "snode1",
    		fillColor: "darkCyan",
    		//Sets the horizontal Alignment for child node.
    		horizontalAlign: "left",
    		width: 100,
    		height: 100
    	}, {
    		type: "node",
    		name: "snode2",
    		fillColor: "darkCyan",
    		horizontalAlign: "right",
    		width: 100,
    		height: 100
    	}, {
    		type: "node",
    		name: "snode3",
    		fillColor: "darkCyan",
    		horizontalAlign: "stretch",
    		width: 100,
    		height: 100
    	}],
    	// Sets the container as stack.
    	container: {
    		type: "stack"
    	},
    }];
    
    $("#DiagramContent").ejDiagram({
    	nodes: nodes
    });

    Group node stack

    Difference between a basic group and containers

    Group Container
    It arranges the child elements based on the child elementâ??s position and size properties. Each container has a predefined behaviour to measure and arrange its child elements. Canvas and stack containers are supported in the Diagram.
    Padding, Min and Max Size properties are not applicable for basic group. It is applicable for container.
    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.