Skip to content

Commit 945ea20

Browse files
KPriya11KPriya11
committed
882373: add elements
1 parent df55fba commit 945ea20

File tree

9 files changed

+175
-0
lines changed

9 files changed

+175
-0
lines changed

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Web;
5+
using System.Web.Mvc;
6+
using Syncfusion.EJ2.Diagrams;
7+
using System.Drawing;
8+
9+
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
10+
public partial class DiagramController: Controller {
11+
// GET: Nodes
12+
public ActionResult Nodes() {
13+
List<DiagramConnector> Connectors = new List<DiagramConnector>([
14+
{ id: 'connector1', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 150, y: 150 } },
15+
{id: 'connector2', type: 'Orthogonal', sourcePoint: { x: 170, y: 170 }, targetPoint: { x: 200, y: 200 }},
16+
{ id: 'connector3', type: 'Bezier', sourcePoint: { x: 320, y: 320 }, targetPoint: { x: 400, y: 400 } }
17+
];);
18+
Connectors.addElemets(new DiagramConnector());
19+
ViewBag.connectors = Connectors;
20+
return View();
21+
}
22+
}
23+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors">
2+
</ejs-diagram>

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Web;
5+
using System.Web.Mvc;
6+
using Syncfusion.EJ2.Diagrams;
7+
using System.Drawing;
8+
9+
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
10+
public partial class DiagramController: Controller {
11+
// GET: Nodes
12+
public ActionResult Nodes() {
13+
List < DiagramNode > nodes = new List < DiagramNode > ();
14+
Node1.Add(new DiagramNodeAnnotation() {
15+
Content = "node1", Style = new DiagramTextStyle() {
16+
Color = "White", StrokeColor = "None"
17+
}
18+
});
19+
nodes.addElements(new Node() [{ id: "rectangle1", offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'node1' }] },
20+
{ id: "rectangle2", offsetX: 200, offsetY: 200, width: 100, height: 100, annotations: [{ content: 'node2' }] },
21+
{ id: 'group', children: ['rectangle1', 'rectangle2'] },
22+
{ id: "rectangle3", offsetX: 400, offsetY: 400, width: 100, height: 100, annotations: [{ content: 'node1' }] },
23+
{ id: "rectangle4", offsetX: 500, offsetY: 500, width: 100, height: 100, annotations: [{ content: 'node2' }] },
24+
{ id: 'group', children: ['rectangle3', 'rectangle4'], padding: { left: 10, right: 10, top: 10, bottom: 10 } }
25+
]);
26+
ViewBag.nodes = nodes;
27+
return View();
28+
}
29+
}
30+
public class Node: DiagramNode {
31+
public string text;
32+
}
33+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<ejs-diagram id="container" width="100%" height="700px" nodes="ViewBag.nodes">
2+
3+
</ejs-diagram>

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Web;
5+
using System.Web.Mvc;
6+
using Syncfusion.EJ2.Diagrams;
7+
using System.Drawing;
8+
9+
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
10+
public partial class DiagramController: Controller {
11+
// GET: Nodes
12+
public ActionResult Nodes() {
13+
List < DiagramNode > nodes = new List < DiagramNode > ();
14+
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
15+
Node1.Add(new DiagramNodeAnnotation() {
16+
Content = "node1", Style = new DiagramTextStyle() {
17+
Color = "White", StrokeColor = "None"
18+
}
19+
});
20+
nodes.Add(new Node() [
21+
{ id: 'node16', offsetX: 35, offsetY: 260 },
22+
{ id: 'node17', offsetX: 140, offsetY: 260 },
23+
{ id: 'node18', offsetX: 240, offsetY: 260 }
24+
]);
25+
ViewBag.nodes = nodes;
26+
27+
28+
return View();
29+
}
30+
}
31+
public class Node: DiagramNode {
32+
public string text;
33+
}
34+
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<ejs-diagram id="container" width="100%" height="700px">
2+
<e-diagram-nodes>
3+
<e-diagram-node id='node1' offsetX="100" offsetY="100" width="100" height="100" borderWidth="2">
4+
<e-node-style fill="darkcyan">
5+
</e-node-style>
6+
</e-diagram-node>
7+
</e-diagram-nodes>
8+
</ejs-diagram>

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,28 @@ diagram.remove(connectors)
100100

101101
```
102102

103+
## Add collection of connectors at runtime
104+
105+
* 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.
106+
107+
{% tabs %}
108+
{% highlight cshtml tabtitle="CSHTML" %}
109+
{% include code-snippet/diagram/connectors/connectorCollection/tagHelper %}
110+
{% endhighlight %}
111+
{% highlight c# tabtitle="ConnectorCollection.cs" %}
112+
{% include code-snippet/diagram/connectors/connectorCollection/connectorCollection.cs %}
113+
{% endhighlight %}
114+
{% endtabs %}
115+
116+
{% elsif page.publishingplatform == "aspnet-mvc" %}
117+
118+
{% tabs %}
119+
{% highlight c# tabtitle="ConnectorCollection.cs" %}
120+
{% include code-snippet/diagram/connectors/connectorCollection/connectorCollection.cs %}
121+
{% endhighlight %}
122+
{% endtabs %}
123+
{% endif %}
124+
103125
## Connectors from palette
104126

105127
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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,32 @@ var group= {
123123
diagram.add(group);
124124
```
125125

126+
127+
## Add collection of group nodes at runtime
128+
129+
* 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.
130+
131+
{% if page.publishingplatform == "aspnet-core" %}
132+
133+
{% tabs %}
134+
{% highlight cshtml tabtitle="CSHTML" %}
135+
{% include code-snippet/diagram/group/groupCollection/tagHelper %}
136+
{% endhighlight %}
137+
{% highlight c# tabtitle="GroupCollection.cs" %}
138+
{% include code-snippet/diagram/group/groupCollection/groupCollection.cs %}
139+
{% endhighlight %}
140+
{% endtabs %}
141+
142+
{% elsif page.publishingplatform == "aspnet-mvc" %}
143+
144+
{% tabs %}
145+
{% highlight c# tabtitle="GroupCollection.cs" %}
146+
{% include code-snippet/diagram/group/groupCollection/groupCollection.cs %}
147+
{% endhighlight %}
148+
{% endtabs %}
149+
{% endif %}
150+
151+
126152
## Container
127153

128154
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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,30 @@ var node = {
8080
diagram.add(node);
8181
```
8282

83+
## Add collection of nodes at runtime
84+
85+
* 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.
86+
87+
{% if page.publishingplatform == "aspnet-core" %}
88+
89+
{% tabs %}
90+
{% highlight cshtml tabtitle="CSHTML" %}
91+
{% include code-snippet/diagram/node/nodescollection/tagHelper %}
92+
{% endhighlight %}
93+
{% highlight c# tabtitle="Nodescollection.cs" %}
94+
{% include code-snippet/diagram/node/nodescollection/nodescollection.cs %}
95+
{% endhighlight %}
96+
{% endtabs %}
97+
98+
{% elsif page.publishingplatform == "aspnet-mvc" %}
99+
100+
{% tabs %}
101+
{% highlight c# tabtitle="Nodescollection.cs" %}
102+
{% include code-snippet/diagram/node/nodescollection/nodescollection.cs %}
103+
{% endhighlight %}
104+
{% endtabs %}
105+
{% endif %}
106+
83107
## Add node from palette
84108

85109
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).

0 commit comments

Comments
 (0)