Container in ASP.NET MVC Diagram Component
19 Jun 202522 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.
@Syncfusion.EJ2.Diagrams;
@(Html.EJS().Diagram("container").Width("100%").Height("500px")
.Nodes((List<DiagramNode>)ViewData["nodes"])
.Render()
)using System;
using System.Collections.Generic;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
public partial class DiagramController : Controller
{
// GET: Nodes
public ActionResult Nodes()
{
List<DiagramNode> nodes = new List<DiagramNode>();
List<DiagramNodeAnnotation> Node1Annots = new List<DiagramNodeAnnotation>();
Node1Annots.Add(new DiagramNodeAnnotation()
{
Content = "Node 1",
});
nodes.Add(new Node()
{
Id = "node1",
Width = 100,
Height = 100,
text = "node1",
Margin = new DiagramMargin()
{
Left = 50,
Top = 30
},
Shape = new DiagramShapeStyle()
{
Type = "Basic",
Shape = "Rectangle",
CornerRadius = 4
},
Style = new NodeStyleNodes()
{
Fill = "white",
StrokeColor = "#2546BB",
StrokeWidth = 1
},
Annotations = Node1Annots
});
List<DiagramNodeAnnotation> Node2Annots = new List<DiagramNodeAnnotation>();
Node2Annots.Add(new DiagramNodeAnnotation()
{
Content = "Node 2",
});
nodes.Add(new Node()
{
Id = "node2",
Width = 100,
Height = 100,
text = "node2",
Margin = new DiagramMargin()
{
Left = 200,
Top = 130
},
Shape = new DiagramShapeStyle()
{
Type = "Basic",
Shape = "Rectangle",
CornerRadius = 4
},
Style = new NodeStyleNodes()
{
Fill = "white",
StrokeColor = "#2546BB",
StrokeWidth = 1
},
Annotations = Node2Annots
});
// Container Node
nodes.Add(new Node()
{
Id = "container",
Width = 350,
Height = 280,
OffsetX = 250,
OffsetY = 250,
Shape = new DiagramShapeStyle()
{
Type = "Container",
Children = ["node1", "node2"]
},
Style = new NodeStyleNodes()
{
Fill = "#E9EEFF",
StrokeColor = "#2546BB",
StrokeWidth = 1
},
});
ViewData.nodes = nodes;
return View();
}
}
public class Node : DiagramNode
{
public string text;
}
}
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:
@Syncfusion.EJ2.Diagrams;
@(Html.EJS().Diagram("container").Width("100%").Height("500px")
.Nodes((List<DiagramNode>)ViewData["nodes"])
.Render()
)using System;
using System.Collections.Generic;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
public partial class DiagramController : Controller
{
// GET: Nodes
public ActionResult Nodes()
{
List<DiagramNode> nodes = new List<DiagramNode>();
List<DiagramNodeAnnotation> Node1Annots = new List<DiagramNodeAnnotation>();
Node1Annots.Add(new DiagramNodeAnnotation()
{
Content = "Node 1",
Style = new DiagramTextStyle() { Color = "white", FontFamily = "Arial" }
});
nodes.Add(new Node()
{
Id = "node1",
Width = 100,
Height = 100,
text = "node1",
Margin = new DiagramMargin()
{
Left = 50,
Top = 30
},
Style = new NodeStyleNodes()
{
Fill = "#357BD2",
StrokeColor = "white"
},
Annotations = Node1Annots
});
List<DiagramNodeAnnotation> Node2Annots = new List<DiagramNodeAnnotation>();
Node2Annots.Add(new DiagramNodeAnnotation()
{
Content = "Node 2",
Style = new DiagramTextStyle() { Color = "white", FontFamily = "Arial" }
});
nodes.Add(new Node()
{
Id = "node2",
Width = 100,
Height = 100,
text = "node1",
Margin = new DiagramMargin()
{
Left = 200,
Top = 130
},
Style = new NodeStyleNodes()
{
Fill = "357BD2",
StrokeColor = "white"
},
Annotations = Node2Annots
});
// Container Node
nodes.Add(new Node()
{
Id = "container",
Width = 350,
Height = 300,
OffsetX = 250,
OffsetY = 250,
Shape = new DiagramShapeStyle()
{
Type = "Container",
Header = new DiagramHeader()
{
Annotation = new DiagramNodeAnnotation()
{
Content = "Container Title",
Style = new DiagramTextStyle()
{
FontSize = 18,
Bold = true,
Color = "white",
}
},
Style = new DiagramTextStyle()
{
Fill = "#3c63ac",
StrokeColor = "30518f"
}
},
Children = ["node1", "node2"],
},
Style = new NodeStyleNodes()
{
Fill = "white",
StrokeColor = "#30518f",
StrokeDashArray = "4 4"
},
});
ViewData.nodes = nodes;
return View();
}
}
public class Node : DiagramNode
{
public string text;
}
}
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