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..17a5428c98 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-FnContent/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 { + private string CreateNodeContent(string nodeId) + { + return $"
"; + }; + + 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..58df414857 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 @@ -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() { @@ -17,11 +16,10 @@ 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(); - } - } -} \ No newline at end of file + }; + }; +}; \ No newline at end of file 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..9f0728e3df --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-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 $"
"; + }; + + 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..7692d60cac --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/HTML-TemplateFnNode/tagHelper @@ -0,0 +1,3 @@ + + \ 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..318de8d454 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 @@ -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() { @@ -17,12 +16,10 @@ 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; - - return View(); - } - } -} \ No newline at end of file + }; + }; +}; \ No newline at end of file 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..79268693e7 --- /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 $""; + }; + + 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..7692d60cac --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/Native-TemplateFnNode/tagHelper @@ -0,0 +1,3 @@ + + \ 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..b30fc385e2 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-FnContent/native.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 @" + + "; + }; + + 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..60a8bc90a0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-Template/SVG.cs @@ -0,0 +1,25 @@ +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 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..ccba199ee4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/shapes/native-Template/tagHelper @@ -0,0 +1,38 @@ + + + \ 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..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() { @@ -17,13 +16,12 @@ public ActionResult Nodes() { Height = 100, OffsetX = 100, OffsetY = 100, - Shape = new { - type = "Native", - content = " " }, - }); ViewBag.nodes = nodes; - - + Shape = new DiagramNative() { Type = Syncfusion.EJ2.Diagrams.Shapes.Native, Scale = Stretch.Stretch, + content = " " + } + }); + 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 new file mode 100644 index 0000000000..961e17a56c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/palette.cs @@ -0,0 +1,50 @@ +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 $""; + }; + }; + + 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..f2960b9ca4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/contentTemplate/tagHelper @@ -0,0 +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 new file mode 100644 index 0000000000..062f6637e8 --- /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 + { + 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..bac0a4b96d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/diagram/symbol-palette/nodeTemplate/tagHelper @@ -0,0 +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 92076c0ed3..9dd483a3c9 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`](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" %} {% 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`](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" %} {% 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`](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" %} {% 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`](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" %} + +{% 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..77fbc79990 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`](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 `