syncfusion-content · SyncfusionBuild · Dec 20, 2025 · Dec 20, 2025
diff --git a/ej2-javascript/code-snippet/diagram/dataBinding-cs5/js/index.html b/ej2-javascript/code-snippet/diagram/dataBinding-cs5/js/index.html
@@ -24,5 +24,5 @@
             </div>
         </div>
     </div>
-    <script src="app.js"></script>
+    <script src="index.js" type="text/javascript"></script>
 </body></html>
diff --git a/ej2-javascript/code-snippet/diagram/symbol-palette-cs25/index.js b/ej2-javascript/code-snippet/diagram/symbol-palette-cs25/index.js
@@ -1,6 +1,3 @@
-import {
-  SymbolPalette, NodeModel
-} from '@syncfusion/ej2-diagrams';
 
 function getBasicShapes() {
   var basicShapes = [

diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.css b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.css
@@ -11,6 +11,42 @@
     left: 45%;
 }
 
-.fm_template .e-large-icons .e-list-item {
-    width: 190px;
+.e-fm-template-sample .custom-icon-card {
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.e-fm-template-sample .file-header {
+    display: contents;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+.e-fm-template-sample .file-name {
+    font-size: 14px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 110px;
+}
+
+.e-fm-template-sample .file-formattedDate {
+    font-size: 12px;
+    margin-top: 8px;
+    text-align: center;
+    font-weight: 600;
+}
+
+.e-filemanager.e-fm-template-sample .e-large-icons .e-list-item {
+    height: 150px;
+    width: 135px;
 }
diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.js b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.js
@@ -10,24 +10,62 @@ var filemanagerInstance = new ej.filemanager.FileManager({
         downloadUrl: hostUrl + 'api/FileManager/Download'
     },
     height: '380px',
-    cssClass: 'fm_template',
+    cssClass: 'e-fm-template-sample',
     largeIconsTemplate: function (item) {
         const formattedDate = item.dateCreated
-        ? new Date(item.dateCreated).toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric'
-        })
-        : '';
-        return `
-        <div style="display: flex; flex-direction: column; gap: 2px;">
-            <span><strong>${item.name}</strong></span>
-            <span><strong>Type: </strong>${ item.isFile ? 'File' : 'Folder' }</span>
-            <span><strong>Modified: </strong>${formattedDate}</span>
-        </div>
-    `;
+            ? new Date(item.dateCreated).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+            })
+            : '';
+        const iconClass = getFileIconCssClass(item);
+        return `<div class="custom-icon-card">
+                <div class="file-header">
+                        <div class="file-name" title="${item.name}">${item.name}</div>
+                </div>
+                <div class="${iconClass}"></div>
+                <div class="file-formattedDate">Created on ${formattedDate}</div>
+            </div>
+        `;
     }
 });
 
 // render initialized File Manager
-filemanagerInstance.appendTo('#filemanager');
+filemanagerInstance.appendTo('#filemanager');
+
+function getFileIconCssClass(item) {
+    if (!item.isFile) return 'e-list-icon e-fe-folder';
+
+    var extensionMap = {
+        jpg: 'image',
+        jpeg: 'image',
+        png: 'image',
+        gif: 'image',
+        mp3: 'music',
+        wav: 'music',
+        mp4: 'video',
+        avi: 'video',
+        doc: 'doc',
+        docx: 'docx',
+        ppt: 'pptx',
+        pptx: 'pptx',
+        xls: 'xlsx',
+        xlsx: 'xlsx',
+        txt: 'txt',
+        js: 'js',
+        css: 'css',
+        html: 'html',
+        exe: 'exe',
+        msi: 'msi',
+        php: 'php',
+        xml: 'xml',
+        zip: 'zip',
+        rar: 'rar',
+        pdf: 'pdf',
+    };
+
+    var extension = (item.name.split('.').pop() || '').toLowerCase();
+    var iconType = extensionMap[extension] || 'unknown';
+    return 'e-list-icon e-fe-' + iconType;
+}
diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.ts b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.ts
@@ -12,24 +12,62 @@ let filemanagerInstance: FileManager = new FileManager({
         downloadUrl: hostUrl + 'api/FileManager/Download'
     },
     height: '380px',
-    cssClass: 'fm_template',
+    cssClass: 'e-fm-template-sample',
     largeIconsTemplate: function (item: any) {
         const formattedDate = item.dateCreated
-        ? new Date(item.dateCreated).toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric'
-        })
-        : '';
-        return `
-        <div style="display: flex; flex-direction: column; gap: 2px;">
-            <span><strong>${item.name}</strong></span>
-            <span><strong>Type: </strong>${ item.isFile ? 'File' : 'Folder' }</span>
-            <span><strong>Modified: </strong>${formattedDate}</span>
-        </div>
-    `;
+            ? new Date(item.dateCreated).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+            })
+            : '';
+        const iconClass = getFileIconCssClass(item);
+        return `<div class="custom-icon-card">
+                <div class="file-header">
+                        <div class="file-name" title="${item.name}">${item.name}</div>
+                </div>
+                <div class="${iconClass}"></div>
+                <div class="file-formattedDate">Created on ${formattedDate}</div>
+            </div>
+        `;
     }
 });
 
 // render initialized File Manager
-filemanagerInstance.appendTo('#filemanager');
+filemanagerInstance.appendTo('#filemanager');
+
+function getFileIconCssClass(item: any): string {
+  if (!item.isFile) return 'e-list-icon e-fe-folder';
+
+  var extensionMap: Record<string, string> = {
+    jpg: 'image',
+    jpeg: 'image',
+    png: 'image',
+    gif: 'image',
+    mp3: 'music',
+    wav: 'music',
+    mp4: 'video',
+    avi: 'video',
+    doc: 'doc',
+    docx: 'docx',
+    ppt: 'pptx',
+    pptx: 'pptx',
+    xls: 'xlsx',
+    xlsx: 'xlsx',
+    txt: 'txt',
+    js: 'js',
+    css: 'css',
+    html: 'html',
+    exe: 'exe',
+    msi: 'msi',
+    php: 'php',
+    xml: 'xml',
+    zip: 'zip',
+    rar: 'rar',
+    pdf: 'pdf',
+  };
+
+  var extension = (item.name.split('.').pop() || '').toLowerCase();
+  var iconType = extensionMap[extension] || 'unknown';
+  return 'e-list-icon e-fe-' + iconType;
+}
diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/js/index.html b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/js/index.html
@@ -22,7 +22,47 @@
 
 <body>
   <div id="filemanager"></div>
+  <style>
+    .e-fm-template-sample .custom-icon-card {
+      padding: 8px;
+      border: 1px solid #ccc;
+      border-radius: 10px;
+      height: 100%;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+    }
 
+    .e-fm-template-sample .file-header {
+      display: contents;
+      align-items: center;
+      width: 100%;
+      margin-bottom: 10px;
+    }
+
+    .e-fm-template-sample .file-name {
+      font-size: 14px;
+      font-weight: 600;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 110px;
+    }
+
+    .e-fm-template-sample .file-formattedDate {
+      font-size: 12px;
+      margin-top: 8px;
+      text-align: center;
+      font-weight: 600;
+    }
+
+    .e-filemanager.e-fm-template-sample .e-large-icons .e-list-item {
+      height: 150px;
+      width: 135px;
+    }
+  </style>
   <script>
     var ele = document.getElementById('container');
     if (ele) {

diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/ts/index.html b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/ts/index.html
@@ -20,8 +20,51 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
+
 <body>
     <div id='loader'>Loading....</div>
     <div id="filemanager"></div>
+    <style>
+        .e-fm-template-sample .custom-icon-card {
+            padding: 8px;
+            border: 1px solid #ccc;
+            border-radius: 10px;
+            height: 100%;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: center;
+        }
+
+        .e-fm-template-sample .file-header {
+            display: contents;
+            align-items: center;
+            width: 100%;
+            margin-bottom: 10px;
+        }
+
+        .e-fm-template-sample .file-name {
+            font-size: 14px;
+            font-weight: 600;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 110px;
+        }
+
+        .e-fm-template-sample .file-formattedDate {
+            font-size: 12px;
+            margin-top: 8px;
+            text-align: center;
+            font-weight: 600;
+        }
+
+        .e-filemanager.e-fm-template-sample .e-large-icons .e-list-item {
+            height: 150px;
+            width: 135px;
+        }
+    </style>
 </body>
+
 </html>
diff --git a/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.js b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.js
@@ -9,7 +9,7 @@ var filemanagerInstance = new ej.filemanager.FileManager({
         uploadUrl: hostUrl + 'api/FileManager/Upload',
         downloadUrl: hostUrl + 'api/FileManager/Download'
     },
-    height: '380px'
+    height: '380px',
     navigationPaneTemplate: function (item) {
         return `
         <div class="e-nav-pane-node" style="display: inline-flex; align-items: center;">

diff --git a/ej2-javascript/code-snippet/markdown-editor/custom-toolbar-cs1/systemjs.config.js b/ej2-javascript/code-snippet/markdown-editor/custom-toolbar-cs1/systemjs.config.js
@@ -32,8 +32,10 @@ System.config({
         "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
         "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
         "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
-        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
         "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-interactive-chat":"syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-markdown-converter":"syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js"
     }
 });
 

diff --git a/ej2-javascript/code-snippet/markdown-editor/expand-toolbar-cs1/systemjs.config.js b/ej2-javascript/code-snippet/markdown-editor/expand-toolbar-cs1/systemjs.config.js
@@ -33,7 +33,9 @@ System.config({
         "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
         "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
         "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
-        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js"
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-interactive-chat":"syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-markdown-converter":"syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js"
     }
 });
 

diff --git a/ej2-javascript/code-snippet/markdown-editor/floating-toolbar-cs1/systemjs.config.js b/ej2-javascript/code-snippet/markdown-editor/floating-toolbar-cs1/systemjs.config.js
@@ -32,8 +32,10 @@ System.config({
         "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
         "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
         "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
-        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
         "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-interactive-chat":"syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-markdown-converter":"syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js"
     }
 });
 

diff --git a/ej2-javascript/code-snippet/markdown-editor/getting-started-cs1/systemjs.config.js b/ej2-javascript/code-snippet/markdown-editor/getting-started-cs1/systemjs.config.js
@@ -33,7 +33,9 @@ System.config({
         "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
         "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
         "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
-        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js"
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-interactive-chat":"syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-markdown-converter":"syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js"
     }
 });
 

diff --git a/ej2-javascript/code-snippet/markdown-editor/getting-started-cs2/systemjs.config.js b/ej2-javascript/code-snippet/markdown-editor/getting-started-cs2/systemjs.config.js
@@ -33,7 +33,9 @@ System.config({
         "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
         "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
         "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
-        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js"
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-interactive-chat":"syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-markdown-converter":"syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js"
     }
 });
 

diff --git a/ej2-javascript/code-snippet/markdown-editor/markdown-custom-key/systemjs.config.js b/ej2-javascript/code-snippet/markdown-editor/markdown-custom-key/systemjs.config.js
@@ -33,7 +33,9 @@ System.config({
         "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
         "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
         "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
-        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js"
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-interactive-chat":"syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-markdown-converter":"syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js"
     }
 });