Integrated latest changes at 09-13-2025 10:30:06 AM

Author: SyncfusionBuild

ej2-javascript/code-snippet/diagram/symbol-palette-contentFnTemplate/index.js

@@ -1,16 +1,9 @@
 // Template for the HTML and SVG Shapes.
 function template(obj) {
   if (obj.id == 'node1') {
-    return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-              <rect width="24" height="24" fill="#007BFF" />
-              <path d="M6.5 7.5L17.5 16.5L12 21V3L17.5 7.5L6.5 16.5" fill="none" stroke="white" stroke-width="2" />
-            </svg>`;
+    return '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="#007BFF" /><path d="M6.5 7.5L17.5 16.5L12 21V3L17.5 7.5L6.5 16.5" fill="none" stroke="white" stroke-width="2" /></svg>';
   }
-  return `<div style="height:100%; background:#e3daf1;font-family:Arial;padding-left:13px;">
-            <div style="font-size:12px;font-weight:bold;margin-left:3px;padding-top: 16px;">📅Meeting</div>
-            <div style="font-size:10px;margin-left:5px;">Team Sync @4PM</div>
-            <div style="font-size:8px; color:#666;margin-left:5px;">Room 30</div>
-          </div>`;
+  return '<div style="height:100%; background:#e3daf1;font-family:Arial;padding-left:13px;"><div style="font-size:12px;font-weight:bold;margin-left:3px;padding-top: 16px;">📅Meeting</div><div style="font-size:10px;margin-left:5px;">Team Sync @4PM</div><div style="font-size:8px; color:#666;margin-left:5px;">Room 30</div></div>';
 };
 
 // Initialize Diagram component.
@@ -45,7 +38,7 @@ var palette = new ej.diagrams.SymbolPalette({
             content: template.bind(this)
           }
         }
-      ], title: 'Basic Shapes'
+      ], title: 'HTML and SVG Shapes'
     }
   ]
 });

ej2-javascript/code-snippet/diagram/symbol-palette-contentFnTemplate/index.ts

@@ -3,16 +3,9 @@ import { SymbolPalette, NodeModel, Diagram } from '@syncfusion/ej2-diagrams';
 // Template for the HTML and SVG Shape.
 function template(obj: any) {
   if (obj.id == 'node1') {
-    return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-              <rect width="24" height="24" fill="#007BFF" />
-              <path d="M6.5 7.5L17.5 16.5L12 21V3L17.5 7.5L6.5 16.5" fill="none" stroke="white" stroke-width="2" />
-            </svg>`;
+    return '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="#007BFF" /><path d="M6.5 7.5L17.5 16.5L12 21V3L17.5 7.5L6.5 16.5" fill="none" stroke="white" stroke-width="2" /></svg>';
   }
-  return `<div style="height:100%; background:#e3daf1;font-family:Arial;padding-left:13px;">
-            <div style="font-size:12px;font-weight:bold;margin-left:3px;padding-top: 16px;">📅Meeting</div>
-            <div style="font-size:10px;margin-left:5px;">Team Sync @4PM</div>
-            <div style="font-size:8px; color:#666;margin-left:5px;">Room 30</div>
-          </div>`;
+  return '<div style="height:100%; background:#e3daf1;font-family:Arial;padding-left:13px;"><div style="font-size:12px;font-weight:bold;margin-left:3px;padding-top: 16px;">📅Meeting</div><div style="font-size:10px;margin-left:5px;">Team Sync @4PM</div><div style="font-size:8px; color:#666;margin-left:5px;">Room 30</div></div>';
 };
 
 // Initialize Diagram component.
@@ -47,7 +40,7 @@ let palette: SymbolPalette = new SymbolPalette({
             content: template.bind(this)
           }
         }
-      ], title: 'Basic Shapes'
+      ], title: 'HTML and SVG Shapes'
     }
   ]
 });

ej2-javascript/code-snippet/diagram/symbol-palette-cs25/index.js

@@ -1,4 +1,4 @@
-//Initialize the basic shapes for the symbol palette
+// Initialize the basic shapes for the symbol palette.
 function getBasicShapes() {
   var basicShapes = [
     { id: 'Rectangle', shape: { type: 'Basic', shape: 'Rectangle' }},
@@ -12,7 +12,8 @@ function getBasicShapes() {
   ];
   return basicShapes;
 }
-//Initialize the basic shapes for the symbol palette
+
+// Initialize the flow shapes for the symbol palette.
 function getFlowShapes() {
   var flowShapes = [
     { id: 'Terminator', shape: { type: 'Flow', shape: 'Terminator' } },
@@ -27,6 +28,9 @@ function getFlowShapes() {
   return flowShapes;
 }
 
+var checkBox = document.getElementById('showTooltip');
+
+//Initializes the symbol palette
 var palette = new ej.diagrams.SymbolPalette({
   expandMode: 'Multiple',
   palettes: [
@@ -46,24 +50,22 @@ var palette = new ej.diagrams.SymbolPalette({
   getNodeDefaults: function (symbol) {
     symbol.style.fill = '#6495ED';
     symbol.style.strokeColor = '#6495ED';
+    return symbol;
   },
   width: '600px',
   height: '300px',
   symbolHeight: 70,
   symbolWidth: 70,
   symbolPreview: { height: 80, width: 80 },
   symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 },
+  //Enable/disable tooltip for the symbols
   getSymbolInfo: function (symbol) {
-    return { showTooltip: true };
+    return { showTooltip: checkBox.checked };
   },
 });
 palette.appendTo('#element');
 
 document.getElementById('showTooltip').onclick = function (args) {
-  var checkBox = document.getElementById('showTooltip');
-  palette.getSymbolInfo = function (symbol) {
-    return { showTooltip: checkBox.checked };
-  };
-  palette.dataBind();
+  palette.refresh();
 };
 

ej2-javascript/code-snippet/diagram/symbol-palette-cs25/index.ts

@@ -2,8 +2,11 @@ import {
   SymbolPalette, NodeModel
 } from '@syncfusion/ej2-diagrams';
 
+const checkBox = document.getElementById("showTooltip");
+
+// Initialize the basic shapes for the symbol palette.
 function getBasicShapes() {
-  var basicShapes: NodeModel[] = [
+  const basicShapes: NodeModel[] = [
     { id: 'Rectangle', shape: { type: 'Basic', shape: 'Rectangle' } },
     { id: 'Ellipse', shape: { type: 'Basic', shape: 'Ellipse' } },
     { id: 'Triangle', shape: { type: 'Basic', shape: 'Triangle' } },
@@ -16,8 +19,9 @@ function getBasicShapes() {
   return basicShapes;
 }
 
+// Initialize the flow shapes for the symbol palette.
 function getFlowShapes() {
-  var flowShapes: NodeModel[] = [
+  const flowShapes: NodeModel[] = [
     { id: 'Terminator', shape: { type: 'Flow', shape: 'Terminator' } },
     { id: 'Process', shape: { type: 'Flow', shape: 'Process' } },
     { id: 'Decision', shape: { type: 'Flow', shape: 'Decision' } },
@@ -30,7 +34,7 @@ function getFlowShapes() {
   return flowShapes;
 }
 
-//Initializes the symbol palette
+// Initializes the symbol palette.
 let palette: SymbolPalette = new SymbolPalette({
   expandMode: 'Multiple',
   palettes: [
@@ -40,28 +44,25 @@ let palette: SymbolPalette = new SymbolPalette({
   getNodeDefaults: function (symbol) {
     symbol.style.fill = '#6495ED';
     symbol.style.strokeColor = '#6495ED';
+    return symbol;
   },
   width: '600px',
   height: '300px',
   symbolHeight: 70,
   symbolWidth: 70,
   symbolPreview: { height: 80, width: 80 },
   symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 },
+
+  // Enable/disable tooltip for the symbols.
   getSymbolInfo: function (symbol) {
-    return { showTooltip: true };
+    return { showTooltip: (checkBox as any).checked };
   },
 });
 palette.appendTo('#element');
 
 let tooltipCheckBox = document.getElementById('showTooltip');
 if (tooltipCheckBox) {
   tooltipCheckBox.onclick = function (args) {
-    var checkBox = document.getElementById("showTooltip");
-    palette.getSymbolInfo = function (symbol) {
-      return { showTooltip: (checkBox as any).checked };
-    }
-    palette.dataBind();
+    palette.refresh();
   };
-}
-
-
+}