Merge pull request #4530 from syncfusion-content/EJ2-978765-HTMLHF

prakashperumal1892 · web-flow · commit 46bfcb2c45bf · 2025-09-12T23:39:08.000+05:30
978765: updated
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
@@ -11,7 +11,7 @@ public partial class DiagramController: Controller {
         private string CreateNodeContent(string nodeId)
         {
             return $"<div style='background:#6BA5D7;height:100%;width:100%;'><button type='button' style='width:100px'>Button</button></div>";
-        };
+        }
 
         public ActionResult Nodes()
         {
@@ -27,6 +27,6 @@ public ActionResult Nodes()
             });
             ViewBag.nodes = nodes;
             return View();
-        };
+        }
     };
 };
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
@@ -20,6 +20,6 @@ public ActionResult Nodes() {
             });
             ViewBag.nodes = nodes;
             return View();
-        };
+        }
     };
 };
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
@@ -11,7 +11,7 @@ public partial class DiagramController: Controller {
         public string CreateNodeContent(string nodeId)
         {
             return $"<div style='background:#6BA5D7;height:100%;width:100%;'><button type='button' style='width:100px'> Button</button></div>";
-        };
+        }
 
         public ActionResult Nodes()
         {
@@ -27,6 +27,6 @@ public ActionResult Nodes()
             });
             ViewBag.nodes = nodes;
             return View();
-        };
+        }
     };
 };
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
@@ -11,7 +11,7 @@ public partial class DiagramController: Controller {
         public string CreateNodeContent(string nodeId)
         {
             return $"<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='#2196F3' height='200px' width='200px' viewBox='0 0 365.892 365.892' xml:space='preserve'><g><circle cx='182.945' cy='286.681' r='41.494'/><path d='M182.946,176.029c-35.658,0-69.337,17.345-90.09,46.398c-5.921,8.288-4.001,19.806,4.286,25.726   c3.249,2.321,6.994,3.438,10.704,3.438c5.754,0,11.423-2.686,15.021-7.724c13.846-19.383,36.305-30.954,60.078-30.954   c23.775,0,46.233,11.571,60.077,30.953c5.919,8.286,17.437,10.209,25.726,4.288c8.288-5.92,10.208-17.438,4.288-25.726   C252.285,193.373,218.606,176.029,182.946,176.029z'/><path d='M182.946,106.873c-50.938,0-99.694,21.749-133.77,59.67c-6.807,7.576-6.185,19.236,1.392,26.044   c3.523,3.166,7.929,4.725,12.32,4.725c5.051-0.001,10.082-2.063,13.723-6.116c27.091-30.148,65.849-47.439,106.336-47.439   s79.246,17.291,106.338,47.438c6.808,7.576,18.468,8.198,26.043,1.391c7.576-6.808,8.198-18.468,1.391-26.043   C282.641,128.621,233.883,106.873,182.946,106.873z'/><path d='M360.611,112.293c-47.209-48.092-110.305-74.577-177.665-74.577c-67.357,0-130.453,26.485-177.664,74.579   c-7.135,7.269-7.027,18.944,0.241,26.079c3.59,3.524,8.255,5.282,12.918,5.281c4.776,0,9.551-1.845,13.161-5.522   c40.22-40.971,93.968-63.534,151.344-63.534c57.379,0,111.127,22.563,151.343,63.532c7.136,7.269,18.812,7.376,26.08,0.242   C367.637,131.238,367.745,119.562,360.611,112.293z'/></g></svg>";
-        };
+        }
         
         public ActionResult Nodes()
         {
@@ -27,6 +27,6 @@ public ActionResult Nodes()
             });
             ViewBag.nodes = nodes;
             return View();
-        };
+        }
     };
 };
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
@@ -13,7 +13,7 @@ private string CreateNodeContent(string nodeId)
                 return @"<svg width='200' height='200'>
         <path d='M 13.69 3.77 C 13.69 3.77 12.22 0.03 16.83 0 C 16.83 0 19.9 0.13 19 4.32 C 18.99 4.36 18.98 4.41 18.97 4.45 C 17.98 8.77 15.87 12.87 15.04 15.03 H 19.85 C 19.85 15.03 21.06 19.61 16.71 20 H 2.42 C 2.42 20 -1.39 18.58 0.55 14.68 L 4.24 3.84 H 0.63 C 0.63 3.84 -0.76 0.94 2.74 0.03 L 16.79 0 L 15.9 0.36 L 14.43 2.08 L 13.69 3.77 Z M 13.64 1.33 C 13.64 1.33 13.34 1.81 13.3 2.31 H 2.1 C 2.1 2.31 2.03 1.44 2.98 1.27 L 13.64 1.33 Z M 18.48 16.47 C 18.48 16.47 18.32 19.15 15.74 18.34 C 15.74 18.34 14.72 17.77 14.8 16.48 L 18.48 16.47 Z M 14.25 3.74 C 14.25 3.74 15.05 3.48 15.12 2.24 C 15.12 2.24 15.3 1.1 16.95 1.55 C 16.95 1.55 17.94 1.9 17.26 3.95 C 17.26 3.95 14.52 12.45 13.53 14.29 C 13.53 14.29 12.22 16.94 13.65 18.52 H 3.09 C 3.09 18.52 0.87 18.07 2.18 14.9 C 2.18 14.9 5.79 5.36 6.11 3.74 L 14.25 3.74 Z' visibility='visible' opacity='1' fill='skyblue' stroke='black' stroke-width='1' stroke-dasharray='none'/>
         </svg>";
-        };
+        }
 
         public ActionResult Nodes()
         {
@@ -29,6 +29,6 @@ public ActionResult Nodes()
             });
             ViewBag.nodes = nodes;
             return View();
-        };
+        }
     };
 };
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
@@ -20,6 +20,6 @@ public ActionResult Nodes() {
             });
             ViewBag.nodes = nodes;
             return View();
-        };
+        }
     };
 };
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
@@ -22,6 +22,6 @@ public ActionResult Nodes() {
                         }); 
                     ViewBag.nodes = nodes;
                     return View();
-                };
+                }
             };
         };
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
@@ -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 $"<div style='height:100%; background:#f1e3da;font-family:Arial;padding-top:5px;'><div style='font-size:12px;font-weight:bold;margin-left:3px;padding-top:5px;'>📞Call</div><div style='font-size:10px;margin-left:5px;'>Client Call @10AM</div><div style='font-size:8px; color:#666;margin-left:5px;'>+1 234 567 8901</div></div>";
+            else
+            {
+                return $"<svg width='200' height='200'><path d='M 13.69 3.77 C 13.69 3.77 12.22 0.03 16.83 0 C 16.83 0 19.9 0.13 19 4.32 C 18.99 4.36 18.98 4.41 18.97 4.45 C 17.98 8.77 15.87 12.87 15.04 15.03 H 19.85 C 19.85 15.03 21.06 19.61 16.71 20 H 2.42 C 2.42 20 -1.39 18.58 0.55 14.68 L 4.24 3.84 H 0.63 C 0.63 3.84 -0.76 0.94 2.74 0.03 L 16.79 0 L 15.9 0.36 L 14.43 2.08 L 13.69 3.77 Z M 13.64 1.33 C 13.64 1.33 13.34 1.81 13.3 2.31 H 2.1 C 2.1 2.31 2.03 1.44 2.98 1.27 L 13.64 1.33 Z M 18.48 16.47 C 18.48 16.47 18.32 19.15 15.74 18.34 C 15.74 18.34 14.72 17.77 14.8 16.48 L 18.48 16.47 Z M 14.25 3.74 C 14.25 3.74 15.05 3.48 15.12 2.24 C 15.12 2.24 15.3 1.1 16.95 1.55 C 16.95 1.55 17.94 1.9 17.26 3.95 C 17.26 3.95 14.52 12.45 13.53 14.29 C 13.53 14.29 12.22 16.94 13.65 18.52 H 3.09 C 3.09 18.52 0.87 18.07 2.18 14.9 C 2.18 14.9 5.79 5.36 6.11 3.74 L 14.25 3.74 Z' visibility='visible' opacity='1' fill='skyblue' stroke='black' stroke-width='1' stroke-dasharray='none'/></svg>";
+            };
+        }
+        
+        public ActionResult Nodes()
+        {
+            List<DiagramNode> nodes = new List<DiagramNode>();
+
+            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<SymbolPalettePalette> palettes = new List<SymbolPalettePalette>();
+            palettes.Add(new SymbolPalettePalette() { Id = "palette", Expanded = true, Symbols = nodes, Title = "HTML and SVG Nodes" });
+            ViewBag.palettes = palettes;
+            return View();
+        }
+    };
+};
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
@@ -0,0 +1,5 @@
+<ejs-symbolpalette id="symbolpalette" enableAnimation="true" palettes="@ViewBag.palettes"
+    symbolMargin="new SymbolPaletteMargin() { Left=15,Right=15,Top=15,Bottom=15}">
+</ejs-symbolpalette>
+<ejs-diagram id="container" width="100%" height="700px">
+</ejs-diagram>
diff --git a/ej2-asp-core-mvc/diagram/connectors.md b/ej2-asp-core-mvc/diagram/connectors.md
@@ -912,9 +912,14 @@ The following example demonstrates undo and redo functionality for connector seg
 {% endif %}
 
 ``` javascript
-var diagram = document.getElementById("container").ej2_instances[0];
-diagram.undo();
-diagram.redo();
+function undo(){
+    var diagram = document.getElementById("container").ej2_instances[0];
+    diagram.undo();
+};
+function redo(){
+    var diagram = document.getElementById("container").ej2_instances[0];
+    diagram.redo();
+};
 ```
 
 
diff --git a/ej2-asp-core-mvc/diagram/symbol-palette.md b/ej2-asp-core-mvc/diagram/symbol-palette.md
@@ -96,30 +96,6 @@ Templates can be defined either as strings or functions and assigned to the node
 {% endtabs %}
 {% endif %}
 
-### HTML and SVG node with node template
-
-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 `<script>` tags using unique IDs, which are then assigned to the symbol palette `nodeTemplate` property. When symbols are dragged from the palette, the diagram automatically applies the corresponding template and binds the symbol's data to the template elements.
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/diagram/symbol-palette/nodeTemplate/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="palette.cs" %}
-{% include code-snippet/diagram/symbol-palette/nodeTemplate/palette.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight c# tabtitle="palette.cs" %}
-{% include code-snippet/diagram/symbol-palette/nodeTemplate/palette.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
 ## Customize the palette header
 
 Palettes can be annotated with its header texts.
@@ -465,7 +441,7 @@ Here, the code provided below demonstrates how to define tooltip content to symb
 
 ### How to enable or disable the default tooltip for shapes in the symbol palette
 
-By default, the symbol ID is displayed as a tooltip when hovering over a symbol in the Symbol Palette. To disable this default tooltip, you can use the [`showTooltip`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPalette.html#Syncfusion_EJ2_Diagrams_SymbolPalette_SymbolInfo) property within the `getSymbolInfo` method. The `showTooltip` property is set to **true** by default, which enables the tooltip.
+By default, the symbol ID is displayed as a tooltip when hovering over a symbol in the Symbol Palette. To disable this default tooltip, you can use the `showTooltip` property within the `getSymbolInfo` method. The `showTooltip` property is set to **true** by default, which enables the tooltip.
 
 The following example demonstrates how to configure selective tooltip display:
 
