Provide support to add diagram nodes or connectors collection dynamically through API method

ej2-asp-core-mvc/code-snippet/diagram/connectors/connectorCollection/connectorCollection.cs

@@ -0,0 +1,23 @@
+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<DiagramConnector> Connectors = new List<DiagramConnector>([
+        { id: 'connector1', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 150, y: 150 } },
+        {id: 'connector2', type: 'Orthogonal', sourcePoint: { x: 170, y: 170 }, targetPoint: { x: 200, y: 200 }},
+        { id: 'connector3', type: 'Bezier', sourcePoint: { x: 320, y: 320 }, targetPoint: { x: 400, y: 400 } }
+         ];);
+         Connectors.addElemets(new DiagramConnector());
+         ViewBag.connectors = Connectors;
+        return View();
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/diagram/connectors/connectorCollection/tagHelper

@@ -0,0 +1,2 @@
+<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors">
+</ejs-diagram>

ej2-asp-core-mvc/code-snippet/diagram/group/groupCollection/groupCollection.cs

@@ -0,0 +1,33 @@
+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 > ();
+             Node1.Add(new DiagramNodeAnnotation() {
+                Content = "node1", Style = new DiagramTextStyle() {
+                    Color = "White", StrokeColor = "None"
+                }
+            });
+             nodes.addElements(new Node() [{ id: "rectangle1", offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'node1' }] },
+                { id: "rectangle2", offsetX: 200, offsetY: 200, width: 100, height: 100, annotations: [{ content: 'node2' }] },
+                { id: 'group', children: ['rectangle1', 'rectangle2'] },
+                { id: "rectangle3", offsetX: 400, offsetY: 400, width: 100, height: 100, annotations: [{ content: 'node1' }] },
+                { id: "rectangle4", offsetX: 500, offsetY: 500, width: 100, height: 100, annotations: [{ content: 'node2' }] },
+                { id: 'group', children: ['rectangle3', 'rectangle4'], padding: { left: 10, right: 10, top: 10, bottom: 10 } }
+                ]);
+               ViewBag.nodes = nodes;  
+            return View();
+        }
+    }
+    public class Node: DiagramNode {
+        public string text;
+    }
+}

ej2-asp-core-mvc/code-snippet/diagram/group/groupCollection/tagHelper

@@ -0,0 +1,3 @@
+<ejs-diagram id="container" width="100%" height="700px"  nodes="ViewBag.nodes">
+
+</ejs-diagram>

ej2-asp-core-mvc/code-snippet/diagram/node/nodescollection/nodescollection.cs

@@ -0,0 +1,34 @@
+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: 'node16', offsetX: 35, offsetY: 260 },
+             { id: 'node17', offsetX: 140, offsetY: 260 },
+             { id: 'node18', offsetX: 240, offsetY: 260 }
+             ]);
+             ViewBag.nodes = nodes;
+
+
+            return View();
+        }
+    }
+    public class Node: DiagramNode {
+        public string text;
+    }
+}

ej2-asp-core-mvc/code-snippet/diagram/node/nodescollection/tagHelper

@@ -0,0 +1,8 @@
+<ejs-diagram id="container" width="100%" height="700px">
+    <e-diagram-nodes>
+        <e-diagram-node id='node1' offsetX="100" offsetY="100" width="100" height="100" borderWidth="2">
+            <e-node-style fill="darkcyan">
+            </e-node-style>
+        </e-diagram-node>
+    </e-diagram-nodes>
+</ejs-diagram>

ej2-asp-core-mvc/diagram/connectors.md

@@ -100,6 +100,28 @@ diagram.remove(connectors)
 
 ```
 
+## Add collection of connectors at runtime
+
+* The collection of connectors can be dynamically added using 'addElements' method.Each time an element is added to the diagram canvas, the 'collectionChange' event will be triggered.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/diagram/connectors/connectorCollection/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="ConnectorCollection.cs" %}
+{% include code-snippet/diagram/connectors/connectorCollection/connectorCollection.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight c# tabtitle="ConnectorCollection.cs" %}
+{% include code-snippet/diagram/connectors/connectorCollection/connectorCollection.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
 ## Connectors from palette
 
 Connectors can be predefined and added to the symbol palette. You can drop those connectors into the diagram, when required.

ej2-asp-core-mvc/diagram/group.md

@@ -123,6 +123,32 @@ var group= {
 diagram.add(group);
 ```
 
+
+## Add collection of group nodes at runtime
+
+* The collection of group nodes can be dynamically added using 'addElements' method.Each time an element is added to the diagram canvas, the 'collectionChange' event will be triggered.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/diagram/group/groupCollection/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="GroupCollection.cs" %}
+{% include code-snippet/diagram/group/groupCollection/groupCollection.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight c# tabtitle="GroupCollection.cs" %}
+{% include code-snippet/diagram/group/groupCollection/groupCollection.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+
 ## 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.

ej2-asp-core-mvc/diagram/nodes.md

@@ -80,6 +80,30 @@ var node = {
 diagram.add(node);
 ```
 
+## Add collection of nodes at runtime
+
+* The collection of nodes can be dynamically added using 'addElements' method.Each time an element is added to the diagram canvas, the 'collectionChange' event will be triggered.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/diagram/node/nodescollection/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Nodescollection.cs" %}
+{% include code-snippet/diagram/node/nodescollection/nodescollection.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight c# tabtitle="Nodescollection.cs" %}
+{% include code-snippet/diagram/node/nodescollection/nodescollection.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
 ## Add node from palette
 
 Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information about adding nodes from symbol palette, refer to [`Symbol Palette`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPalette.html).