From 3b9b6ea1c940b20145a977e9778aa152ed3d86b6 Mon Sep 17 00:00:00 2001 From: DowlathMeeranS Date: Thu, 4 Sep 2025 10:32:00 +0530 Subject: [PATCH 1/2] 978765: HTML and SVG UG --- .../diagram/shapes/HTML-FnContent/HTML.cs | 34 ++++ .../diagram/shapes/HTML-FnContent/tagHelper | 2 + .../diagram/shapes/HTML-Template/HTML.cs | 3 +- .../diagram/shapes/HTML-Template/tagHelper | 7 +- .../shapes/HTML-TemplateFnNode/HTML.cs | 34 ++++ .../shapes/HTML-TemplateFnNode/tagHelper | 2 + .../code-snippet/diagram/shapes/HTML/HTML.cs | 2 +- .../shapes/Native-TemplateFnNode/HTML.cs | 32 ++++ .../shapes/Native-TemplateFnNode/tagHelper | 2 + .../diagram/shapes/native-FnContent/native.cs | 35 ++++ .../diagram/shapes/native-FnContent/tagHelper | 2 + .../SVG-Node-With-Template.cshtml | 3 + .../diagram/shapes/native-Template/SVG.cs | 26 +++ .../diagram/shapes/native-Template/tagHelper | 5 + .../diagram/shapes/native/native.cs | 6 +- .../symbol-palette/contentTemplate/palette.cs | 49 ++++++ .../symbol-palette/contentTemplate/tagHelper | 4 + .../symbol-palette/nodeTemplate/palette.cs | 40 +++++ .../symbol-palette/nodeTemplate/tagHelper | 19 +++ ej2-asp-core-mvc/diagram/shapes.md | 149 +++++++++++++++++- ej2-asp-core-mvc/diagram/symbol-palette.md | 54 +++++++ 21 files changed, 494 insertions(+), 16 deletions(-) create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-FnContent/HTML.cs create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-FnContent/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-TemplateFnNode/HTML.cs create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-TemplateFnNode/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/shapes/Native-TemplateFnNode/HTML.cs create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/shapes/Native-TemplateFnNode/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/shapes/native-FnContent/native.cs create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/shapes/native-FnContent/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/shapes/native-Template/SVG-Node-With-Template.cshtml create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/shapes/native-Template/SVG.cs create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/shapes/native-Template/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/palette.cs create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/palette.cs create mode 100644 ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-FnContent/HTML.cs b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-FnContent/HTML.cs new file mode 100644 index 0000000000..6da4fc5553 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-FnContent/HTML.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 { + private string CreateNodeContent(string nodeId) + { + return $"
"; + } + // GET: Nodes + public ActionResult Nodes() + { + List nodes = new List(); + nodes.Add(new DiagramNode() + { + Id = "node1", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Shape = new DiagramHtml() { Type = Syncfusion.EJ2.Diagrams.Shapes.HTML , content = CreateNodeContent("node1") }, + }); + ViewBag.nodes = nodes; + + + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-FnContent/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-FnContent/tagHelper new file mode 100644 index 0000000000..9b5f0930f3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-FnContent/tagHelper @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-Template/HTML.cs b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-Template/HTML.cs index 664fe0f0c9..b008024f3c 100644 --- a/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-Template/HTML.cs +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-Template/HTML.cs @@ -17,8 +17,7 @@ public ActionResult Nodes() { Height = 100, OffsetX = 100, OffsetY = 100, - nodeTemplate: "#nodetemplate", - Shape = new { type = "HTML"}, + Shape = new DiagramHtml() { Type = Syncfusion.EJ2.Diagrams.Shapes.HTML }, }); ViewBag.nodes = nodes; return View(); diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-Template/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-Template/tagHelper index 9b5f0930f3..199842ed7c 100644 --- a/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-Template/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-Template/tagHelper @@ -1,2 +1,5 @@ - - \ No newline at end of file + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-TemplateFnNode/HTML.cs b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-TemplateFnNode/HTML.cs new file mode 100644 index 0000000000..a024994bf8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-TemplateFnNode/HTML.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 { + public string CreateNodeContent(string nodeId) + { + return $"
"; + } + // GET: Nodes + public ActionResult Nodes() + { + List nodes = new List(); + nodes.Add(new DiagramNode() + { + Id = "node1", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Shape = new DiagramHtml() { Type = Syncfusion.EJ2.Diagrams.Shapes.HTML }, + }); + ViewBag.nodes = nodes; + + + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-TemplateFnNode/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-TemplateFnNode/tagHelper new file mode 100644 index 0000000000..f5344a2c65 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-TemplateFnNode/tagHelper @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML/HTML.cs b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML/HTML.cs index 7a720afb25..a1cc97823b 100644 --- a/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML/HTML.cs +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML/HTML.cs @@ -17,7 +17,7 @@ public ActionResult Nodes() { Height = 100, OffsetX = 100, OffsetY = 100, - Shape = new { type = "HTML", content= "
" }, + Shape = new DiagramHtml() { Type = Syncfusion.EJ2.Diagrams.Shapes.HTML , content= "
" }, }); ViewBag.nodes = nodes; diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/Native-TemplateFnNode/HTML.cs b/ej2-asp-core-mvc/code-snippet/diagram/shapes/Native-TemplateFnNode/HTML.cs new file mode 100644 index 0000000000..ae14143607 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/Native-TemplateFnNode/HTML.cs @@ -0,0 +1,32 @@ +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 { + public string CreateNodeContent(string nodeId) + { + return $""; + } + // GET: Nodes + public ActionResult Nodes() + { + List nodes = new List(); + nodes.Add(new DiagramNode() + { + Id = "node1", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Shape = new DiagramNative() { Type = Syncfusion.EJ2.Diagrams.Shapes.Native, Scale = Stretch.Stretch } + }); + ViewBag.nodes = nodes; + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/Native-TemplateFnNode/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/shapes/Native-TemplateFnNode/tagHelper new file mode 100644 index 0000000000..f5344a2c65 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/Native-TemplateFnNode/tagHelper @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-FnContent/native.cs b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-FnContent/native.cs new file mode 100644 index 0000000000..acb98ce3e3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-FnContent/native.cs @@ -0,0 +1,35 @@ +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 { + private string CreateNodeContent(string nodeId) + { + return @" + + "; + } + // GET: Nodes + public ActionResult Nodes() + { + List nodes = new List(); + nodes.Add(new DiagramNode() + { + Id = "node1", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Shape = new DiagramNative() { Type = Syncfusion.EJ2.Diagrams.Shapes.Native, Scale = Stretch.Stretch, content = CreateNodeContent("node1") }, + }); ViewBag.nodes = nodes; + + + return View(); + } + } + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-FnContent/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-FnContent/tagHelper new file mode 100644 index 0000000000..9b5f0930f3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-FnContent/tagHelper @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-Template/SVG-Node-With-Template.cshtml b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-Template/SVG-Node-With-Template.cshtml new file mode 100644 index 0000000000..62b7461c15 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-Template/SVG-Node-With-Template.cshtml @@ -0,0 +1,3 @@ +
+ @(Html.EJS().Diagram("diagram").Width("100%").Height("700px").NodeTemplate("#nodeTemplate").Nodes(ViewBag.nodes).Render()) +
diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-Template/SVG.cs b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-Template/SVG.cs new file mode 100644 index 0000000000..8dd0792254 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-Template/SVG.cs @@ -0,0 +1,26 @@ +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 nodes = new List(); + nodes.Add(new DiagramNode() { + Id = "node1", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Shape = new DiagramNative() { Type = Syncfusion.EJ2.Diagrams.Shapes.Native, Scale = Stretch.Stretch }, + }); + ViewBag.nodes = nodes; + return View(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-Template/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-Template/tagHelper new file mode 100644 index 0000000000..2f8158abc8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-Template/tagHelper @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/native/native.cs b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native/native.cs index 05d9f7d790..6213db8512 100644 --- a/ej2-asp-core-mvc/code-snippet/diagram/shapes/native/native.cs +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native/native.cs @@ -17,9 +17,9 @@ public ActionResult Nodes() { Height = 100, OffsetX = 100, OffsetY = 100, - Shape = new { - type = "Native", - content = " " }, + Shape = new DiagramNative() { Type = Syncfusion.EJ2.Diagrams.Shapes.Native, Scale = Stretch.Stretch, + content = " " + }, }); ViewBag.nodes = nodes; diff --git a/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/palette.cs b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/palette.cs new file mode 100644 index 0000000000..411c53937c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/palette.cs @@ -0,0 +1,49 @@ +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 + { + public string CreateNodeContent(string nodeId) + { + if (nodeId == "node1") + return $"
📞Call
Client Call @10AM
+1 234 567 8901
"; + else + { + return $""; + } + } + // GET: Nodes + public ActionResult Nodes() + { + List nodes = new List(); + nodes.Add(new DiagramNode() + { + Id = "node1", + Width = 100, + Height = 100, + Shape = new DiagramHtml() { Type = Syncfusion.EJ2.Diagrams.Shapes.HTML, content = CreateNodeContent("node1") }, + }); + nodes.Add(new DiagramNode() + { + Id = "node2", + Width = 100, + Height = 100, + Shape = new DiagramNative() { Type = Syncfusion.EJ2.Diagrams.Shapes.Native, Scale = Stretch.Stretch, content = CreateNodeContent("node2") }, + }); + ViewBag.nodes = nodes; + + List palettes = new List(); + palettes.Add(new SymbolPalettePalette() { Id = "palette", Expanded = true, Symbols = nodes, Title = "HTML and SVG Nodes" }); + ViewBag.palettes = palettes; + + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/tagHelper new file mode 100644 index 0000000000..70581bc872 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/tagHelper @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/palette.cs b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/palette.cs new file mode 100644 index 0000000000..e381de0a5b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/palette.cs @@ -0,0 +1,40 @@ +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 nodes = new List(); + nodes.Add(new DiagramNode() + { + Id = "node1", + Width = 100, + Height = 100, + Shape = new DiagramHtml() { Type = Syncfusion.EJ2.Diagrams.Shapes.HTML }, + }); + nodes.Add(new DiagramNode() + { + Id = "node2", + Width = 100, + Height = 100, + Shape = new DiagramNative() { Type = Syncfusion.EJ2.Diagrams.Shapes.Native, Scale = Stretch.Stretch }, + }); + ViewBag.nodes = nodes; + + List palettes = new List(); + palettes.Add(new SymbolPalettePalette() { Id = "palette", Expanded = true, Symbols = nodes, Title = "HTML and SVG Nodes" }); + ViewBag.palettes = palettes; + + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/tagHelper new file mode 100644 index 0000000000..0e97e2bc22 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/tagHelper @@ -0,0 +1,19 @@ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/diagram/shapes.md b/ej2-asp-core-mvc/diagram/shapes.md index 92076c0ed3..d5be531633 100644 --- a/ej2-asp-core-mvc/diagram/shapes.md +++ b/ej2-asp-core-mvc/diagram/shapes.md @@ -143,6 +143,12 @@ The scale property of the node allows to stretch the image as you desired (eithe Html elements can be embedded in the diagram through [`Html`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) type node. The shape property of node allows to set the type of node and to create a HTML node it should be set as `HTML`. +N> HTML node cannot be exported to image format, like JPEG, PNG, and BMP. It is by design, while exporting the diagram is drawn in a canvas. Further, this canvas is exported into image formats. Currently, drawing in a canvas equivalent from all possible HTML is not feasible. Hence, this limitation. + +### HTML Node with contentTemplate. + +To render an HTML node with a content template, we need to define the desired template string within the `content` property. The following code illustrates how to create an HTML node with a content template: + {% if page.publishingplatform == "aspnet-core" %} {% tabs %} @@ -163,22 +169,45 @@ Html elements can be embedded in the diagram through [`Html`](https://help.syncf {% endtabs %} {% endif %} +#### Functional content template. +To render an HTML node using a functional template, we define a function that returns the template string. Within this function, modifications can be made based on the node's ID. -N> HTML node cannot be exported to image format, like JPEG, PNG, and BMP. It is by design, while exporting the diagram is drawn in a canvas. Further, this canvas is exported into image formats. Currently, drawing in a canvas equivalent from all possible HTML is not feasible. Hence, this limitation. +The following code illustrates how to render an HTML node using the function and manipulate its content dynamically. + +{% if page.publishingplatform == "aspnet-core" %} -## HTML Node With Template +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/diagram/shapes/HTML-FnContent/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="HTML.cs" %} +{% include code-snippet/diagram/shapes/HTML-FnContent/HTML.cs %} +{% endhighlight %} +{% endtabs %} -Html elements can be embedded in the diagram using [`Html`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) type node. The shape property of the node allows to set the type of node. +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight c# tabtitle="HTML.cs" %} +{% include code-snippet/diagram/shapes/HTML-FnContent/HTML.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + +### HTML Node With nodeTemplate + +To render html node with nodeTemplate we need to define the nodeTemplate in the html file and assign it to the `nodeTemplate` property of the diagram. The following code illustrates how to render html node with nodeTemplate. {% if page.publishingplatform == "aspnet-core" %} {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/diagram/shapes/html-template/tagHelper %} +{% include code-snippet/diagram/shapes/HTML-Template/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HTML_Node_With_Template.cshtml" %} -{% include code-snippet/diagram/shapes/html-template/HTML-Node-With-Template.cshtml %} +{% highlight c# tabtitle="HTML.cs" %} +{% include code-snippet/diagram/shapes/HTML-Template/HTML.cs %} {% endhighlight %} {% endtabs %} @@ -186,17 +215,47 @@ Html elements can be embedded in the diagram using [`Html`](https://help.syncfus {% tabs %} {% highlight c# tabtitle="HTML_Node_With_Template.cshtml" %} -{% include code-snippet/diagram/shapes/html-template/HTML-Node-With-Template.cshtml %} +{% include code-snippet/diagram/shapes/HTML-Template/HTML.cs %} {% endhighlight %} {% endtabs %} {% endif %} +#### Functional nodeTemplate + +We can define a function which returns a template string and assign it directly to the `nodeTemplate` property of diagram. +Refer the code example below. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/diagram/shapes/HTML-TemplateFnNode/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="HTML_Node_With_Template.cshtml" %} +{% include code-snippet/diagram/shapes/HTML-TemplateFnNode/HTML-Node-With-Template.cshtml %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight c# tabtitle="HTML_Node_With_Template.cshtml" %} +{% include code-snippet/diagram/shapes/HTML-TemplateFnNode/HTML-Node-With-Template.cshtml %} +{% endhighlight %} +{% endtabs %} +{% endif %} ## Native Diagram provides support to embed SVG element into a node. The shape property of node allows to set the type of node. To create a [`native`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html#Syncfusion_EJ2_Diagrams_Shapes_Native) node, it should be set as **native**. +N> Like HTML node, the native node also cannot be exported to image format. Fill color of native node can be overridden by the inline style or fill of the SVG element specified in the template. + +### Native Node with contentTemplate + +To render an SVG node using a content template, define the desired template string in the node's `content` property. The following example demonstrates how to create an SVG node using a content template: + {% if page.publishingplatform == "aspnet-core" %} {% tabs %} @@ -217,9 +276,83 @@ Diagram provides support to embed SVG element into a node. The shape property of {% endtabs %} {% endif %} +#### Functional Native content templates +Dynamic SVG content generation is supported through function-based templates that return SVG markup based on runtime conditions. This approach enables responsive graphics that adapt to node properties or the application's state. + +The following example demonstrates how to render an SVG node using a function and dynamically manipulate its content. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/diagram/shapes/native-FnContent/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Native.cs" %} +{% include code-snippet/diagram/shapes/native-FnContent/native.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight c# tabtitle="Native.cs" %} +{% include code-snippet/diagram/shapes/native-FnContent/native.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + +### Native nodes with nodeTemplate + +The `nodeTemplate` property allows defining reusable SVG templates at the diagram level. This approach is efficient when multiple nodes share similar vector graphics or when centralized template management is required. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/diagram/shapes/native-Template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Native.cs" %} +{% include code-snippet/diagram/shapes/native-Template/SVG.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight c# tabtitle="Native.cs" %} +{% include code-snippet/diagram/shapes/native-Template/SVG.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +#### Functional Native nodeTemplate + +A functional `nodeTemplate` implementation provides maximum flexibility for generating SVG templates programmatically and creating dynamic content. + +The following example demonstrates this approach: + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/diagram/shapes/Native-TemplateFnNode/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Native.cs" %} +{% include code-snippet/diagram/shapes/Native-TemplateFnNode/HTML.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight c# tabtitle="Native.cs" %} +{% include code-snippet/diagram/shapes/Native-TemplateFnNode/HTML.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} -N> Like HTML node, the native node also cannot be exported to image format. Fill color of native node can be overridden by the inline style or fill of the SVG element specified in the template. ## SVG content alignment diff --git a/ej2-asp-core-mvc/diagram/symbol-palette.md b/ej2-asp-core-mvc/diagram/symbol-palette.md index b5ddc39898..f676548140 100644 --- a/ej2-asp-core-mvc/diagram/symbol-palette.md +++ b/ej2-asp-core-mvc/diagram/symbol-palette.md @@ -65,6 +65,60 @@ To initialize a palette, define a JSON object with the property [`ID`](https://h {% endtabs %} {% endif %} +## Template-based symbols + +### HTML and SVG nodes with content templates + +The Symbol Palette supports the creation of complex nodes using HTML or SVG templates. This allows developers to incorporate rich, interactive, and visually engaging content within diagram elements. + +* For HTML content, set the node's `shape.type` property to **HTML**. +* For SVG content, set the `shape.type` property to **Native**. + +Templates can be defined either as strings or functions and assigned to the node's content property. Function-based templates offer the flexibility to generate dynamic content based on node-specific properties or external data sources. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/diagram/symbol-palette/contentTemplate/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="palette.cs" %} +{% include code-snippet/diagram/symbol-palette/contentTemplate/palette.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight c# tabtitle="palette.cs" %} +{% include code-snippet/diagram/symbol-palette/contentTemplate/palette.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +### HTML and SVG nodes with nodeTemplate + +The Symbol Palette `nodeTemplate` property allows you to define reusable HTML or SVG structures that can be applied to multiple symbols. This approach is efficient when several palette symbols share a similar visual structure but contain different data. + +Templates should be created within ` \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/shapes/native/native.cs b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native/native.cs index 6213db8512..ce12b3d424 100644 --- a/ej2-asp-core-mvc/code-snippet/diagram/shapes/native/native.cs +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native/native.cs @@ -8,7 +8,6 @@ namespace EJ2MVCSampleBrowser.Controllers.Diagram { public partial class DiagramController: Controller { - // GET: Nodes public ActionResult Nodes() { List < DiagramNode > nodes = new List < DiagramNode > (); nodes.Add(new DiagramNode() { @@ -19,11 +18,10 @@ public ActionResult Nodes() { OffsetY = 100, Shape = new DiagramNative() { Type = Syncfusion.EJ2.Diagrams.Shapes.Native, Scale = Stretch.Stretch, content = " " - }, - }); ViewBag.nodes = nodes; - - + } + }); + ViewBag.nodes = nodes; return View(); - } - } - } \ No newline at end of file + }; + }; + }; \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/palette.cs b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/palette.cs index 411c53937c..961e17a56c 100644 --- a/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/palette.cs +++ b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/palette.cs @@ -16,34 +16,35 @@ public string CreateNodeContent(string nodeId) return $"
📞Call
Client Call @10AM
+1 234 567 8901
"; else { - return $""; - } - } - // GET: Nodes + return $""; + }; + }; + public ActionResult Nodes() { List nodes = new List(); + nodes.Add(new DiagramNode() { Id = "node1", Width = 100, Height = 100, - Shape = new DiagramHtml() { Type = Syncfusion.EJ2.Diagrams.Shapes.HTML, content = CreateNodeContent("node1") }, + Shape = new DiagramHtml() { Type = Syncfusion.EJ2.Diagrams.Shapes.HTML, content = CreateNodeContent("node1") } }); + nodes.Add(new DiagramNode() { Id = "node2", Width = 100, Height = 100, - Shape = new DiagramNative() { Type = Syncfusion.EJ2.Diagrams.Shapes.Native, Scale = Stretch.Stretch, content = CreateNodeContent("node2") }, + Shape = new DiagramNative() { Type = Syncfusion.EJ2.Diagrams.Shapes.Native, Scale = Stretch.Stretch, content = CreateNodeContent("node2") } }); - ViewBag.nodes = nodes; + ViewBag.nodes = nodes; List palettes = new List(); palettes.Add(new SymbolPalettePalette() { Id = "palette", Expanded = true, Symbols = nodes, Title = "HTML and SVG Nodes" }); ViewBag.palettes = palettes; - return View(); - } - } -} \ No newline at end of file + }; + }; +}; \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/tagHelper index 70581bc872..f2960b9ca4 100644 --- a/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/tagHelper @@ -1,4 +1,5 @@ - + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/palette.cs b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/palette.cs index e381de0a5b..062f6637e8 100644 --- a/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/palette.cs +++ b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/palette.cs @@ -10,31 +10,31 @@ namespace EJ2MVCSampleBrowser.Controllers.Diagram { public partial class DiagramController : Controller { - // GET: Nodes public ActionResult Nodes() { List nodes = new List(); + nodes.Add(new DiagramNode() { Id = "node1", Width = 100, Height = 100, - Shape = new DiagramHtml() { Type = Syncfusion.EJ2.Diagrams.Shapes.HTML }, + Shape = new DiagramHtml() { Type = Syncfusion.EJ2.Diagrams.Shapes.HTML } }); + nodes.Add(new DiagramNode() { Id = "node2", Width = 100, Height = 100, - Shape = new DiagramNative() { Type = Syncfusion.EJ2.Diagrams.Shapes.Native, Scale = Stretch.Stretch }, + Shape = new DiagramNative() { Type = Syncfusion.EJ2.Diagrams.Shapes.Native, Scale = Stretch.Stretch } }); - ViewBag.nodes = nodes; + ViewBag.nodes = nodes; List palettes = new List(); palettes.Add(new SymbolPalettePalette() { Id = "palette", Expanded = true, Symbols = nodes, Title = "HTML and SVG Nodes" }); ViewBag.palettes = palettes; - return View(); - } - } -} \ No newline at end of file + }; + }; +}; \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/tagHelper index 0e97e2bc22..bac0a4b96d 100644 --- a/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/tagHelper @@ -1,19 +1,18 @@ - - + \ No newline at end of file diff --git a/ej2-asp-core-mvc/diagram/shapes.md b/ej2-asp-core-mvc/diagram/shapes.md index d5be531633..9dd483a3c9 100644 --- a/ej2-asp-core-mvc/diagram/shapes.md +++ b/ej2-asp-core-mvc/diagram/shapes.md @@ -147,7 +147,7 @@ N> HTML node cannot be exported to image format, like JPEG, PNG, and BMP. It is ### HTML Node with contentTemplate. -To render an HTML node with a content template, we need to define the desired template string within the `content` property. The following code illustrates how to create an HTML node with a content template: +To render an HTML node with a content template, we need to define the desired template string within the [`content`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramHtml.html#Syncfusion_EJ2_Diagrams_DiagramHtml_Content) property. The following code illustrates how to create an HTML node with a content template: {% if page.publishingplatform == "aspnet-core" %} @@ -198,7 +198,7 @@ The following code illustrates how to render an HTML node using the function and ### HTML Node With nodeTemplate -To render html node with nodeTemplate we need to define the nodeTemplate in the html file and assign it to the `nodeTemplate` property of the diagram. The following code illustrates how to render html node with nodeTemplate. +To render html node with nodeTemplate we need to define the nodeTemplate in the html file and assign it to the [`nodeTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Diagram.html#Syncfusion_EJ2_Diagrams_Diagram_NodeTemplate) property of the diagram. The following code illustrates how to render html node with nodeTemplate. {% if page.publishingplatform == "aspnet-core" %} @@ -254,7 +254,7 @@ N> Like HTML node, the native node also cannot be exported to image format. Fill ### Native Node with contentTemplate -To render an SVG node using a content template, define the desired template string in the node's `content` property. The following example demonstrates how to create an SVG node using a content template: +To render an SVG node using a content template, define the desired template string in the node's [`content`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramNative.html#Syncfusion_EJ2_Diagrams_DiagramNative_Content) property. The following example demonstrates how to create an SVG node using a content template: {% if page.publishingplatform == "aspnet-core" %} @@ -305,7 +305,7 @@ The following example demonstrates how to render an SVG node using a function an ### Native nodes with nodeTemplate -The `nodeTemplate` property allows defining reusable SVG templates at the diagram level. This approach is efficient when multiple nodes share similar vector graphics or when centralized template management is required. +The [`nodeTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Diagram.html#Syncfusion_EJ2_Diagrams_Diagram_NodeTemplate) property allows defining reusable SVG templates at the diagram level. This approach is efficient when multiple nodes share similar vector graphics or when centralized template management is required. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/diagram/symbol-palette.md b/ej2-asp-core-mvc/diagram/symbol-palette.md index f676548140..77fbc79990 100644 --- a/ej2-asp-core-mvc/diagram/symbol-palette.md +++ b/ej2-asp-core-mvc/diagram/symbol-palette.md @@ -74,7 +74,7 @@ The Symbol Palette supports the creation of complex nodes using HTML or SVG temp * For HTML content, set the node's `shape.type` property to **HTML**. * For SVG content, set the `shape.type` property to **Native**. -Templates can be defined either as strings or functions and assigned to the node's content property. Function-based templates offer the flexibility to generate dynamic content based on node-specific properties or external data sources. +Templates can be defined either as strings or functions and assigned to the node's `content` property. Function-based templates offer the flexibility to generate dynamic content based on node-specific properties or external data sources. {% if page.publishingplatform == "aspnet-core" %} @@ -98,9 +98,9 @@ Templates can be defined either as strings or functions and assigned to the node ### HTML and SVG nodes with nodeTemplate -The Symbol Palette `nodeTemplate` property allows you to define reusable HTML or SVG structures that can be applied to multiple symbols. This approach is efficient when several palette symbols share a similar visual structure but contain different data. +The Symbol Palette [`nodeTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPalette.html#Syncfusion_EJ2_Diagrams_SymbolPalette_NodeTemplate) property allows you to define reusable HTML or SVG structures that can be applied to multiple symbols. This approach is efficient when several palette symbols share a similar visual structure but contain different data. -Templates should be created within `