diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html
index 18955f47c..340894b3d 100644
--- a/ej2-javascript-toc.html
+++ b/ej2-javascript-toc.html
@@ -800,11 +800,19 @@
 <li><a href="/ej2-javascript/data/overview">Overview</a></li>
 <li><a href="/ej2-javascript/data/getting-started">Getting Started</a></li>
 <li><a href="/ej2-javascript/data/data-binding">Data Binding</a></li>
+<li><a href="/ej2-javascript/data/cache">Cache</a></li>
 <li><a href="/ej2-javascript/data/querying">Querying</a></li>
 <li><a href="/ej2-javascript/data/adaptors">Adaptors</a></li>
-<li><a href="/ej2-javascript/data/crud-operations">CRUD Operations</a></li>
+<li><a href="/ej2-javascript/data/crud-operations">CRUD Data Operations</a></li>
 <li><a href="/ej2-javascript/data/dataManager-persistence">State Persistence</a></li>
 <li><a href="/ej2-javascript/data/applying-middleware-logic">Applying Middleware Logic</a></li>
+<li>How To
+    <ul>
+        <li><a href="/ej2-javascript/data/how-to/working-in-offline-mode">Working in offline mode</a></li>
+        <li><a href="/ej2-javascript/data/how-to/sending-additional-parameters">Sending additional parameters to server</a></li>
+        <li><a href="/ej2-javascript/data/how-to/adding-custom-headers">Adding custom headers</a></li>
+    </ul>
+</li>
 <li><a href="/ej2-javascript/data/advanced-scenarios">Advanced Scenarios</a></li>
 <li><a href="https://ej2.syncfusion.com/javascript/documentation/api/data/overview/">API Reference</a></li>
 </ul>
@@ -1276,8 +1284,7 @@
             <ul>
                 <li><a href="/ej2-javascript/gantt/excel-export/excel-export">Excel Export</a>
                     <ul>
-                        <li><a href="/ej2-javascript/gantt/excel-export/custom-data-source">Custom Data Source</a></li>
-                        <li><a href="/ej2-javascript/gantt/excel-export/multiple-gantt-exporting">Multiple Gantt Exporting</a></li>
+                        <li><a href="/ej2-javascript/gantt/excel-export/excel-export-options">Excel Export Options</a></li>
                     </ul>
                 </li>
                 <li><a href="/ej2-javascript/gantt/pdf-export/pdf-export">Pdf Export</a>
diff --git a/ej2-javascript/ai-assistview/js/es5-getting-started.md b/ej2-javascript/ai-assistview/js/es5-getting-started.md
index 0399c251f..6123af279 100644
--- a/ej2-javascript/ai-assistview/js/es5-getting-started.md
+++ b/ej2-javascript/ai-assistview/js/es5-getting-started.md
@@ -42,9 +42,9 @@ The JavaScript (ES5) AI AssistView control can be initialized by using either of
 >
 > Control Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js`
 >
-> Dependency Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\styles\material.css`
+> Dependency Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\styles\tailwind3.css`
 >
-> Control Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\material.css`
+> Control Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\tailwind3.css`
 
 **Example:**
 
@@ -52,15 +52,15 @@ The JavaScript (ES5) AI AssistView control can be initialized by using either of
 >
 > Control Script: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-interactive-chat\dist\global\ej2-interactive-chat.min.js`
 >
-> Dependency Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-base\styles\material.css`
+> Dependency Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-base\styles\tailwind3.css`
 >
-> Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-interactive-chat\styles\material.css`
+> Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-interactive-chat\styles\tailwind3.css`
 
 The below located script and style file contains all Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript (ES5) UI control resources in a single file.
 
 > Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js`
 >
-> Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\material.css`
+> Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\tailwind3.css`
 
 The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an online web tool, which can be used to generate the custom script and styles for a set of specific controls. This web tool is useful to combine the required control scripts and styles in a single file.
 
@@ -74,13 +74,13 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin
        <head>
             <title>JavaScript (ES5)</title>
             <!-- JavaScript (ES5) AI AssistView's dependency style -->
-            <link href="resources/base/material.css" rel="stylesheet" type="text/css"/>
-            <link href="resources/buttons/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/notifications/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/inputs/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/navigations/material.css" rel="stylesheet" type="text/css" />
+            <link href="resources/base/tailwind3.css" rel="stylesheet" type="text/css"/>
+            <link href="resources/buttons/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/notifications/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/inputs/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/navigations/tailwind3.css" rel="stylesheet" type="text/css" />
             <!-- JavaScript (ES5) AI AssistView control style -->
-            <link href="resources/interactive-chat/material.css" rel="stylesheet" type="text/css"/>
+            <link href="resources/interactive-chat/tailwind3.css" rel="stylesheet" type="text/css"/>
 
             <!-- JavaScript (ES5) AI AssistView's dependency global script -->
             <script src="resources/base/ej2-base.min.js" type="text/javascript"></script>
@@ -111,14 +111,14 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin
        <head>
           <title>JavaScript (ES5)</title>
           <!-- JavaScript (ES5) AI AssistView's dependency style -->
-            <link href="resources/base/material.css" rel="stylesheet" type="text/css"/>
-            <link href="resources/buttons/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/notifications/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/inputs/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/navigations/material.css" rel="stylesheet" type="text/css" />
+            <link href="resources/base/tailwind3.css" rel="stylesheet" type="text/css"/>
+            <link href="resources/buttons/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/notifications/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/inputs/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/navigations/tailwind3.css" rel="stylesheet" type="text/css" />
 
           <!-- JavaScript (ES5) AI AssistView control style -->
-          <link href="resources/interactive-chat/material.css" rel="stylesheet" type="text/css"/>
+          <link href="resources/interactive-chat/tailwind3.css" rel="stylesheet" type="text/css"/>
 
           <!-- JavaScript (ES5) AI AssistView's dependency global script -->
             <script src="resources/base/ej2-base.min.js" type="text/javascript"></script>
@@ -164,14 +164,14 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin
 >
 > Control Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js`
 >
-> Dependency Styles: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/styles/material.css`
+> Dependency Styles: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/styles/tailwind3.css`
 >
-> Control Styles: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css`
+> Control Styles: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/tailwind3.css`
 
 **Example:**
 > Script: [`https://cdn.syncfusion.com/ej2/ej2-interactive-chat/dist/global/ej2-interactive-chat.min.js`](https://cdn.syncfusion.com/ej2/ej2-interactive-chat/dist/global/ej2-interactive-chat.min.js)
 >
-> Styles: [`https://cdn.syncfusion.com/ej2/ej2-interactive-chat/styles/material.css`](http://cdn.syncfusion.com/ej2/ej2-interactive-chat/styles/material.css)
+> Styles: [`https://cdn.syncfusion.com/ej2/ej2-interactive-chat/styles/tailwind3.css`](http://cdn.syncfusion.com/ej2/ej2-interactive-chat/styles/tailwind3.css)
 
 **Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `AI AssistView` element and initiate the `JavaScript (ES5) AI AssistView` control in the index.html by using following code.
 
diff --git a/ej2-javascript/ai-assistview/ts/getting-started.md b/ej2-javascript/ai-assistview/ts/getting-started.md
index 8bfff8411..d07a2747a 100644
--- a/ej2-javascript/ai-assistview/ts/getting-started.md
+++ b/ej2-javascript/ai-assistview/ts/getting-started.md
@@ -69,12 +69,12 @@ To render AI AssistView control, need to import interactive-chat and its depende
 {% tabs %}
 {% highlight css tabtitle="style.css" %}
 
-@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/tailwind3.css";
 
 {% endhighlight %}
 {% endtabs %}
diff --git a/ej2-javascript/chart/tool-tip.md b/ej2-javascript/chart/tool-tip.md
index 2368aca34..e68bb680b 100644
--- a/ej2-javascript/chart/tool-tip.md
+++ b/ej2-javascript/chart/tool-tip.md
@@ -247,7 +247,10 @@ The split tooltip displays a separate tooltip for each series at the same data p
 
 Enable this feature by setting the [`split`](../api/chart/tooltipSettingsModel#split) property to **true**:
 
+<<<<<<< HEAD
+=======
 
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 ```js
 tooltip: { 
     enable: true, 
diff --git a/ej2-javascript/chat-ui/js/es5-getting-started.md b/ej2-javascript/chat-ui/js/es5-getting-started.md
index 75352d9fc..f724022be 100644
--- a/ej2-javascript/chat-ui/js/es5-getting-started.md
+++ b/ej2-javascript/chat-ui/js/es5-getting-started.md
@@ -45,9 +45,9 @@ The JavaScript (ES5) Chat UI control can be initialized by using either of the f
 >
 > Control Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js`
 >
-> Dependency Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\styles\material.css`
+> Dependency Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\styles\tailwind3.css`
 >
-> Control Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\material.css`
+> Control Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\tailwind3.css`
 
 **Example:**
 
@@ -55,15 +55,15 @@ The JavaScript (ES5) Chat UI control can be initialized by using either of the f
 >
 > Control Script: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-interactive-chat\dist\global\ej2-interactive-chat.min.js`
 >
-> Dependency Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-base\styles\material.css`
+> Dependency Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-base\styles\tailwind3.css`
 >
-> Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-interactive-chat\styles\material.css`
+> Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-interactive-chat\styles\tailwind3.css`
 
 The below located script and style file contains all Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript (ES5) UI control resources in a single file.
 
 > Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js`
 >
-> Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\material.css`
+> Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\tailwind3.css`
 
 The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an online web tool, which can be used to generate the custom script and styles for a set of specific controls. This web tool is useful to combine the required control scripts and styles in a single file.
 
@@ -77,15 +77,15 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin
        <head>
             <title>JavaScript (ES5)</title>
             <!-- JavaScript (ES5) Chat UI dependency style -->
-            <link href="resources/base/material.css" rel="stylesheet" type="text/css"/>
-            <link href="resources/buttons/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/popups/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/inputs/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/navigations/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/dropdowns/material.css" rel="stylesheet" type="text/css"/>
+            <link href="resources/base/tailwind3.css" rel="stylesheet" type="text/css"/>
+            <link href="resources/buttons/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/popups/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/inputs/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/navigations/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/dropdowns/tailwind3.css" rel="stylesheet" type="text/css"/>
 
             <!-- JavaScript (ES5) Chat UI control style -->
-            <link href="resources/interactive-chat/material.css" rel="stylesheet" type="text/css"/>
+            <link href="resources/interactive-chat/tailwind3.css" rel="stylesheet" type="text/css"/>
 
             <!-- JavaScript (ES5) Chat UI dependency global script -->
             <script src="resources/base/ej2-base.min.js" type="text/javascript"></script>
@@ -117,15 +117,15 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin
        <head>
           <title>JavaScript (ES5)</title>
           <!-- JavaScript (ES5) Chat UI's dependency style -->
-          <link href="resources/base/material.css" rel="stylesheet" type="text/css"/>
-          <link href="resources/buttons/material.css" rel="stylesheet" type="text/css" />
-          <link href="resources/popups/material.css" rel="stylesheet" type="text/css" />
-          <link href="resources/inputs/material.css" rel="stylesheet" type="text/css" />
-          <link href="resources/navigations/material.css" rel="stylesheet" type="text/css" />
-          <link href="resources/dropdowns/material.css" rel="stylesheet" type="text/css"/>
+          <link href="resources/base/tailwind3.css" rel="stylesheet" type="text/css"/>
+          <link href="resources/buttons/tailwind3.css" rel="stylesheet" type="text/css" />
+          <link href="resources/popups/tailwind3.css" rel="stylesheet" type="text/css" />
+          <link href="resources/inputs/tailwind3.css" rel="stylesheet" type="text/css" />
+          <link href="resources/navigations/tailwind3.css" rel="stylesheet" type="text/css" />
+          <link href="resources/dropdowns/tailwind3.css" rel="stylesheet" type="text/css"/>
           
           <!-- JavaScript (ES5) Chat UI control style -->
-          <link href="resources/interactive-chat/material.css" rel="stylesheet" type="text/css"/>
+          <link href="resources/interactive-chat/tailwind3.css" rel="stylesheet" type="text/css"/>
 
           <!-- JavaScript (ES5) Chat UI's dependency global script -->
           <script src="resources/base/ej2-base.min.js" type="text/javascript"></script>
@@ -170,14 +170,14 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin
 >
 > Control Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js`
 >
-> Dependency Styles: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/styles/material.css`
+> Dependency Styles: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/styles/tailwind3.css`
 >
-> Control Styles: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css`
+> Control Styles: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/tailwind3.css`
 
 **Example:**
 > Script: [`https://cdn.syncfusion.com/ej2/ej2-interactive-chat/dist/global/ej2-interactive-chat.min.js`](https://cdn.syncfusion.com/ej2/ej2-interactive-chat/dist/global/ej2-interactive-chat.min.js)
 >
-> Styles: [`https://cdn.syncfusion.com/ej2/ej2-interactive-chat/styles/material.css`](http://cdn.syncfusion.com/ej2/ej2-interactive-chat/styles/material.css)
+> Styles: [`https://cdn.syncfusion.com/ej2/ej2-interactive-chat/styles/tailwind3.css`](http://cdn.syncfusion.com/ej2/ej2-interactive-chat/styles/tailwind3.css)
 
 **Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `Chat UI` element and initiate the `JavaScript (ES5) Chat UI` control in the index.html by using following code.
 
diff --git a/ej2-javascript/chat-ui/ts/getting-started.md b/ej2-javascript/chat-ui/ts/getting-started.md
index c0d5dc87f..27756d729 100644
--- a/ej2-javascript/chat-ui/ts/getting-started.md
+++ b/ej2-javascript/chat-ui/ts/getting-started.md
@@ -72,13 +72,13 @@ To render Chat UI control, need to import interactive-chat and its dependent con
 {% tabs %}
 {% highlight css tabtitle="style.css" %}
 
-@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
-@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
+@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
+@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/tailwind3.css";
 
 {% endhighlight %}
 {% endtabs %}
@@ -123,13 +123,26 @@ Then, import the Chat UI control in your `app.ts` file, and initialize it with t
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}
 
+<<<<<<< HEAD
+import { ChatUI, UserModel } from "@syncfusion/ej2-interactive-chat";
+=======
 import { ChatUI,UserModel } from "@syncfusion/ej2-interactive-chat";
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 
 let currentUserModel: UserModel = {
     id: "user1",
     user: "Albert"
 };
 // Initializes the Chat UI control
+<<<<<<< HEAD
+
+let currentUserModel: UserModel = {
+    id: "user1",
+    user: "Albert"
+};
+// Initializes the Chat UI control
+=======
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 let chatUI: ChatUI = new ChatUI({
     user: currentUserModel
 });
diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/gemini-ai/js/index.html b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/gemini-ai/js/index.html
index d07aaf4a9..81b70de28 100644
--- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/gemini-ai/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/gemini-ai/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/gemini-ai/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/gemini-ai/ts/index.html
index e24f60de9..06db20de5 100644
--- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/gemini-ai/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/gemini-ai/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/lite-llm/js/index.html b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/lite-llm/js/index.html
index d1f8025e4..a6969a11e 100644
--- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/lite-llm/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/lite-llm/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/lite-llm/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/lite-llm/ts/index.html
index 7fcc42f7d..0cd99d4c0 100644
--- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/lite-llm/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/lite-llm/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/llm-model/js/index.html b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/llm-model/js/index.html
index a7c85d5a3..fab046072 100644
--- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/llm-model/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/llm-model/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/llm-model/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/llm-model/ts/index.html
index 2a628f16a..de90ca3b9 100644
--- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/llm-model/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/llm-model/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/mcp-server/js/index.html b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/mcp-server/js/index.html
index aeeb8fa41..23abcaafa 100644
--- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/mcp-server/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/mcp-server/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/mcp-server/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/mcp-server/ts/index.html
index 0016e1f59..6fef6a793 100644
--- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/mcp-server/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/mcp-server/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/open-ai/js/index.html b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/open-ai/js/index.html
index d07aaf4a9..81b70de28 100644
--- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/open-ai/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/open-ai/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/open-ai/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/open-ai/ts/index.html
index e24f60de9..06db20de5 100644
--- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/open-ai/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/open-ai/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/js/index.html b/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/js/index.html
index 66d87a187..e9bcb8b8b 100644
--- a/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/ts/index.html
index 9beefd797..3da16c1dc 100644
--- a/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/ai-assistview/appearance/height/js/index.html b/ej2-javascript/code-snippet/ai-assistview/appearance/height/js/index.html
index 4138ddcb8..7c221788d 100644
--- a/ej2-javascript/code-snippet/ai-assistview/appearance/height/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/appearance/height/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/appearance/height/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/appearance/height/ts/index.html
index 0f13cbbe8..a1b868cd7 100644
--- a/ej2-javascript/code-snippet/ai-assistview/appearance/height/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/appearance/height/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/appearance/width/js/index.html b/ej2-javascript/code-snippet/ai-assistview/appearance/width/js/index.html
index cda0e2626..5e21c1114 100644
--- a/ej2-javascript/code-snippet/ai-assistview/appearance/width/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/appearance/width/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/appearance/width/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/appearance/width/ts/index.html
index c810cd89e..9a3f63a33 100644
--- a/ej2-javascript/code-snippet/ai-assistview/appearance/width/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/appearance/width/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/clearbutton/js/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/clearbutton/js/index.html
index f0e543108..a08793a34 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/clearbutton/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/clearbutton/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/clearbutton/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/clearbutton/ts/index.html
index f3c83eac4..80fac737d 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/clearbutton/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/clearbutton/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/markdown-prompt/js/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/markdown-prompt/js/index.html
index 7b4df13d8..a18df3aec 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/markdown-prompt/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/markdown-prompt/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/markdown-prompt/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/markdown-prompt/ts/index.html
index e2d609ac4..b9d860231 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/markdown-prompt/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/markdown-prompt/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/placeholder/js/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/placeholder/js/index.html
index 3c8f8703b..ef0fe022f 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/placeholder/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/placeholder/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/placeholder/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/placeholder/ts/index.html
index b6aff3251..cb8d8f802 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/placeholder/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/placeholder/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-icon/js/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-icon/js/index.html
index 21babd7e5..00152f130 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-icon/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-icon/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-icon/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-icon/ts/index.html
index fc8afdd88..30ccc49f9 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-icon/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-icon/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-text/js/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-text/js/index.html
index 38b7e8438..ef3538c58 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-text/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-text/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-text/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-text/ts/index.html
index 032f5bcd2..543c6547e 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-text/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-text/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompts/js/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompts/js/index.html
index cab4b7ff9..a301f65bb 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompts/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompts/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompts/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompts/ts/index.html
index 326193404..41b7305d8 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompts/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompts/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/response-icon/js/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/response-icon/js/index.html
index 6a2440ac7..f9ff67e57 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/response-icon/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/response-icon/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/response-icon/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/response-icon/ts/index.html
index 55f2a6a0c..184722009 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/response-icon/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/response-icon/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/scroll-to-bottom/js/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/scroll-to-bottom/js/index.html
index 3e80c5559..77884b15a 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/scroll-to-bottom/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/scroll-to-bottom/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/scroll-to-bottom/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/scroll-to-bottom/ts/index.html
index 248921d94..9437ae58c 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/scroll-to-bottom/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/scroll-to-bottom/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions-header/js/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions-header/js/index.html
index d58a1cc79..a6203d41e 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions-header/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions-header/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions-header/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions-header/ts/index.html
index 1d1c2496b..c1d963743 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions-header/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions-header/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions/js/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions/js/index.html
index e8e82a4bd..7bfed1156 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions/ts/index.html
index cd62a89a0..c21153ee6 100644
--- a/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/defaultprompts/js/index.html b/ej2-javascript/code-snippet/ai-assistview/defaultprompts/js/index.html
index b5f594c54..947ba45a1 100644
--- a/ej2-javascript/code-snippet/ai-assistview/defaultprompts/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/defaultprompts/js/index.html
@@ -5,14 +5,14 @@
                 
     <title>JavaScript (ES5) AI AssistView</title>
     <!-- JavaScript (ES5) AI AssistView's dependency style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) AI AssistView control style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) AI AssistView's dependent scripts -->
     <script src="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/defaultprompts/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/defaultprompts/ts/index.html
index 6555d7b27..d518d84ab 100644
--- a/ej2-javascript/code-snippet/ai-assistview/defaultprompts/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/defaultprompts/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/attachment-click/js/index.html b/ej2-javascript/code-snippet/ai-assistview/events/attachment-click/js/index.html
index d4da116bf..62eab1ba8 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/attachment-click/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/attachment-click/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/attachment-click/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/events/attachment-click/ts/index.html
index 11d82cd63..6614b5a8d 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/attachment-click/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/attachment-click/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/attachment-failure/js/index.html b/ej2-javascript/code-snippet/ai-assistview/events/attachment-failure/js/index.html
index 830f1996a..ba89c8cd9 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/attachment-failure/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/attachment-failure/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/attachment-failure/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/events/attachment-failure/ts/index.html
index ec8420054..fedce583c 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/attachment-failure/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/attachment-failure/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/attachment-removed/js/index.html b/ej2-javascript/code-snippet/ai-assistview/events/attachment-removed/js/index.html
index 830f1996a..ba89c8cd9 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/attachment-removed/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/attachment-removed/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/attachment-removed/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/events/attachment-removed/ts/index.html
index ec8420054..fedce583c 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/attachment-removed/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/attachment-removed/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/attachment-success/js/index.html b/ej2-javascript/code-snippet/ai-assistview/events/attachment-success/js/index.html
index 830f1996a..ba89c8cd9 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/attachment-success/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/attachment-success/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/attachment-success/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/events/attachment-success/ts/index.html
index ec8420054..fedce583c 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/attachment-success/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/attachment-success/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/before-attachment/js/index.html b/ej2-javascript/code-snippet/ai-assistview/events/before-attachment/js/index.html
index 830f1996a..ba89c8cd9 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/before-attachment/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/before-attachment/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/before-attachment/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/events/before-attachment/ts/index.html
index ec8420054..fedce583c 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/before-attachment/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/before-attachment/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/created/js/index.html b/ej2-javascript/code-snippet/ai-assistview/events/created/js/index.html
index 06b767db2..ef95311cd 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/created/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/created/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/created/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/events/created/ts/index.html
index c33f326b2..faa8348c4 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/created/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/created/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/prompt-changed/js/index.html b/ej2-javascript/code-snippet/ai-assistview/events/prompt-changed/js/index.html
index 5624e6148..dcb95b4d2 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/prompt-changed/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/prompt-changed/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/prompt-changed/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/events/prompt-changed/ts/index.html
index 42278806e..3799c7430 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/prompt-changed/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/prompt-changed/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/prompt-request/js/index.html b/ej2-javascript/code-snippet/ai-assistview/events/prompt-request/js/index.html
index 44a86a19f..ee224fd33 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/prompt-request/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/prompt-request/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/events/prompt-request/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/events/prompt-request/ts/index.html
index c7b693a59..2da4189ec 100644
--- a/ej2-javascript/code-snippet/ai-assistview/events/prompt-request/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/events/prompt-request/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/enable-attachment/js/index.html b/ej2-javascript/code-snippet/ai-assistview/file-attachments/enable-attachment/js/index.html
index d38bf72b6..51bb0f41e 100644
--- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/enable-attachment/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/enable-attachment/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/enable-attachment/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/file-attachments/enable-attachment/ts/index.html
index 2bb152d79..d4b256138 100644
--- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/enable-attachment/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/enable-attachment/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-size/js/index.html b/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-size/js/index.html
index d38bf72b6..51bb0f41e 100644
--- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-size/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-size/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-size/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-size/ts/index.html
index 2bb152d79..d4b256138 100644
--- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-size/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-size/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-type/js/index.html b/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-type/js/index.html
index d38bf72b6..51bb0f41e 100644
--- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-type/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-type/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-type/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-type/ts/index.html
index 2bb152d79..d4b256138 100644
--- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-type/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-type/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/maximum-count/js/index.html b/ej2-javascript/code-snippet/ai-assistview/file-attachments/maximum-count/js/index.html
index d38bf72b6..51bb0f41e 100644
--- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/maximum-count/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/maximum-count/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/maximum-count/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/file-attachments/maximum-count/ts/index.html
index 2bb152d79..d4b256138 100644
--- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/maximum-count/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/maximum-count/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/index.html b/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/index.html
index 2bb152d79..d4b256138 100644
--- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/js/index.html b/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/js/index.html
index d38bf72b6..51bb0f41e 100644
--- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/ts/index.html
index 2bb152d79..d4b256138 100644
--- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/gettingstarted/js/index.html b/ej2-javascript/code-snippet/ai-assistview/gettingstarted/js/index.html
index cd0ae6027..6fdf693ec 100644
--- a/ej2-javascript/code-snippet/ai-assistview/gettingstarted/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/gettingstarted/js/index.html
@@ -5,14 +5,14 @@
                 
     <title>JavaScript (ES5) AI AssistView</title>
     <!-- JavaScript (ES5) AI AssistView's dependency style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) AI AssistView control style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) AI AssistView's dependent scripts -->
     <script src="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/gettingstarted/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/gettingstarted/ts/index.html
index 6555d7b27..d518d84ab 100644
--- a/ej2-javascript/code-snippet/ai-assistview/gettingstarted/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/gettingstarted/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/methods/execute-prompt/js/index.html b/ej2-javascript/code-snippet/ai-assistview/methods/execute-prompt/js/index.html
index 9b3b88335..17d3230c2 100644
--- a/ej2-javascript/code-snippet/ai-assistview/methods/execute-prompt/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/methods/execute-prompt/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/methods/execute-prompt/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/methods/execute-prompt/ts/index.html
index e2a943e32..2106aadba 100644
--- a/ej2-javascript/code-snippet/ai-assistview/methods/execute-prompt/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/methods/execute-prompt/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/ai-assistview/methods/response-object/js/index.html b/ej2-javascript/code-snippet/ai-assistview/methods/response-object/js/index.html
index 7604e29b0..04166847c 100644
--- a/ej2-javascript/code-snippet/ai-assistview/methods/response-object/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/methods/response-object/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/methods/response-object/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/methods/response-object/ts/index.html
index 14bb3d8ca..dea5c170d 100644
--- a/ej2-javascript/code-snippet/ai-assistview/methods/response-object/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/methods/response-object/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/ai-assistview/methods/response-string/js/index.html b/ej2-javascript/code-snippet/ai-assistview/methods/response-string/js/index.html
index 4f51206f1..bbfaed636 100644
--- a/ej2-javascript/code-snippet/ai-assistview/methods/response-string/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/methods/response-string/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/methods/response-string/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/methods/response-string/ts/index.html
index c6b253522..87b957486 100644
--- a/ej2-javascript/code-snippet/ai-assistview/methods/response-string/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/methods/response-string/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/speech-configuration/js/index.html b/ej2-javascript/code-snippet/ai-assistview/speech/speech-configuration/js/index.html
index 5d411147b..b3e472236 100644
--- a/ej2-javascript/code-snippet/ai-assistview/speech/speech-configuration/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/speech/speech-configuration/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="JavaScript AI AssistView Control - Speech Configuration" />
     <meta name="author" content="Syncfusion" />
     <link href="../index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/speech-configuration/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/speech/speech-configuration/ts/index.html
index 789452545..1b047e88d 100644
--- a/ej2-javascript/code-snippet/ai-assistview/speech/speech-configuration/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/speech/speech-configuration/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript AI AssistView Control - Speech Configuration" />
     <meta name="author" content="Syncfusion" />
     <link href="../index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/speech-events/js/index.html b/ej2-javascript/code-snippet/ai-assistview/speech/speech-events/js/index.html
index c7e2758e3..7f2f06679 100644
--- a/ej2-javascript/code-snippet/ai-assistview/speech/speech-events/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/speech/speech-events/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="JavaScript AI AssistView Control - Speech Events" />
     <meta name="author" content="Syncfusion" />
     <link href="../index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/speech-events/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/speech/speech-events/ts/index.html
index eb7f20495..8073f8358 100644
--- a/ej2-javascript/code-snippet/ai-assistview/speech/speech-events/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/speech/speech-events/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript AI AssistView Control - Speech Events" />
     <meta name="author" content="Syncfusion" />
     <link href="../index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/stt/js/index.html b/ej2-javascript/code-snippet/ai-assistview/speech/stt/js/index.html
index 78c38ffd0..6839e07f6 100644
--- a/ej2-javascript/code-snippet/ai-assistview/speech/stt/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/speech/stt/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/stt/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/speech/stt/ts/index.html
index ac6a6640f..fb51a7d0e 100644
--- a/ej2-javascript/code-snippet/ai-assistview/speech/stt/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/speech/stt/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/tooltip-settings/js/index.html b/ej2-javascript/code-snippet/ai-assistview/speech/tooltip-settings/js/index.html
index 29d7892df..c8544bcc8 100644
--- a/ej2-javascript/code-snippet/ai-assistview/speech/tooltip-settings/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/speech/tooltip-settings/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="JavaScript AI AssistView Control - Tooltip Settings" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/tooltip-settings/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/speech/tooltip-settings/ts/index.html
index f3f0e157e..3d1adb9a8 100644
--- a/ej2-javascript/code-snippet/ai-assistview/speech/tooltip-settings/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/speech/tooltip-settings/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript AI AssistView Control - Tooltip Settings" />
     <meta name="author" content="Syncfusion" />
     <link href="../index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/tts/js/index.html b/ej2-javascript/code-snippet/ai-assistview/speech/tts/js/index.html
index f976c8364..4eeb9ef92 100644
--- a/ej2-javascript/code-snippet/ai-assistview/speech/tts/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/speech/tts/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/tts/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/speech/tts/ts/index.html
index 340a4758b..a7923bbb5 100644
--- a/ej2-javascript/code-snippet/ai-assistview/speech/tts/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/speech/tts/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/banner/js/index.html b/ej2-javascript/code-snippet/ai-assistview/templates/banner/js/index.html
index c12751a2e..28da721d2 100644
--- a/ej2-javascript/code-snippet/ai-assistview/templates/banner/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/templates/banner/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/banner/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/templates/banner/ts/index.html
index 20758c807..efa2598f9 100644
--- a/ej2-javascript/code-snippet/ai-assistview/templates/banner/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/templates/banner/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/footer-template/js/index.html b/ej2-javascript/code-snippet/ai-assistview/templates/footer-template/js/index.html
index b3f467ca0..a3eb0fc63 100644
--- a/ej2-javascript/code-snippet/ai-assistview/templates/footer-template/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/templates/footer-template/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/footer-template/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/templates/footer-template/ts/index.html
index dcaea11d3..4de060254 100644
--- a/ej2-javascript/code-snippet/ai-assistview/templates/footer-template/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/templates/footer-template/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/prompt-item/js/index.html b/ej2-javascript/code-snippet/ai-assistview/templates/prompt-item/js/index.html
index 8eb8cc229..ccf4d82da 100644
--- a/ej2-javascript/code-snippet/ai-assistview/templates/prompt-item/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/templates/prompt-item/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/prompt-item/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/templates/prompt-item/ts/index.html
index fb0365d3f..44a735de5 100644
--- a/ej2-javascript/code-snippet/ai-assistview/templates/prompt-item/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/templates/prompt-item/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/response-item/js/index.html b/ej2-javascript/code-snippet/ai-assistview/templates/response-item/js/index.html
index 840366e40..59869628b 100644
--- a/ej2-javascript/code-snippet/ai-assistview/templates/response-item/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/templates/response-item/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/response-item/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/templates/response-item/ts/index.html
index 06b06dc21..be4d7a7f0 100644
--- a/ej2-javascript/code-snippet/ai-assistview/templates/response-item/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/templates/response-item/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/suggestions-template/js/index.html b/ej2-javascript/code-snippet/ai-assistview/templates/suggestions-template/js/index.html
index 64deab58e..993590d6e 100644
--- a/ej2-javascript/code-snippet/ai-assistview/templates/suggestions-template/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/templates/suggestions-template/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/suggestions-template/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/templates/suggestions-template/ts/index.html
index b58952544..70841a82e 100644
--- a/ej2-javascript/code-snippet/ai-assistview/templates/suggestions-template/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/templates/suggestions-template/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/align/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/align/js/index.html
index c68e6e557..7314bf313 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/align/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/align/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/align/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/align/ts/index.html
index db13ebadf..22181ea1d 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/align/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/align/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/cssclass/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/cssclass/js/index.html
index a61f73558..f156cca2a 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/cssclass/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/cssclass/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/cssclass/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/cssclass/ts/index.html
index b1135e7f8..415df2ee0 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/cssclass/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/cssclass/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/disabled/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/disabled/js/index.html
index 08aea4992..01e3a99bf 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/disabled/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/disabled/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/disabled/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/disabled/ts/index.html
index ac20102b8..723938e3b 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/disabled/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/disabled/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/js/index.html
index cab4b7ff9..a301f65bb 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/ts/index.html
index 326193404..41b7305d8 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-position/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-position/js/index.html
index c68dd8b5f..37e7e2a29 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-position/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-position/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-position/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-position/ts/index.html
index fc74a997e..6668bad32 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-position/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-position/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-settings/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-settings/js/index.html
index cab4b7ff9..a301f65bb 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-settings/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-settings/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-settings/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-settings/ts/index.html
index 326193404..41b7305d8 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-settings/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-settings/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/item-type/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/item-type/js/index.html
index df83990d7..9a0e30f1f 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/item-type/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/item-type/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/item-type/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/item-type/ts/index.html
index 491496539..53fc84c8b 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/item-type/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/item-type/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/itemclick/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/itemclick/js/index.html
index d4bce65fe..15cebae61 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/itemclick/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/itemclick/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/itemclick/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/itemclick/ts/index.html
index 00356fc3c..c9ff09707 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/itemclick/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/itemclick/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-itemclick/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-itemclick/js/index.html
index 482a1a5ea..243a8257e 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-itemclick/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-itemclick/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-itemclick/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-itemclick/ts/index.html
index a1c0e5700..ce6be2bd6 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-itemclick/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-itemclick/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-settings/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-settings/js/index.html
index d6048b97f..eff4f9c53 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-settings/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-settings/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-settings/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-settings/ts/index.html
index ac2a2fb67..593054def 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-settings/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-settings/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-itemclick/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-itemclick/js/index.html
index 0361a0e99..4ed0614a2 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-itemclick/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-itemclick/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-itemclick/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-itemclick/ts/index.html
index 1ad8af104..12f3d317e 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-itemclick/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-itemclick/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-settings/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-settings/js/index.html
index 3838bbdcb..4c825cedd 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-settings/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-settings/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-settings/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-settings/ts/index.html
index ce259c0bf..cb704cf6b 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-settings/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-settings/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/template/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/template/js/index.html
index 00b053861..5201fb603 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/template/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/template/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/template/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/template/ts/index.html
index 90200818b..4170695c1 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/template/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/template/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/toolbar-text/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/toolbar-text/js/index.html
index 7d850c3c8..9f2e18c3d 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/toolbar-text/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/toolbar-text/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/toolbar-text/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/toolbar-text/ts/index.html
index 67d54ef5a..27c390111 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/toolbar-text/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/toolbar-text/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/tooltip/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/tooltip/js/index.html
index db363708e..9f055f7aa 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/tooltip/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/tooltip/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/tooltip/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/tooltip/ts/index.html
index 91f65ada2..34d486d65 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/tooltip/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/tooltip/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/visible/js/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/visible/js/index.html
index 33920d143..72013479a 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/visible/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/visible/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/visible/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/visible/ts/index.html
index 6c8982fe9..ca28e4499 100644
--- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/visible/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/visible/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/ai-assistview/views/active-view/js/index.html b/ej2-javascript/code-snippet/ai-assistview/views/active-view/js/index.html
index f23c6aaa6..40b9f17cd 100644
--- a/ej2-javascript/code-snippet/ai-assistview/views/active-view/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/views/active-view/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/views/active-view/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/views/active-view/ts/index.html
index 532df29b9..87b43576f 100644
--- a/ej2-javascript/code-snippet/ai-assistview/views/active-view/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/views/active-view/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/ai-assistview/views/type/js/index.html b/ej2-javascript/code-snippet/ai-assistview/views/type/js/index.html
index 7281514ed..1e7b10b09 100644
--- a/ej2-javascript/code-snippet/ai-assistview/views/type/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/views/type/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/views/type/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/views/type/ts/index.html
index bb88d514c..d578fb28d 100644
--- a/ej2-javascript/code-snippet/ai-assistview/views/type/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/views/type/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/ai-assistview/views/view-template/js/index.html b/ej2-javascript/code-snippet/ai-assistview/views/view-template/js/index.html
index 86cc7b5be..16a86d4de 100644
--- a/ej2-javascript/code-snippet/ai-assistview/views/view-template/js/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/views/view-template/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/ai-assistview/views/view-template/ts/index.html b/ej2-javascript/code-snippet/ai-assistview/views/view-template/ts/index.html
index 17c093aef..0211c1b17 100644
--- a/ej2-javascript/code-snippet/ai-assistview/views/view-template/ts/index.html
+++ b/ej2-javascript/code-snippet/ai-assistview/views/view-template/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chart/chart-types-cs474/index.ts b/ej2-javascript/code-snippet/chart/chart-types-cs474/index.ts
index 55cc3d6d1..2098af78a 100644
--- a/ej2-javascript/code-snippet/chart/chart-types-cs474/index.ts
+++ b/ej2-javascript/code-snippet/chart/chart-types-cs474/index.ts
@@ -1,3 +1,7 @@
+<<<<<<< HEAD
+/* eslint-disable @typescript-eslint/tslint/config */
+=======
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 import {
     AccumulationChart, AccumulationDataLabel, AccumulationLegend,
     AccumulationTooltip, PieSeries, IAccLegendRenderEventArgs
@@ -6,7 +10,11 @@ import {
 AccumulationChart.Inject(AccumulationDataLabel, AccumulationLegend, AccumulationTooltip, PieSeries);
 
 
+<<<<<<< HEAD
+const StatisticsDetails:any = [
+=======
 const StatisticsDetails= [
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
     { Browser: 'Chrome', Users: 37, Color: '#a16ee5' },
     { Browser: 'UC Browser', Users: 17, Color: '#f7ce69' },
     { Browser: 'iPhone', Users: 19, Color: '#55a5c2' },
@@ -50,10 +58,15 @@ const chart = new AccumulationChart({
     }],
 
     legendRender: (args: IAccLegendRenderEventArgs) => {
+<<<<<<< HEAD
+        const points = (chart.series[0] as any).points;
+        const pt = points.find((p: any) => p.x === args.text);
+=======
         const points = (chart.series[0]).points;
         const pt = points.find(
             (p: { x: string | number | Date; y: number }) => p.x === args.text
         );
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 
         args.template = args.template
 
@@ -62,4 +75,8 @@ const chart = new AccumulationChart({
     }
 });
 
-chart.appendTo('#container');
\ No newline at end of file
+<<<<<<< HEAD
+chart.appendTo('#container');
+=======
+chart.appendTo('#container');
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
diff --git a/ej2-javascript/code-snippet/chat-ui/ai-integrations/gemini/js/index.html b/ej2-javascript/code-snippet/chat-ui/ai-integrations/gemini/js/index.html
index 0ea59c660..9baa99d5b 100644
--- a/ej2-javascript/code-snippet/chat-ui/ai-integrations/gemini/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/ai-integrations/gemini/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/ai-integrations/gemini/ts/index.html b/ej2-javascript/code-snippet/chat-ui/ai-integrations/gemini/ts/index.html
index 9d257ceab..253f38c2d 100644
--- a/ej2-javascript/code-snippet/chat-ui/ai-integrations/gemini/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/ai-integrations/gemini/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/ai-integrations/openai/js/index.html b/ej2-javascript/code-snippet/chat-ui/ai-integrations/openai/js/index.html
index 976bce1e8..1610db74a 100644
--- a/ej2-javascript/code-snippet/chat-ui/ai-integrations/openai/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/ai-integrations/openai/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/ai-integrations/openai/ts/index.html b/ej2-javascript/code-snippet/chat-ui/ai-integrations/openai/ts/index.html
index e29e9f2aa..e4505ec85 100644
--- a/ej2-javascript/code-snippet/chat-ui/ai-integrations/openai/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/ai-integrations/openai/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/appearance/cssClass/js/index.html b/ej2-javascript/code-snippet/chat-ui/appearance/cssClass/js/index.html
index c19ffc5ac..df869b42b 100644
--- a/ej2-javascript/code-snippet/chat-ui/appearance/cssClass/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/appearance/cssClass/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/appearance/cssClass/ts/index.html b/ej2-javascript/code-snippet/chat-ui/appearance/cssClass/ts/index.html
index e8a28c28b..2ffbc8a21 100644
--- a/ej2-javascript/code-snippet/chat-ui/appearance/cssClass/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/appearance/cssClass/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/appearance/height/js/index.html b/ej2-javascript/code-snippet/chat-ui/appearance/height/js/index.html
index 8ef186566..5d7a32759 100644
--- a/ej2-javascript/code-snippet/chat-ui/appearance/height/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/appearance/height/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/appearance/height/ts/index.html b/ej2-javascript/code-snippet/chat-ui/appearance/height/ts/index.html
index 74069de09..a63a8ab7a 100644
--- a/ej2-javascript/code-snippet/chat-ui/appearance/height/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/appearance/height/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/appearance/placeholder/js/index.html b/ej2-javascript/code-snippet/chat-ui/appearance/placeholder/js/index.html
index a941c5b19..d6c26891c 100644
--- a/ej2-javascript/code-snippet/chat-ui/appearance/placeholder/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/appearance/placeholder/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/appearance/placeholder/ts/index.html b/ej2-javascript/code-snippet/chat-ui/appearance/placeholder/ts/index.html
index 591236ad1..b3b8efb99 100644
--- a/ej2-javascript/code-snippet/chat-ui/appearance/placeholder/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/appearance/placeholder/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/appearance/width/js/index.html b/ej2-javascript/code-snippet/chat-ui/appearance/width/js/index.html
index 740682007..bd0fa1e70 100644
--- a/ej2-javascript/code-snippet/chat-ui/appearance/width/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/appearance/width/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/appearance/width/ts/index.html b/ej2-javascript/code-snippet/chat-ui/appearance/width/ts/index.html
index 8e845ef16..57c6bde2f 100644
--- a/ej2-javascript/code-snippet/chat-ui/appearance/width/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/appearance/width/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/bot-framework/js/index.html b/ej2-javascript/code-snippet/chat-ui/bot-framework/js/index.html
index 6056c3848..408944cb8 100644
--- a/ej2-javascript/code-snippet/chat-ui/bot-framework/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/bot-framework/js/index.html
@@ -5,15 +5,15 @@
                 
     <title>JavaScript (ES5) Chat UI</title>
     <!-- JavaScript (ES5) Chat UI's dependency style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Chat UI control style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Chat UI's dependent scripts -->
     <script src="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/bot-framework/ts/index.html b/ej2-javascript/code-snippet/chat-ui/bot-framework/ts/index.html
index 63ec01ac8..1b2f51e54 100644
--- a/ej2-javascript/code-snippet/chat-ui/bot-framework/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/bot-framework/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/default-messages/js/index.html b/ej2-javascript/code-snippet/chat-ui/default-messages/js/index.html
index fd9dc429e..2e19b0e01 100644
--- a/ej2-javascript/code-snippet/chat-ui/default-messages/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/default-messages/js/index.html
@@ -5,15 +5,15 @@
                 
     <title>JavaScript (ES5) Chat UI</title>
     <!-- JavaScript (ES5) Chat UI's dependency style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Chat UI control style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Chat UI's dependent scripts -->
     <script src="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/default-messages/ts/index.html b/ej2-javascript/code-snippet/chat-ui/default-messages/ts/index.html
index fbe946a28..a26761b90 100644
--- a/ej2-javascript/code-snippet/chat-ui/default-messages/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/default-messages/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/dialogflow/js/index.html b/ej2-javascript/code-snippet/chat-ui/dialogflow/js/index.html
index 6056c3848..408944cb8 100644
--- a/ej2-javascript/code-snippet/chat-ui/dialogflow/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/dialogflow/js/index.html
@@ -5,15 +5,15 @@
                 
     <title>JavaScript (ES5) Chat UI</title>
     <!-- JavaScript (ES5) Chat UI's dependency style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Chat UI control style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Chat UI's dependent scripts -->
     <script src="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/dialogflow/ts/index.html b/ej2-javascript/code-snippet/chat-ui/dialogflow/ts/index.html
index 8af828b06..786098091 100644
--- a/ej2-javascript/code-snippet/chat-ui/dialogflow/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/dialogflow/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/attachment-click/js/index.html b/ej2-javascript/code-snippet/chat-ui/events/attachment-click/js/index.html
index 39246872c..58102f670 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/attachment-click/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/attachment-click/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/attachment-click/ts/index.html b/ej2-javascript/code-snippet/chat-ui/events/attachment-click/ts/index.html
index d4f27badd..dbfbdd42b 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/attachment-click/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/attachment-click/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/attachment-failure/js/index.html b/ej2-javascript/code-snippet/chat-ui/events/attachment-failure/js/index.html
index 657ebfae0..6e0500aa0 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/attachment-failure/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/attachment-failure/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/attachment-failure/ts/index.html b/ej2-javascript/code-snippet/chat-ui/events/attachment-failure/ts/index.html
index 952277cd9..83a89efa2 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/attachment-failure/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/attachment-failure/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/attachment-removed/js/index.html b/ej2-javascript/code-snippet/chat-ui/events/attachment-removed/js/index.html
index c130cb6a2..aaf93f8c4 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/attachment-removed/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/attachment-removed/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/attachment-removed/ts/index.html b/ej2-javascript/code-snippet/chat-ui/events/attachment-removed/ts/index.html
index 422267245..75a765001 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/attachment-removed/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/attachment-removed/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/attachment-success/js/index.html b/ej2-javascript/code-snippet/chat-ui/events/attachment-success/js/index.html
index 84f110cfe..8620f93a5 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/attachment-success/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/attachment-success/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/attachment-success/ts/index.html b/ej2-javascript/code-snippet/chat-ui/events/attachment-success/ts/index.html
index 3af92e3d0..d9f39ef77 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/attachment-success/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/attachment-success/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/before-attachment/js/index.html b/ej2-javascript/code-snippet/chat-ui/events/before-attachment/js/index.html
index 10b3e303f..f4cb2c2af 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/before-attachment/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/before-attachment/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/before-attachment/ts/index.html b/ej2-javascript/code-snippet/chat-ui/events/before-attachment/ts/index.html
index e13ba4359..099542a47 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/before-attachment/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/before-attachment/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/created/js/index.html b/ej2-javascript/code-snippet/chat-ui/events/created/js/index.html
index d37191454..5d4f08c28 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/created/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/created/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/created/ts/index.html b/ej2-javascript/code-snippet/chat-ui/events/created/ts/index.html
index 1d60f6e93..708432160 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/created/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/created/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/messageSend/js/index.html b/ej2-javascript/code-snippet/chat-ui/events/messageSend/js/index.html
index 36db1c2ef..6f868ef15 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/messageSend/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/messageSend/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/messageSend/ts/index.html b/ej2-javascript/code-snippet/chat-ui/events/messageSend/ts/index.html
index 7eb1aa472..06560a38e 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/messageSend/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/messageSend/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/userTyping/js/index.html b/ej2-javascript/code-snippet/chat-ui/events/userTyping/js/index.html
index 40e1ca160..d56a1c447 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/userTyping/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/userTyping/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/events/userTyping/ts/index.html b/ej2-javascript/code-snippet/chat-ui/events/userTyping/ts/index.html
index 5aa0b1dcc..a8a507337 100644
--- a/ej2-javascript/code-snippet/chat-ui/events/userTyping/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/events/userTyping/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/allowedFileTypes/js/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/allowedFileTypes/js/index.html
index 80ad3cc4d..7ae82b87b 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/allowedFileTypes/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/allowedFileTypes/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/allowedFileTypes/ts/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/allowedFileTypes/ts/index.html
index 553cc052a..e60216825 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/allowedFileTypes/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/allowedFileTypes/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/drag-and-drop/js/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/drag-and-drop/js/index.html
index 3bab5265a..c4b1b2689 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/drag-and-drop/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/drag-and-drop/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/drag-and-drop/ts/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/drag-and-drop/ts/index.html
index 0d36e52f9..3f4a98d45 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/drag-and-drop/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/drag-and-drop/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/enableAttachments/js/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/enableAttachments/js/index.html
index 3baf4eae2..f5f06597b 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/enableAttachments/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/enableAttachments/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/enableAttachments/ts/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/enableAttachments/ts/index.html
index 752c21214..82424204d 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/enableAttachments/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/enableAttachments/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/maxFileSIze/js/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/maxFileSIze/js/index.html
index 540646bb3..6ee4bcf5a 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/maxFileSIze/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/maxFileSIze/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/maxFileSIze/ts/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/maxFileSIze/ts/index.html
index ac6116d61..293ca62a1 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/maxFileSIze/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/maxFileSIze/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/maximumCount/js/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/maximumCount/js/index.html
index 5d32fa880..b62383103 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/maximumCount/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/maximumCount/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/maximumCount/ts/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/maximumCount/ts/index.html
index b75fb42cf..611fcff71 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/maximumCount/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/maximumCount/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/path/js/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/path/js/index.html
index 6d4592087..7b1ba4c07 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/path/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/path/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/path/ts/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/path/ts/index.html
index 304f41d07..72acd4fd6 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/path/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/path/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/save-remove-url/js/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/save-remove-url/js/index.html
index 624eb8296..6323c3332 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/save-remove-url/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/save-remove-url/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/save-remove-url/ts/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/save-remove-url/ts/index.html
index 1c1b5a847..af4a2f4aa 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/save-remove-url/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/save-remove-url/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/saveFormat/js/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/saveFormat/js/index.html
index 5a6a64bbb..570149b56 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/saveFormat/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/saveFormat/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/saveFormat/ts/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/saveFormat/ts/index.html
index 277cf9d7b..6f718eb4c 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/saveFormat/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/saveFormat/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/template/js/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/template/js/index.html
index daf56002f..a33900103 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/template/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/template/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/file-attachments/template/ts/index.html b/ej2-javascript/code-snippet/chat-ui/file-attachments/template/ts/index.html
index fa8dbb9f5..43bb098dc 100644
--- a/ej2-javascript/code-snippet/chat-ui/file-attachments/template/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/file-attachments/template/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/footer/showFooter/js/index.html b/ej2-javascript/code-snippet/chat-ui/footer/showFooter/js/index.html
index 2f1e3c822..fd3b0be05 100644
--- a/ej2-javascript/code-snippet/chat-ui/footer/showFooter/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/footer/showFooter/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/footer/showFooter/ts/index.html b/ej2-javascript/code-snippet/chat-ui/footer/showFooter/ts/index.html
index 3ef3ebd0f..ad9d32142 100644
--- a/ej2-javascript/code-snippet/chat-ui/footer/showFooter/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/footer/showFooter/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/getting-started/js/index.html b/ej2-javascript/code-snippet/chat-ui/getting-started/js/index.html
index 70465347b..ccc83be86 100644
--- a/ej2-javascript/code-snippet/chat-ui/getting-started/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/getting-started/js/index.html
@@ -5,14 +5,14 @@
                 
     <title>JavaScript (ES5) Chat UI</title>
     <!-- JavaScript (ES5) Chat UI's dependency style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Chat UI control style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Chat UI's dependent scripts -->
     <script src="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/getting-started/ts/index.html b/ej2-javascript/code-snippet/chat-ui/getting-started/ts/index.html
index c1194e2ac..a7675dd61 100644
--- a/ej2-javascript/code-snippet/chat-ui/getting-started/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/getting-started/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/globalization/enableRtl/js/index.html b/ej2-javascript/code-snippet/chat-ui/globalization/enableRtl/js/index.html
index 40a3b2ff5..7853513a8 100644
--- a/ej2-javascript/code-snippet/chat-ui/globalization/enableRtl/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/globalization/enableRtl/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/globalization/enableRtl/ts/index.html b/ej2-javascript/code-snippet/chat-ui/globalization/enableRtl/ts/index.html
index 05c05f8b9..635fecae2 100644
--- a/ej2-javascript/code-snippet/chat-ui/globalization/enableRtl/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/globalization/enableRtl/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/globalization/localization/js/index.html b/ej2-javascript/code-snippet/chat-ui/globalization/localization/js/index.html
index 7bd672d87..3e3a30902 100644
--- a/ej2-javascript/code-snippet/chat-ui/globalization/localization/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/globalization/localization/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/globalization/localization/ts/index.html b/ej2-javascript/code-snippet/chat-ui/globalization/localization/ts/index.html
index 65d9d674c..52c69efce 100644
--- a/ej2-javascript/code-snippet/chat-ui/globalization/localization/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/globalization/localization/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/align/js/index.html b/ej2-javascript/code-snippet/chat-ui/header/align/js/index.html
index 60e29b463..596e5db32 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/align/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/align/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/align/ts/index.html b/ej2-javascript/code-snippet/chat-ui/header/align/ts/index.html
index d87f4ede1..d14a44bd7 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/align/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/align/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/cssClass/js/index.html b/ej2-javascript/code-snippet/chat-ui/header/cssClass/js/index.html
index 554201f63..008e8bd45 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/cssClass/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/cssClass/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/cssClass/ts/index.html b/ej2-javascript/code-snippet/chat-ui/header/cssClass/ts/index.html
index ca3eb4f8c..c88e64863 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/cssClass/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/cssClass/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/disable/js/index.html b/ej2-javascript/code-snippet/chat-ui/header/disable/js/index.html
index 7294871a4..02ddfee6c 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/disable/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/disable/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/disable/ts/index.html b/ej2-javascript/code-snippet/chat-ui/header/disable/ts/index.html
index 1dff514eb..5eaac1ff7 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/disable/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/disable/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/header-icon/js/index.html b/ej2-javascript/code-snippet/chat-ui/header/header-icon/js/index.html
index 605b62ab1..083eb8fab 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/header-icon/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/header-icon/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/header-icon/ts/index.html b/ej2-javascript/code-snippet/chat-ui/header/header-icon/ts/index.html
index 42dfdf7d8..a711b189f 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/header-icon/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/header-icon/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/header-text/js/index.html b/ej2-javascript/code-snippet/chat-ui/header/header-text/js/index.html
index 7f55ca3ac..f4ac5e0ca 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/header-text/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/header-text/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/header-text/ts/index.html b/ej2-javascript/code-snippet/chat-ui/header/header-text/ts/index.html
index 4b573435d..2dc1169b4 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/header-text/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/header-text/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/iconCss/js/index.html b/ej2-javascript/code-snippet/chat-ui/header/iconCss/js/index.html
index 79255cd5e..0adfcb4e3 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/iconCss/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/iconCss/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/iconCss/ts/index.html b/ej2-javascript/code-snippet/chat-ui/header/iconCss/ts/index.html
index b1ea1d589..984f7f097 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/iconCss/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/iconCss/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/itemClick/js/index.html b/ej2-javascript/code-snippet/chat-ui/header/itemClick/js/index.html
index c2dc5d8b4..f829a1fd2 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/itemClick/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/itemClick/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/itemClick/ts/index.html b/ej2-javascript/code-snippet/chat-ui/header/itemClick/ts/index.html
index 4f02bb8c9..b6c62e15f 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/itemClick/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/itemClick/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/itemType/js/index.html b/ej2-javascript/code-snippet/chat-ui/header/itemType/js/index.html
index e51729c8e..13b7d28a7 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/itemType/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/itemType/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/itemType/ts/index.html b/ej2-javascript/code-snippet/chat-ui/header/itemType/ts/index.html
index af433735a..fcc13facd 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/itemType/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/itemType/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/show-header/js/index.html b/ej2-javascript/code-snippet/chat-ui/header/show-header/js/index.html
index 79579ab96..6f1b0240f 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/show-header/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/show-header/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/show-header/ts/index.html b/ej2-javascript/code-snippet/chat-ui/header/show-header/ts/index.html
index 31eba94f0..8793eacd5 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/show-header/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/show-header/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/template/js/index.html b/ej2-javascript/code-snippet/chat-ui/header/template/js/index.html
index 7bb6e31ff..e0df6f736 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/template/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/template/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/template/ts/index.html b/ej2-javascript/code-snippet/chat-ui/header/template/ts/index.html
index 8bd4eac81..7389bacb2 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/template/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/template/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/text/js/index.html b/ej2-javascript/code-snippet/chat-ui/header/text/js/index.html
index c2a86929d..3faea3560 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/text/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/text/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/text/ts/index.html b/ej2-javascript/code-snippet/chat-ui/header/text/ts/index.html
index 8595dd7df..085dd062d 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/text/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/text/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/tooltip/js/index.html b/ej2-javascript/code-snippet/chat-ui/header/tooltip/js/index.html
index 3bc3ea5e5..26c06dba3 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/tooltip/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/tooltip/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/tooltip/ts/index.html b/ej2-javascript/code-snippet/chat-ui/header/tooltip/ts/index.html
index 20cb7dc0c..4eaf16454 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/tooltip/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/tooltip/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/visible/js/index.html b/ej2-javascript/code-snippet/chat-ui/header/visible/js/index.html
index 2707c8144..55432f07f 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/visible/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/visible/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/header/visible/ts/index.html b/ej2-javascript/code-snippet/chat-ui/header/visible/ts/index.html
index b54a7f001..d0a9c9a1e 100644
--- a/ej2-javascript/code-snippet/chat-ui/header/visible/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/header/visible/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/load-on-demand/js/index.html b/ej2-javascript/code-snippet/chat-ui/load-on-demand/js/index.html
index b25ec1050..e10d297ca 100644
--- a/ej2-javascript/code-snippet/chat-ui/load-on-demand/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/load-on-demand/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/load-on-demand/ts/index.html b/ej2-javascript/code-snippet/chat-ui/load-on-demand/ts/index.html
index 4247035c1..0cd451ade 100644
--- a/ej2-javascript/code-snippet/chat-ui/load-on-demand/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/load-on-demand/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/mention/mention-message/js/index.html b/ej2-javascript/code-snippet/chat-ui/mention/mention-message/js/index.html
index b116e25a5..214ffce03 100644
--- a/ej2-javascript/code-snippet/chat-ui/mention/mention-message/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/mention/mention-message/js/index.html
@@ -5,15 +5,15 @@
                 
     <title>JavaScript (ES5) Chat UI</title>
     <!-- JavaScript (ES5) Chat UI's dependency style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Chat UI control style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Chat UI's dependent scripts -->
     <script src="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/mention/mention-message/ts/index.html b/ej2-javascript/code-snippet/chat-ui/mention/mention-message/ts/index.html
index 35ea80339..b3dcccb9a 100644
--- a/ej2-javascript/code-snippet/chat-ui/mention/mention-message/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/mention/mention-message/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/mention/mention-select/js/index.html b/ej2-javascript/code-snippet/chat-ui/mention/mention-select/js/index.html
index c663cbd89..9f7ff2701 100644
--- a/ej2-javascript/code-snippet/chat-ui/mention/mention-select/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/mention/mention-select/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/mention/mention-select/ts/index.html b/ej2-javascript/code-snippet/chat-ui/mention/mention-select/ts/index.html
index e09acabd8..329559798 100644
--- a/ej2-javascript/code-snippet/chat-ui/mention/mention-select/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/mention/mention-select/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/mention/mention-trigger/js/index.html b/ej2-javascript/code-snippet/chat-ui/mention/mention-trigger/js/index.html
index b1f6143e4..44f042879 100644
--- a/ej2-javascript/code-snippet/chat-ui/mention/mention-trigger/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/mention/mention-trigger/js/index.html
@@ -5,15 +5,15 @@
                 
     <title>JavaScript (ES5) Chat UI</title>
     <!-- JavaScript (ES5) Chat UI's dependency style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Chat UI control style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Chat UI's dependent scripts -->
     <script src="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/mention/mention-trigger/ts/index.html b/ej2-javascript/code-snippet/chat-ui/mention/mention-trigger/ts/index.html
index 8c6f4eee8..3aaeeceb3 100644
--- a/ej2-javascript/code-snippet/chat-ui/mention/mention-trigger/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/mention/mention-trigger/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
         <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/mention/mention-user/js/index.html b/ej2-javascript/code-snippet/chat-ui/mention/mention-user/js/index.html
index 1bdafcd5e..2c93172a3 100644
--- a/ej2-javascript/code-snippet/chat-ui/mention/mention-user/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/mention/mention-user/js/index.html
@@ -5,15 +5,15 @@
                 
     <title>JavaScript (ES5) Chat UI</title>
     <!-- JavaScript (ES5) Chat UI's dependency style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Chat UI control style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Chat UI's dependent scripts -->
     <script src="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/mention/mention-user/ts/index.html b/ej2-javascript/code-snippet/chat-ui/mention/mention-user/ts/index.html
index 0aa7d1f85..03650373f 100644
--- a/ej2-javascript/code-snippet/chat-ui/mention/mention-user/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/mention/mention-user/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/autoScroll/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/autoScroll/js/index.html
index 4774e99c5..32d3cacb6 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/autoScroll/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/autoScroll/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/autoScroll/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/autoScroll/ts/index.html
index f2bba88f4..cee6ac5f2 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/autoScroll/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/autoScroll/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/avatar-bgColor/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/avatar-bgColor/js/index.html
index 13fb91a3f..188a2d70d 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/avatar-bgColor/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/avatar-bgColor/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/avatar-bgColor/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/avatar-bgColor/ts/index.html
index 671f6edec..33a249a42 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/avatar-bgColor/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/avatar-bgColor/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/avatar-url/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/avatar-url/js/index.html
index f88ef19be..191322401 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/avatar-url/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/avatar-url/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/avatar-url/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/avatar-url/ts/index.html
index 51fed5ea9..d8c437eaf 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/avatar-url/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/avatar-url/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/compactmode/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/compactmode/js/index.html
index c6fd728aa..a34438c34 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/compactmode/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/compactmode/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/compactmode/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/compactmode/ts/index.html
index d5cca747b..cb888f143 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/compactmode/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/compactmode/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/cssClass/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/cssClass/js/index.html
index 9e3f0cdf1..135b1c302 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/cssClass/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/cssClass/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/cssClass/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/cssClass/ts/index.html
index fe163ba25..85ea355cc 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/cssClass/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/cssClass/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/forwarded/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/forwarded/js/index.html
index e062b5e5b..1729676ee 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/forwarded/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/forwarded/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/forwarded/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/forwarded/ts/index.html
index 1c6b15689..e86f3a9dd 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/forwarded/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/forwarded/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/iconCss/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/iconCss/js/index.html
index 6130228e7..0b19f2cb8 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/iconCss/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/iconCss/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/iconCss/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/iconCss/ts/index.html
index b35316718..a58f6452b 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/iconCss/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/iconCss/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/itemclicked/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/itemclicked/js/index.html
index 9bd9d1962..d2d8c4fca 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/itemclicked/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/itemclicked/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/itemclicked/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/itemclicked/ts/index.html
index 294321c4e..33d840627 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/itemclicked/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/itemclicked/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/items/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/items/js/index.html
index 39249b96c..a3347567f 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/items/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/items/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/items/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/items/ts/index.html
index a7d99bec0..252bf4078 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/items/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/items/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/markdown/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/markdown/js/index.html
index 2a73a66d7..cfac64d52 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/markdown/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/markdown/js/index.html
@@ -8,31 +8,31 @@
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
     <link
-      href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css"
+      href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/tailwind3.css"
       rel="stylesheet"
     />
     <link
-      href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css"
+      href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/tailwind3.css"
       rel="stylesheet"
     />
     <link
-      href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css"
+      href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/tailwind3.css"
       rel="stylesheet"
     />
     <link
-      href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-navigations/styles/material.css"
+      href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-navigations/styles/tailwind3.css"
       rel="stylesheet"
     />
     <link
-      href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css"
+      href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/tailwind3.css"
       rel="stylesheet"
     />
     <link
-      href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-interactive-chat/styles/material.css"
+      href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-interactive-chat/styles/tailwind3.css"
       rel="stylesheet"
     />
     <link
-      href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-splitbuttons/styles/material.css"
+      href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-splitbuttons/styles/tailwind3.css"
       rel="stylesheet"
     />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/markdown/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/markdown/ts/index.html
index aab734c7f..d98aa0f80 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/markdown/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/markdown/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/26.2.4/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/26.2.4/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.10/dist/purify.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/pinned/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/pinned/js/index.html
index c5d8d27e1..8ec14f60b 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/pinned/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/pinned/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/pinned/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/pinned/ts/index.html
index dd4c190d0..4c953cdcb 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/pinned/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/pinned/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/replyTo/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/replyTo/js/index.html
index 758dad50f..adbb9f8f2 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/replyTo/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/replyTo/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/replyTo/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/replyTo/ts/index.html
index ccf9bca68..873b353fe 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/replyTo/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/replyTo/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/showTimeStamp/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/showTimeStamp/js/index.html
index 3590e1ae1..ea72fd6f6 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/showTimeStamp/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/showTimeStamp/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/showTimeStamp/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/showTimeStamp/ts/index.html
index cb57bccdd..40f1a2b98 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/showTimeStamp/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/showTimeStamp/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/statusicon/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/statusicon/js/index.html
index f1892016c..b6e32470a 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/statusicon/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/statusicon/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/statusicon/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/statusicon/ts/index.html
index d86c47e0c..76c95aea7 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/statusicon/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/statusicon/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/suggestions/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/suggestions/js/index.html
index 877010675..80665ac8f 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/suggestions/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/suggestions/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/suggestions/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/suggestions/ts/index.html
index a0c2e8412..c97f886bf 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/suggestions/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/suggestions/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/text/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/text/js/index.html
index c11344444..f67c09852 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/text/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/text/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/text/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/text/ts/index.html
index a214d7ab9..cfb66cdb4 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/text/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/text/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/timeStampFormat/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/timeStampFormat/js/index.html
index 049fd7fb1..9e6e804c0 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/timeStampFormat/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/timeStampFormat/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/timeStampFormat/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/timeStampFormat/ts/index.html
index acdcf0d08..504111dce 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/timeStampFormat/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/timeStampFormat/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/tooltip/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/tooltip/js/index.html
index b6c0e10ea..59f81648f 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/tooltip/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/tooltip/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/tooltip/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/tooltip/ts/index.html
index 795c3495d..5e25b62b0 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/tooltip/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/tooltip/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/width/js/index.html b/ej2-javascript/code-snippet/chat-ui/messages/width/js/index.html
index e57e3493f..5aef9ada5 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/width/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/width/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/messages/width/ts/index.html b/ej2-javascript/code-snippet/chat-ui/messages/width/ts/index.html
index cdba095a0..74507487b 100644
--- a/ej2-javascript/code-snippet/chat-ui/messages/width/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/messages/width/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/methods/addMessageModel/js/index.html b/ej2-javascript/code-snippet/chat-ui/methods/addMessageModel/js/index.html
index 2b8fa4309..67385285b 100644
--- a/ej2-javascript/code-snippet/chat-ui/methods/addMessageModel/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/methods/addMessageModel/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/methods/addMessageModel/ts/index.html b/ej2-javascript/code-snippet/chat-ui/methods/addMessageModel/ts/index.html
index bfa1e4d88..6581db682 100644
--- a/ej2-javascript/code-snippet/chat-ui/methods/addMessageModel/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/methods/addMessageModel/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/methods/addString/js/index.html b/ej2-javascript/code-snippet/chat-ui/methods/addString/js/index.html
index 48151ce1a..b21157112 100644
--- a/ej2-javascript/code-snippet/chat-ui/methods/addString/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/methods/addString/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/methods/addString/ts/index.html b/ej2-javascript/code-snippet/chat-ui/methods/addString/ts/index.html
index 6eaeed3c2..a2b978fcd 100644
--- a/ej2-javascript/code-snippet/chat-ui/methods/addString/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/methods/addString/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/methods/editMessage/js/index.html b/ej2-javascript/code-snippet/chat-ui/methods/editMessage/js/index.html
index 25785a0d5..52ca4d1cf 100644
--- a/ej2-javascript/code-snippet/chat-ui/methods/editMessage/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/methods/editMessage/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/methods/editMessage/ts/index.html b/ej2-javascript/code-snippet/chat-ui/methods/editMessage/ts/index.html
index 15d002bff..81a19e07c 100644
--- a/ej2-javascript/code-snippet/chat-ui/methods/editMessage/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/methods/editMessage/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/methods/scrollToBottom/js/index.html b/ej2-javascript/code-snippet/chat-ui/methods/scrollToBottom/js/index.html
index 38336e037..fb55e69ea 100644
--- a/ej2-javascript/code-snippet/chat-ui/methods/scrollToBottom/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/methods/scrollToBottom/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/methods/scrollToBottom/ts/index.html b/ej2-javascript/code-snippet/chat-ui/methods/scrollToBottom/ts/index.html
index b81bb8f4d..0319a1104 100644
--- a/ej2-javascript/code-snippet/chat-ui/methods/scrollToBottom/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/methods/scrollToBottom/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/stt/js/index.html b/ej2-javascript/code-snippet/chat-ui/stt/js/index.html
index d0ea6f47c..d23eee7c0 100644
--- a/ej2-javascript/code-snippet/chat-ui/stt/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/stt/js/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/stt/ts/index.html b/ej2-javascript/code-snippet/chat-ui/stt/ts/index.html
index 77a01893f..421edba32 100644
--- a/ej2-javascript/code-snippet/chat-ui/stt/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/stt/ts/index.html
@@ -8,12 +8,12 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/templates/emptyChatTemplate/js/index.html b/ej2-javascript/code-snippet/chat-ui/templates/emptyChatTemplate/js/index.html
index b6be65f7c..e87a398bc 100644
--- a/ej2-javascript/code-snippet/chat-ui/templates/emptyChatTemplate/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/templates/emptyChatTemplate/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/templates/emptyChatTemplate/ts/index.html b/ej2-javascript/code-snippet/chat-ui/templates/emptyChatTemplate/ts/index.html
index a03f3560c..5a1f28ea8 100644
--- a/ej2-javascript/code-snippet/chat-ui/templates/emptyChatTemplate/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/templates/emptyChatTemplate/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/templates/footerTemplate/js/index.html b/ej2-javascript/code-snippet/chat-ui/templates/footerTemplate/js/index.html
index 3ddd4afde..93a9f7fad 100644
--- a/ej2-javascript/code-snippet/chat-ui/templates/footerTemplate/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/templates/footerTemplate/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/templates/footerTemplate/ts/index.html b/ej2-javascript/code-snippet/chat-ui/templates/footerTemplate/ts/index.html
index be0bceb7e..3912c7525 100644
--- a/ej2-javascript/code-snippet/chat-ui/templates/footerTemplate/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/templates/footerTemplate/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/templates/messageTemplate/js/index.html b/ej2-javascript/code-snippet/chat-ui/templates/messageTemplate/js/index.html
index 0b8b741f7..bf4ed384f 100644
--- a/ej2-javascript/code-snippet/chat-ui/templates/messageTemplate/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/templates/messageTemplate/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/templates/messageTemplate/ts/index.html b/ej2-javascript/code-snippet/chat-ui/templates/messageTemplate/ts/index.html
index 8159c5a00..4aed96967 100644
--- a/ej2-javascript/code-snippet/chat-ui/templates/messageTemplate/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/templates/messageTemplate/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/templates/suggestionTemplate/js/index.html b/ej2-javascript/code-snippet/chat-ui/templates/suggestionTemplate/js/index.html
index 08c7113c1..3c129b48b 100644
--- a/ej2-javascript/code-snippet/chat-ui/templates/suggestionTemplate/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/templates/suggestionTemplate/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/templates/suggestionTemplate/ts/index.html b/ej2-javascript/code-snippet/chat-ui/templates/suggestionTemplate/ts/index.html
index 2125f6fca..63de0770c 100644
--- a/ej2-javascript/code-snippet/chat-ui/templates/suggestionTemplate/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/templates/suggestionTemplate/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/templates/timeBreakTemplate/js/index.html b/ej2-javascript/code-snippet/chat-ui/templates/timeBreakTemplate/js/index.html
index 26bda1866..d404bb899 100644
--- a/ej2-javascript/code-snippet/chat-ui/templates/timeBreakTemplate/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/templates/timeBreakTemplate/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/templates/timeBreakTemplate/ts/index.html b/ej2-javascript/code-snippet/chat-ui/templates/timeBreakTemplate/ts/index.html
index e36eb492d..1c70df754 100644
--- a/ej2-javascript/code-snippet/chat-ui/templates/timeBreakTemplate/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/templates/timeBreakTemplate/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/templates/typingUsersTemplate/js/index.html b/ej2-javascript/code-snippet/chat-ui/templates/typingUsersTemplate/js/index.html
index a3d4e6cce..c3af5a4f2 100644
--- a/ej2-javascript/code-snippet/chat-ui/templates/typingUsersTemplate/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/templates/typingUsersTemplate/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/templates/typingUsersTemplate/ts/index.html b/ej2-javascript/code-snippet/chat-ui/templates/typingUsersTemplate/ts/index.html
index bb012d916..577985712 100644
--- a/ej2-javascript/code-snippet/chat-ui/templates/typingUsersTemplate/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/templates/typingUsersTemplate/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeBreak/js/index.html b/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeBreak/js/index.html
index a7ddc16dc..fd82021ea 100644
--- a/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeBreak/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeBreak/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeBreak/ts/index.html b/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeBreak/ts/index.html
index 9844dc25b..604ca8811 100644
--- a/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeBreak/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeBreak/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeStamp/js/index.html b/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeStamp/js/index.html
index 3590e1ae1..ea72fd6f6 100644
--- a/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeStamp/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeStamp/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeStamp/ts/index.html b/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeStamp/ts/index.html
index cb57bccdd..40f1a2b98 100644
--- a/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeStamp/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/timebreak/showTimeStamp/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/timebreak/timeStampFormat/js/index.html b/ej2-javascript/code-snippet/chat-ui/timebreak/timeStampFormat/js/index.html
index 049fd7fb1..9e6e804c0 100644
--- a/ej2-javascript/code-snippet/chat-ui/timebreak/timeStampFormat/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/timebreak/timeStampFormat/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/timebreak/timeStampFormat/ts/index.html b/ej2-javascript/code-snippet/chat-ui/timebreak/timeStampFormat/ts/index.html
index acdcf0d08..504111dce 100644
--- a/ej2-javascript/code-snippet/chat-ui/timebreak/timeStampFormat/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/timebreak/timeStampFormat/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/chat-ui/typingIndicator/typingUsers/js/index.html b/ej2-javascript/code-snippet/chat-ui/typingIndicator/typingUsers/js/index.html
index 4b94cc650..12fcf6792 100644
--- a/ej2-javascript/code-snippet/chat-ui/typingIndicator/typingUsers/js/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/typingIndicator/typingUsers/js/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/chat-ui/typingIndicator/typingUsers/ts/index.html b/ej2-javascript/code-snippet/chat-ui/typingIndicator/typingUsers/ts/index.html
index fe68a4b53..0f3b4df9b 100644
--- a/ej2-javascript/code-snippet/chat-ui/typingIndicator/typingUsers/ts/index.html
+++ b/ej2-javascript/code-snippet/chat-ui/typingIndicator/typingUsers/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="TypeScript Chat UI Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs18/index.js b/ej2-javascript/code-snippet/data/getting-started-cs18/index.js
index 75588d7ba..fd667ff40 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs18/index.js
+++ b/ej2-javascript/code-snippet/data/getting-started-cs18/index.js
@@ -2,13 +2,13 @@ var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${Employee.Firs
 
 var compiledFunction = ej.base.compile(template);
 
-const SERVICE_URI = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 var table = (document.getElementById('datatable'));
 
 table.innerHTML = '<tr><th>OrderID</th><th>CustomerID</th><th>Employee Name</th></tr>';
 
-new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor })
+new ej.data.DataManager({ url: SERVICE_URL, adaptor: new ej.data.ODataV4Adaptor() })
     .executeQuery(new ej.data.Query().expand('Employee').select(['OrderID', 'CustomerID', 'Employee.FirstName']).take(8))
     .then((e) => {
         (e.result).forEach((data) => {
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs18/index.ts b/ej2-javascript/code-snippet/data/getting-started-cs18/index.ts
index 77e9a7e8f..a4b2a990f 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs18/index.ts
+++ b/ej2-javascript/code-snippet/data/getting-started-cs18/index.ts
@@ -7,13 +7,13 @@ let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${Emplo
 
 let compiledFunction: Function = compile(template);
 
-const SERVICE_URI: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 let table: HTMLElement = (<HTMLElement>document.getElementById('datatable'));
 
 table.innerHTML = '<tr><th>OrderID</th><th>CustomerID</th><th>Employee Name</th></tr>';
 
-new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor })
+new DataManager({ url: SERVICE_URL, adaptor: new ODataV4Adaptor() })
     .executeQuery(new Query().expand('Employee').select(['OrderID', 'CustomerID', 'Employee.FirstName']).take(8))
     .then((e: ReturnOption) => {
         (<Object[]>e.result).forEach((data: Object) => {
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs19/index.js b/ej2-javascript/code-snippet/data/getting-started-cs19/index.js
index f4e1dbc44..7af7d8169 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs19/index.js
+++ b/ej2-javascript/code-snippet/data/getting-started-cs19/index.js
@@ -2,11 +2,11 @@ var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</
 
 var compiledFunction = ej.base.compile(template);
 
-const SERVICE_URI =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 var table = (document.getElementById('datatable'));
 
-new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor })
+new ej.data.DataManager({ url: SERVICE_URL, adaptor: new ej.data.ODataV4Adaptor() })
     .executeQuery(new ej.data.Query().sortBy('CustomerID', 'descending').take(8))
     .then((e) => {
         (e.result).forEach((data) => {
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs19/index.ts b/ej2-javascript/code-snippet/data/getting-started-cs19/index.ts
index 42f9aa040..0eeed8968 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs19/index.ts
+++ b/ej2-javascript/code-snippet/data/getting-started-cs19/index.ts
@@ -7,11 +7,11 @@ let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${Emplo
 
 let compiledFunction: Function = compile(template);
 
-const SERVICE_URI: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 let table: HTMLElement = (<HTMLElement>document.getElementById('datatable'));
 
-new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor })
+new DataManager({ url: SERVICE_URL, adaptor: new ODataV4Adaptor() })
     .executeQuery(new Query().sortBy('CustomerID', 'descending').take(8))
     .then((e: ReturnOption) => {
         (<Object[]>e.result).forEach((data: Object) => {
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs20/index.js b/ej2-javascript/code-snippet/data/getting-started-cs20/index.js
index 4cd3786cc..73741e906 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs20/index.js
+++ b/ej2-javascript/code-snippet/data/getting-started-cs20/index.js
@@ -2,11 +2,11 @@ var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</
 
 var compiledFunction = ej.base.compile(template);
 
-const SERVICE_URI =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 let table = (document.getElementById('datatable'));
 
-new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor })
+new ej.data.DataManager({ url: SERVICE_URL, adaptor: new ej.data.ODataV4Adaptor() })
     .executeQuery(new ej.data.Query().where('EmployeeID', 'equal', 3).take(8))
     .then((e) => {
         (e.result).forEach((data) => {
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs20/index.ts b/ej2-javascript/code-snippet/data/getting-started-cs20/index.ts
index d68b78abf..f2dd14ebb 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs20/index.ts
+++ b/ej2-javascript/code-snippet/data/getting-started-cs20/index.ts
@@ -7,11 +7,11 @@ let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${Emplo
 
 let compiledFunction: Function = compile(template);
 
-const SERVICE_URI: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 let table: HTMLElement = (<HTMLElement>document.getElementById('datatable'));
 
-new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor })
+new DataManager({ url: SERVICE_URL, adaptor: new ODataV4Adaptor() })
     .executeQuery(new Query().where('EmployeeID', 'equal', 3).take(8))
     .then((e: ReturnOption) => {
         (<Object[]>e.result).forEach((data: Object) => {
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs21/index.js b/ej2-javascript/code-snippet/data/getting-started-cs21/index.js
index 3252cfc09..a4eee29d4 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs21/index.js
+++ b/ej2-javascript/code-snippet/data/getting-started-cs21/index.js
@@ -1,16 +1,16 @@
-var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td><td>${ShipCountry}</td></tr>';
+var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';
 
 var compiledFunction = ej.base.compile(template);
 
-const SERVICE_URI =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 let table = (document.getElementById('datatable'));
 
 //Building complex filter criteria using `Predicate`.
 var predicate = new ej.data.Predicate('EmployeeID', 'equal', 3);
-predicate = predicate.and('ShipCountry', 'equal', 'Germany');
+predicate = predicate.or('EmployeeID', 'equal', 2);
 
-new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor })
+new ej.data.DataManager({ url: SERVICE_URL, adaptor: new ej.data.ODataV4Adaptor() })
     .executeQuery(new ej.data.Query().where(predicate).take(8))
     .then((e) => {
         (e.result).forEach((data) => {
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs21/index.ts b/ej2-javascript/code-snippet/data/getting-started-cs21/index.ts
index 696cc2f4a..fcd3e043c 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs21/index.ts
+++ b/ej2-javascript/code-snippet/data/getting-started-cs21/index.ts
@@ -3,19 +3,19 @@
 import { DataManager, Query, ODataV4Adaptor, Predicate, ReturnOption } from '@syncfusion/ej2-data';
 import { compile } from '@syncfusion/ej2-base';
 
-let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td><td>${ShipCountry}</td></tr>';
+let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';
 
 let compiledFunction: Function = compile(template);
 
-const SERVICE_URI: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 let table: HTMLElement = (<HTMLElement>document.getElementById('datatable'));
 
 //Building complex filter criteria using `Predicate`.
 let predicate: Predicate = new Predicate('EmployeeID', 'equal', 3);
-predicate = predicate.and('ShipCountry', 'equal', 'Germany');
+predicate = predicate.or('EmployeeID', 'equal', 2);
 
-new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor })
+new DataManager({ url: SERVICE_URL, adaptor: new ODataV4Adaptor() })
     .executeQuery(new Query().where(predicate).take(8))
     .then((e: ReturnOption) => {
         (<Object[]>e.result).forEach((data: Object) => {
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs21/js/index.html b/ej2-javascript/code-snippet/data/getting-started-cs21/js/index.html
index 75c1b26bd..5d8b17469 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs21/js/index.html
+++ b/ej2-javascript/code-snippet/data/getting-started-cs21/js/index.html
@@ -21,7 +21,7 @@
     <div id="container">
         <table id="datatable" border="1" class="e-table">
             <thead>
-                <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th><th>Ship Country</th></tr>
+                <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
             </thead>
             <tbody>
             </tbody>    
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs21/ts/index.html b/ej2-javascript/code-snippet/data/getting-started-cs21/ts/index.html
index d2437e928..4cf5f87da 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs21/ts/index.html
+++ b/ej2-javascript/code-snippet/data/getting-started-cs21/ts/index.html
@@ -25,7 +25,7 @@
     <div id='container'>
         <table id='datatable' border="1" class='e-table'>
             <thead>
-                <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th><th>Ship Country</th></tr>
+                <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
             </thead>
             <tbody>
             </tbody>    
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs22/datasource.ts b/ej2-javascript/code-snippet/data/getting-started-cs22/datasource.ts
index afaf65670..6b0ceb473 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs22/datasource.ts
+++ b/ej2-javascript/code-snippet/data/getting-started-cs22/datasource.ts
@@ -10,7 +10,7 @@ export let data: Object[] = [
         ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
     },
     {
-        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
+        OrderID: 10250, CustomerID: 'VINCY', EmployeeID: 4, OrderDate: new Date(8367642e5),
         ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
         ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
     },
@@ -35,7 +35,7 @@ export let data: Object[] = [
         ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
     },
     {
-        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
+        OrderID: 10255, CustomerID: 'VINET', EmployeeID: 9, OrderDate: new Date(8371098e5),
         ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
         ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
     },
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs22/es5-datasource.js b/ej2-javascript/code-snippet/data/getting-started-cs22/es5-datasource.js
index 955466c83..6b8babbb7 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs22/es5-datasource.js
+++ b/ej2-javascript/code-snippet/data/getting-started-cs22/es5-datasource.js
@@ -10,7 +10,7 @@ var data = [
         ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
     },
     {
-        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
+        OrderID: 10250, CustomerID: 'VINCY', EmployeeID: 4, OrderDate: new Date(8367642e5),
         ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
         ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
     },
@@ -35,7 +35,7 @@ var data = [
         ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
     },
     {
-        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
+        OrderID: 10255, CustomerID: 'VINET', EmployeeID: 9, OrderDate: new Date(8371098e5),
         ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
         ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
     },
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs23/index.js b/ej2-javascript/code-snippet/data/getting-started-cs23/index.js
index 1d3a26b84..0a9d25b24 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs23/index.js
+++ b/ej2-javascript/code-snippet/data/getting-started-cs23/index.js
@@ -2,12 +2,12 @@ var template = '<tr><td>${field} - ${key}</td><td></td><td></td></tr>${for(item
 
 var compiledFunction = ej.base.compile(template);
 
-const SERVICE_URI =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 var table = (document.getElementById('datatable'));
 
-new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor })
-    .executeQuery(new ej.data.Query().group('CustomerID').take(8))
+new ej.data.DataManager({ url: SERVICE_URL, adaptor: new ej.data.ODataV4Adaptor() })
+    .executeQuery(new ej.data.Query().group('CustomerID').take(12))
     .then((e) => {
         (e.result).forEach((data) => {
             table.appendChild(compiledFunction(data)[0]);
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs23/index.ts b/ej2-javascript/code-snippet/data/getting-started-cs23/index.ts
index cb07e0b83..f38240aca 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs23/index.ts
+++ b/ej2-javascript/code-snippet/data/getting-started-cs23/index.ts
@@ -7,12 +7,12 @@ let template: string = '<tr><td>${field} - ${key}</td><td></td><td></td></tr>${f
 
 let compiledFunction: Function = compile(template);
 
-const SERVICE_URI: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 let table: HTMLElement = (<HTMLElement>document.getElementById('datatable'));
 
-new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor })
-    .executeQuery(new Query().group('CustomerID').take(8))
+new DataManager({ url: SERVICE_URL, adaptor: new ODataV4Adaptor() })
+    .executeQuery(new Query().group('CustomerID').take(12))
     .then((e: ReturnOption) => {
         (<Object[]>e.result).forEach((data: Object) => {
             table.appendChild(compiledFunction(data)[0]);
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs24/index.js b/ej2-javascript/code-snippet/data/getting-started-cs24/index.js
index a37e846ef..36f175ce0 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs24/index.js
+++ b/ej2-javascript/code-snippet/data/getting-started-cs24/index.js
@@ -2,11 +2,11 @@ var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</
 
 var compiledFunction = ej.base.compile(template);
 
-const SERVICE_URI =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 var table = (document.getElementById('datatable'));
 
-new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor })
+new ej.data.DataManager({ url: SERVICE_URL, adaptor: new ej.data.ODataV4Adaptor() })
     .executeQuery(new ej.data.Query().page(2, 8))
     .then((e) => {
         (e.result).forEach((data) => {
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs24/index.ts b/ej2-javascript/code-snippet/data/getting-started-cs24/index.ts
index 45133403d..ae87a3703 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs24/index.ts
+++ b/ej2-javascript/code-snippet/data/getting-started-cs24/index.ts
@@ -7,11 +7,11 @@ let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${Emplo
 
 let compiledFunction: Function = compile(template);
 
-const SERVICE_URI: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 let table: HTMLElement = (<HTMLElement>document.getElementById('datatable'));
 
-new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor })
+new DataManager({ url: SERVICE_URL, adaptor: new ODataV4Adaptor() })
     .executeQuery(new Query().page(2, 8))
     .then((e: ReturnOption) => {
         (<Object[]>e.result).forEach((data: Object) => {
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs25/index.js b/ej2-javascript/code-snippet/data/getting-started-cs25/index.js
index 269cdbe45..66b595fa2 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs25/index.js
+++ b/ej2-javascript/code-snippet/data/getting-started-cs25/index.js
@@ -1,13 +1,13 @@
 var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';
 
 var compiledFunction = ej.base.compile(template);
-var footerFn = ej.base.compile('<tr><td></td><td></td><td>Minimum: ${min}</td></tr>');
+var footerFn = ej.base.compile('<tr><td></td><td></td><td>Min: ${min}</td></tr>');
 
-const SERVICE_URI =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 var table = (document.getElementById('datatable'));
 
-new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor })
+new ej.data.DataManager({ url: SERVICE_URL, adaptor: new ej.data.ODataV4Adaptor() })
     .executeQuery(new ej.data.Query().take(5).requiresCount().aggregate('min', 'EmployeeID'))
     .then((e) => {
         (e.result).forEach((data) => {
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs25/index.ts b/ej2-javascript/code-snippet/data/getting-started-cs25/index.ts
index 916e8fb7f..882a5ff1d 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs25/index.ts
+++ b/ej2-javascript/code-snippet/data/getting-started-cs25/index.ts
@@ -6,13 +6,13 @@ import { compile } from '@syncfusion/ej2-base';
 let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';
 
 let compiledFunction: Function = compile(template);
-let footerFn: Function = compile('<tr><td></td><td></td><td>Minimum: ${min}</td></tr>');
+let footerFn: Function = compile('<tr><td></td><td></td><td>Min: ${min}</td></tr>');
 
-const SERVICE_URI: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 let table: HTMLElement = (<HTMLElement>document.getElementById('datatable'));
 
-new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor })
+new DataManager({ url: SERVICE_URL, adaptor: new ODataV4Adaptor() })
     .executeQuery(new Query().take(5).requiresCount().aggregate('min', 'EmployeeID'))
     .then((e: ReturnOption) => {
         (<Object[]>e.result).forEach((data: Object) => {
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs6/index.js b/ej2-javascript/code-snippet/data/getting-started-cs6/index.js
index dcd196af4..4343ee994 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs6/index.js
+++ b/ej2-javascript/code-snippet/data/getting-started-cs6/index.js
@@ -2,12 +2,12 @@ var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</
 
 var compiledFunction = ej.base.compile(template);
 
-const SERVICE_URI = 'https://services.syncfusion.com/js/production/api/orders';
+const SERVICE_URL = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 var table = (document.getElementById('datatable'));
 
-new ej.data.DataManager({ url: SERVICE_URI }).executeQuery(new ej.data.Query().take(8)).then((e) => {
-    const results = e.result.items;
+new ej.data.DataManager({ url: SERVICE_URL, adaptor: new ej.data.ODataV4Adaptor() }).executeQuery(new ej.data.Query().take(8)).then((e) => {
+    const results = e.result;
     results.forEach((data) => {
         table.appendChild(compiledFunction(data)[0]);
     });
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs6/index.ts b/ej2-javascript/code-snippet/data/getting-started-cs6/index.ts
index 9f929d5c2..43e72253a 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs6/index.ts
+++ b/ej2-javascript/code-snippet/data/getting-started-cs6/index.ts
@@ -1,24 +1,17 @@
-import { DataManager, Query, ReturnOption } from '@syncfusion/ej2-data';
+import { DataManager, ODataV4Adaptor, Query, ReturnOption } from '@syncfusion/ej2-data';
 import { compile } from '@syncfusion/ej2-base';
 
 let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';
 
 let compiledFunction: Function = compile(template);
 
-const SERVICE_URI: string = 'https://services.syncfusion.com/js/production/api/orders';
+const SERVICE_URL: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
-let table: HTMLElement = (<HTMLElement>document.getElementById('datatable'));
+let table: HTMLElement = document.getElementById('datatable') as HTMLElement;
 
-new DataManager({ url: SERVICE_URI }).executeQuery(new Query().take(8)).then((e: ReturnOption) => {
-    const results = (e.result as { items: Order[] }).items;
-    results.forEach((data: Object) => {
+new DataManager({ url: SERVICE_URL, adaptor: new ODataV4Adaptor() }).executeQuery(new Query().take(8)).then((e: ReturnOption) => {
+    (<Object[]>e.result).forEach((data: Object) => {
         table.appendChild(compiledFunction(data)[0]);
     });
 });
 
-interface Order {
-    OrderID: number;
-    CustomerID: string;
-    EmployeeID: number;
-  }
-
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs7/index.js b/ej2-javascript/code-snippet/data/getting-started-cs7/index.js
index bff3861d0..b2dac3a3f 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs7/index.js
+++ b/ej2-javascript/code-snippet/data/getting-started-cs7/index.js
@@ -3,11 +3,11 @@ var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</
 
 var compiledFunction = ej.base.compile(template);
 
-const SERVICE_URI =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/?$top=7';
+const SERVICE_URL =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/?$top=7';
 
 var table = (document.getElementById('datatable'));
 
-var dm = new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor, offline: true });
+var dm = new ej.data.DataManager({ url: SERVICE_URL, adaptor: new ej.data.ODataV4Adaptor(), offline: true });
 
 dm.ready.then((e) => {
         (e.result).forEach((data) => {
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs7/index.ts b/ej2-javascript/code-snippet/data/getting-started-cs7/index.ts
index 2daf1059d..ddd8e30a3 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs7/index.ts
+++ b/ej2-javascript/code-snippet/data/getting-started-cs7/index.ts
@@ -7,11 +7,11 @@ let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${Emplo
 
 let compiledFunction: Function = compile(template);
 
-const SERVICE_URI: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/?$top=7';
+const SERVICE_URL: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/?$top=7';
 
 let table: HTMLElement = (<HTMLElement>document.getElementById('datatable'));
 
-let dm: DataManager = new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor, offline: true });
+let dm: DataManager = new DataManager({ url: SERVICE_URL, adaptor: new ODataV4Adaptor(), offline: true });
 
 dm.ready.then((e: ReturnOption) => {
         (<Object[]>e.result).forEach((data: Object) => {
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs8/index.js b/ej2-javascript/code-snippet/data/getting-started-cs8/index.js
index 1d409926d..c6f83ac4f 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs8/index.js
+++ b/ej2-javascript/code-snippet/data/getting-started-cs8/index.js
@@ -2,12 +2,12 @@ var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</
 
 var compiledFunction = ej.base.compile(template);
 
-const SERVICE_URI =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders';
+const SERVICE_URL =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders';
 
 var table = (document.getElementById('datatable'));
 
-new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor })
-    .executeQuery(new ej.data.Query().addParams('$top', '7'))
+new ej.data.DataManager({ url: SERVICE_URL, adaptor: new ej.data.ODataV4Adaptor() })
+    .executeQuery(new ej.data.Query().addParams('$top', '8'))
     .then((e) => {
         (e.result).forEach((data) => {
             table.appendChild(compiledFunction(data)[0]);
diff --git a/ej2-javascript/code-snippet/data/getting-started-cs8/index.ts b/ej2-javascript/code-snippet/data/getting-started-cs8/index.ts
index 7ee715a77..fca630313 100644
--- a/ej2-javascript/code-snippet/data/getting-started-cs8/index.ts
+++ b/ej2-javascript/code-snippet/data/getting-started-cs8/index.ts
@@ -7,12 +7,12 @@ let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${Emplo
 
 let compiledFunction: Function = compile(template);
 
-const SERVICE_URI: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+const SERVICE_URL: string =  'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
 
 let table: HTMLElement = (<HTMLElement>document.getElementById('datatable'));
 
-new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor })
-    .executeQuery(new Query().addParams('$top', '7'))
+new DataManager({ url: SERVICE_URL, adaptor: new ODataV4Adaptor() })
+    .executeQuery(new Query().addParams('$top', '8'))
     .then((e: ReturnOption) => {
         (<Object[]>e.result).forEach((data: Object) => {
             table.appendChild(compiledFunction(data)[0]);
diff --git a/ej2-javascript/code-snippet/data/manipulation-cs1/index.js b/ej2-javascript/code-snippet/data/manipulation-cs1/index.js
index 0bf7a92c4..5cf5a1c62 100644
--- a/ej2-javascript/code-snippet/data/manipulation-cs1/index.js
+++ b/ej2-javascript/code-snippet/data/manipulation-cs1/index.js
@@ -3,35 +3,34 @@ var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</
 var compiledFunction = ej.base.compile(template);
 
 var table = (document.getElementById('datatable'));
-var dm = new ej.data.DataManager(data.slice(0, 4));
+var dataManager = new ej.data.DataManager(data.slice(0, 5));
 
-dm.executeQuery(new ej.data.Query())
-    .then((e) => {
-        (e.result).forEach((data) => {
-            table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
-        });
+dataManager.executeQuery(new ej.data.Query())
+.then((e) => {
+    (e.result).forEach((data) => {
+        table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
     });
+});
 
 var button = document.getElementById('manipulate');
-var orderid = document.getElementById('OrderID');
-var cusid = document.getElementById('CustomerID');
-var empid =document.getElementById('EmployeeID');
-
+var orderIdInput = document.getElementById('OrderID');
+var customerIdInput = document.getElementById('CustomerID');
+var employeeIdInput =document.getElementById('EmployeeID');
 
 button.onclick = function() {
     var data = {
-        OrderID: orderid.value,
-        CustomerID: cusid.value,
-        EmployeeID: empid.value
+        OrderID: orderIdInput.value,
+        CustomerID: customerIdInput.value,
+        EmployeeID: employeeIdInput.value
     };
     if (!data.OrderID) { return; }
-    dm.insert(data);
-    dm.executeQuery(new ej.data.Query())
-        .then((e) => {
-            table.tBodies[0].innerHTML = '';
-            (e.result).forEach((data) => {
-                table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
-            });
+    dataManager.insert(data);
+    dataManager.executeQuery(new ej.data.Query())
+    .then((e) => {
+        table.tBodies[0].innerHTML = '';
+        (e.result).forEach((data) => {
+            table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
         });
+    });
 };
 
diff --git a/ej2-javascript/code-snippet/data/manipulation-cs1/index.ts b/ej2-javascript/code-snippet/data/manipulation-cs1/index.ts
index 57c450353..b57d9b062 100644
--- a/ej2-javascript/code-snippet/data/manipulation-cs1/index.ts
+++ b/ej2-javascript/code-snippet/data/manipulation-cs1/index.ts
@@ -1,50 +1,49 @@
-
-
 import { DataManager, Query, ReturnOption } from '@syncfusion/ej2-data';
 import { compile } from '@syncfusion/ej2-base';
 import { data } from './datasource.ts';
 
+interface Order {
+    OrderID: number;
+    CustomerID: string;
+    EmployeeID: number;
+}
+
 let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';
 
 let compiledFunction: Function = compile(template);
 
-let table: HTMLTableElement = (<HTMLTableElement>document.getElementById('datatable'));
-let dm: DataManager = new DataManager(data.slice(0, 4));
+const table: HTMLTableElement = document.getElementById('datatable') as HTMLTableElement;
+const dataManager: DataManager = new DataManager(data.slice(0, 5));
 
-dm.executeQuery(new Query())
-    .then((e: ReturnOption) => {
-        (<Object[]>e.result).forEach((data: Object) => {
-            table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
-        });
+dataManager.executeQuery(new Query())
+.then((e: ReturnOption) => {
+    (<Object[]>e.result).forEach((data: Object) => {
+        table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
     });
+});
 
-interface IOrder {
-    OrderID: string;
-    CustomerID: string;
-    EmployeeID: string;
-}
-
-let button: HTMLInputElement = <HTMLInputElement>document.getElementById('manipulate');
-let orderid: HTMLInputElement = <HTMLInputElement>document.getElementById('OrderID');
-let cusid: HTMLInputElement = <HTMLInputElement>document.getElementById('CustomerID');
-let empid: HTMLInputElement = <HTMLInputElement>document.getElementById('EmployeeID');
-
+const button: HTMLInputElement = document.getElementById('manipulate') as HTMLInputElement;
+const orderIdInput: HTMLInputElement = document.getElementById('OrderID') as HTMLInputElement;
+const customerIdInput: HTMLInputElement = document.getElementById('CustomerID') as HTMLInputElement;
+const employeeIdInput: HTMLInputElement = document.getElementById('EmployeeID') as HTMLInputElement;
 
 button.onclick = () => {
-    let data: IOrder = {
-        OrderID: orderid.value,
-        CustomerID: cusid.value,
-        EmployeeID: empid.value
+    const newOrder: Order = {
+        OrderID: +orderIdInput.value,
+        CustomerID: customerIdInput.value,
+        EmployeeID: +employeeIdInput.value
     };
-    if (!data.OrderID) { return; }
-    dm.insert(data);
-    dm.executeQuery(new Query())
-        .then((e: ReturnOption) => {
-            table.tBodies[0].innerHTML = '';
-            (<Object[]>e.result).forEach((data: Object) => {
-                table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
-            });
-        });
-};
 
+    if (!newOrder.OrderID) {
+        return;
+    }
 
+    dataManager.insert(newOrder);
+    dataManager.executeQuery(new Query())
+    .then((e: ReturnOption) => {
+        table.tBodies[0].innerHTML = '';
+        (<Object[]>e.result).forEach((data: Object) => {
+            table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
+        });
+    });
+};
diff --git a/ej2-javascript/code-snippet/data/manipulation-cs2/index.js b/ej2-javascript/code-snippet/data/manipulation-cs2/index.js
index b8796bbf0..4817790a0 100644
--- a/ej2-javascript/code-snippet/data/manipulation-cs2/index.js
+++ b/ej2-javascript/code-snippet/data/manipulation-cs2/index.js
@@ -3,34 +3,33 @@ var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</
 var compiledFunction = ej.base.compile(template);
 
 var table = (document.getElementById('datatable'));
-var dm = new ej.data.DataManager(data.slice(0, 4));
+var dataManager = new ej.data.DataManager(data.slice(0, 5));
 
-dm.executeQuery(new ej.data.Query())
-    .then((e) => {
-        (e.result).forEach((data) => {
-            table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
-        });
+dataManager.executeQuery(new ej.data.Query())
+.then((e) => {
+    (e.result).forEach((data) => {
+        table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
     });
+});
 
 var button = document.getElementById('manipulate');
-var orderid = document.getElementById('OrderID');
-var cusid = document.getElementById('CustomerID');
-var empid =document.getElementById('EmployeeID');
+var orderIdInput = document.getElementById('OrderID');
+var CustomerIdInput = document.getElementById('CustomerID');
+var employeeIdInput =document.getElementById('EmployeeID');
 
 button.onclick = () => {
     var data = {
-        OrderID: +orderid.value,
-        CustomerID: cusid.value,
-        EmployeeID: +empid.value
+        OrderID: +orderIdInput.value,
+        CustomerID: CustomerIdInput.value,
+        EmployeeID: +employeeIdInput.value
     };
     if (!data.OrderID) { return; }
-    dm.update('OrderID', data);
-    dm.executeQuery(new ej.data.Query())
-        .then((e) => {
-            table.tBodies[0].innerHTML = '';
-            (e.result).forEach((data) => {
-                table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
-            });
+    dataManager.update('OrderID', data);
+    dataManager.executeQuery(new ej.data.Query())
+    .then((e) => {
+        table.tBodies[0].innerHTML = '';
+        (e.result).forEach((data) => {
+            table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
         });
+    });
 };
-
diff --git a/ej2-javascript/code-snippet/data/manipulation-cs2/index.ts b/ej2-javascript/code-snippet/data/manipulation-cs2/index.ts
index 484955414..e10c24972 100644
--- a/ej2-javascript/code-snippet/data/manipulation-cs2/index.ts
+++ b/ej2-javascript/code-snippet/data/manipulation-cs2/index.ts
@@ -1,50 +1,49 @@
-
-
 import { DataManager, Query, ReturnOption } from '@syncfusion/ej2-data';
 import { compile } from '@syncfusion/ej2-base';
 import { data } from './datasource.ts';
 
+interface Order {
+    OrderID: number;
+    CustomerID: string;
+    EmployeeID: number;
+}
+
 let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';
 
 let compiledFunction: Function = compile(template);
 
-let table: HTMLTableElement = (<HTMLTableElement>document.getElementById('datatable'));
-let dm: DataManager = new DataManager(data.slice(0, 4));
+const table: HTMLTableElement = document.getElementById('datatable') as HTMLTableElement;
+const dataManager: DataManager = new DataManager(data.slice(0, 5));
 
-dm.executeQuery(new Query())
-    .then((e: ReturnOption) => {
-        (<Object[]>e.result).forEach((data: Object) => {
-            table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
-        });
+dataManager.executeQuery(new Query())
+.then((e: ReturnOption) => {
+    (e.result as Order[]).forEach((order: Order) => {
+        table.tBodies[0].appendChild(compiledFunction(order)[0].firstChild as Node);
     });
+});
 
-let button: HTMLInputElement = <HTMLInputElement>document.getElementById('manipulate');
-button.value = 'Update';
-let orderid: HTMLInputElement = <HTMLInputElement>document.getElementById('OrderID');
-let cusid: HTMLInputElement = <HTMLInputElement>document.getElementById('CustomerID');
-let empid: HTMLInputElement = <HTMLInputElement>document.getElementById('EmployeeID');
-
-interface IOrder {
-    OrderID: number;
-    CustomerID: string;
-    EmployeeID: number;
-}
+const button: HTMLInputElement = document.getElementById('manipulate') as HTMLInputElement;
+const orderIdInput: HTMLInputElement = document.getElementById('OrderID') as HTMLInputElement;
+const customerIdInput: HTMLInputElement = document.getElementById('CustomerID') as HTMLInputElement;
+const employeeIdInput: HTMLInputElement = document.getElementById('EmployeeID') as HTMLInputElement;
 
 button.onclick = () => {
-    let data: IOrder = {
-        OrderID: +orderid.value,
-        CustomerID: cusid.value,
-        EmployeeID: +empid.value
+    let updatedOrder: Order = {
+        OrderID: +orderIdInput.value,
+        CustomerID: customerIdInput.value,
+        EmployeeID: +employeeIdInput.value
     };
-    if (!data.OrderID) { return; }
-    dm.update('OrderID', data);
-    dm.executeQuery(new Query())
-        .then((e: ReturnOption) => {
-            table.tBodies[0].innerHTML = '';
-            (<Object[]>e.result).forEach((data: Object) => {
-                table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
-            });
-        });
-};
 
+    if (!updatedOrder.OrderID) {
+        return;
+    }
 
+    dataManager.update('OrderID', updatedOrder);
+    dataManager.executeQuery(new Query())
+    .then((e: ReturnOption) => {
+        table.tBodies[0].innerHTML = '';
+        (<Object[]>e.result).forEach((data: Object) => {
+            table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
+        });
+    });
+};
diff --git a/ej2-javascript/code-snippet/data/manipulation-cs2/js/index.html b/ej2-javascript/code-snippet/data/manipulation-cs2/js/index.html
index 4007fb4fe..20bac8de7 100644
--- a/ej2-javascript/code-snippet/data/manipulation-cs2/js/index.html
+++ b/ej2-javascript/code-snippet/data/manipulation-cs2/js/index.html
@@ -39,7 +39,7 @@
             <input type="number" id="OrderID" placeholder="Order ID">
             <input type="text" id="CustomerID" placeholder="Customer ID">
             <input type="number" id="EmployeeID" placeholder="Employee ID">
-            <input type="button" value="Insert" id="manipulate">
+            <input type="button" value="Update" id="manipulate">
         </div>
         <table id="datatable" class="e-table">
             <thead>
diff --git a/ej2-javascript/code-snippet/data/manipulation-cs3/index.js b/ej2-javascript/code-snippet/data/manipulation-cs3/index.js
index 7176e651b..083026b6a 100644
--- a/ej2-javascript/code-snippet/data/manipulation-cs3/index.js
+++ b/ej2-javascript/code-snippet/data/manipulation-cs3/index.js
@@ -3,9 +3,9 @@ var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</
 var compiledFunction = ej.base.compile(template);
 
 var table = (document.getElementById('datatable'));
-var dm = new ej.data.DataManager(data.slice(0, 4));
+var dataManager = new ej.data.DataManager(data.slice(0, 5));
 
-dm.executeQuery(new ej.data.Query())
+dataManager.executeQuery(new ej.data.Query())
     .then((e) => {
         (e.result).forEach((data) => {
             table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
@@ -13,16 +13,12 @@ dm.executeQuery(new ej.data.Query())
     });
 
 var button = document.getElementById('manipulate');
-button.value = 'Remove';
-var orderid = document.getElementById('OrderID');
-document.getElementById('CustomerID').style.display = 'none';
-document.getElementById('EmployeeID').style.display = 'none';
-
+var orderIdInput = document.getElementById('OrderID');
 
 button.onclick = () => {
-    if (!orderid.value) { return; }
-    dm.remove('OrderID', { OrderID: +orderid.value });
-    dm.executeQuery(new ej.data.Query())
+    if (!orderIdInput.value) { return; }
+    dataManager.remove('OrderID', { OrderID: +orderIdInput.value });
+    dataManager.executeQuery(new ej.data.Query())
         .then((e) => {
             table.tBodies[0].innerHTML = '';
             (e.result).forEach((data) => {
diff --git a/ej2-javascript/code-snippet/data/manipulation-cs3/index.ts b/ej2-javascript/code-snippet/data/manipulation-cs3/index.ts
index 30ff27e8b..c46339a0c 100644
--- a/ej2-javascript/code-snippet/data/manipulation-cs3/index.ts
+++ b/ej2-javascript/code-snippet/data/manipulation-cs3/index.ts
@@ -1,5 +1,3 @@
-
-
 import { DataManager, Query, ReturnOption } from '@syncfusion/ej2-data';
 import { compile } from '@syncfusion/ej2-base';
 import { data } from './datasource.ts';
@@ -8,33 +6,32 @@ let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${Emplo
 
 let compiledFunction: Function = compile(template);
 
-let table: HTMLTableElement = (<HTMLTableElement>document.getElementById('datatable'));
-let dm: DataManager = new DataManager(data.slice(0, 4));
+const table: HTMLTableElement = document.getElementById('datatable') as HTMLTableElement;
+const dataManager: DataManager = new DataManager(data.slice(0, 5));
 
-dm.executeQuery(new Query())
-    .then((e: ReturnOption) => {
-        (<Object[]>e.result).forEach((data: Object) => {
-            table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
-        });
+dataManager.executeQuery(new Query())
+.then((e: ReturnOption) => {
+    (<Object[]>e.result).forEach((data: Object) => {
+        table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
     });
+});
 
-let button: HTMLInputElement = <HTMLInputElement>document.getElementById('manipulate');
-button.value = 'Remove';
-let orderid: HTMLInputElement = <HTMLInputElement>document.getElementById('OrderID');
-document.getElementById('CustomerID').style.display = 'none';
-document.getElementById('EmployeeID').style.display = 'none';
-
+const button: HTMLInputElement = document.getElementById('manipulate') as HTMLInputElement;
+const orderIdInput: HTMLInputElement = document.getElementById('OrderID') as HTMLInputElement;
 
 button.onclick = () => {
-    if (!orderid.value) { return; }
-    dm.remove('OrderID', { OrderID: +orderid.value });
-    dm.executeQuery(new Query())
-        .then((e: ReturnOption) => {
-            table.tBodies[0].innerHTML = '';
-            (<Object[]>e.result).forEach((data: Object) => {
-                table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
-            });
+    if (!orderIdInput.value) {
+        return;
+    }
+
+    dataManager.remove('OrderID', { OrderID: +orderIdInput.value });
+    dataManager.executeQuery(new Query())
+    .then((e: ReturnOption) => {
+        table.tBodies[0].innerHTML = '';
+        (<Object[]>e.result).forEach((data: Object) => {
+            table.tBodies[0].appendChild(compiledFunction(data)[0].firstChild);
         });
+    });
 };
 
 
diff --git a/ej2-javascript/code-snippet/data/manipulation-cs3/js/index.html b/ej2-javascript/code-snippet/data/manipulation-cs3/js/index.html
index 4007fb4fe..6def09007 100644
--- a/ej2-javascript/code-snippet/data/manipulation-cs3/js/index.html
+++ b/ej2-javascript/code-snippet/data/manipulation-cs3/js/index.html
@@ -32,34 +32,31 @@
 <script src="es5-datasource.js" type="text/javascript"></script>
 </head>
 
-<body>
-    
-    <div id="container">
-        <div class="e-form">
-            <input type="number" id="OrderID" placeholder="Order ID">
-            <input type="text" id="CustomerID" placeholder="Customer ID">
-            <input type="number" id="EmployeeID" placeholder="Employee ID">
-            <input type="button" value="Insert" id="manipulate">
-        </div>
-        <table id="datatable" class="e-table">
-            <thead>
-                <tr>
-                    <th>Order ID</th>
-                    <th>Customer ID</th>
-                    <th>Employee ID</th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-        </table>
+<body>    
+  <div id="container">
+    <div class="e-form">
+      <input type="number" id="OrderID" placeholder="Order ID">
+      <input type="button" value="Remove" id="manipulate">
     </div>
+    <table id="datatable" class="e-table">
+      <thead>
+        <tr>
+          <th>Order ID</th>
+          <th>Customer ID</th>
+          <th>Employee ID</th>
+        </tr>
+      </thead>
+      <tbody>
+      </tbody>
+    </table>
+  </div>
 
-
-<script>
-var ele = document.getElementById('container');
-if(ele) {
-  ele.style.visibility = "visible";
-}   
-      </script>
-<script src="index.js" type="text/javascript"></script>
-</body></html>
\ No newline at end of file
+  <script>
+    var ele = document.getElementById('container');
+    if(ele) {
+      ele.style.visibility = "visible";
+    }   
+  </script>
+  <script src="index.js" type="text/javascript"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/data/manipulation-cs3/ts/index.html b/ej2-javascript/code-snippet/data/manipulation-cs3/ts/index.html
index bf42af01a..b226e7572 100644
--- a/ej2-javascript/code-snippet/data/manipulation-cs3/ts/index.html
+++ b/ej2-javascript/code-snippet/data/manipulation-cs3/ts/index.html
@@ -38,9 +38,7 @@
     <div id='container'>
         <div class="e-form">
             <input type="number" id='OrderID' placeholder="Order ID"/>
-            <input type="text" id="CustomerID" placeholder="Customer ID"/>
-            <input type="number" id="EmployeeID" placeholder="Employee ID"/>
-            <input type="button" value="Insert" id="manipulate"/>
+            <input type="button" value="Remove" id="manipulate"/>
         </div>
         <table id='datatable' class='e-table'>
             <thead>
diff --git a/ej2-javascript/code-snippet/data/querying-cs1/index.js b/ej2-javascript/code-snippet/data/querying-cs1/index.js
index 895747799..090574e14 100644
--- a/ej2-javascript/code-snippet/data/querying-cs1/index.js
+++ b/ej2-javascript/code-snippet/data/querying-cs1/index.js
@@ -2,12 +2,12 @@ var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</
 
 var compiledFunction = ej.base.compile(template);
 
-const SERVICE_URI = 'https://services.odata.org/V4/Northwind/Northwind.svc/';
+const SERVICE_URL = 'https://services.odata.org/V4/Northwind/Northwind.svc/';
 
 var table = (document.getElementById('datatable'));
 
 let dataManager = new ej.data.DataManager({
-    url: SERVICE_URI,
+    url: SERVICE_URL,
     adaptor: new ej.data.ODataV4Adaptor()
 });
 
diff --git a/ej2-javascript/code-snippet/data/querying-cs1/index.ts b/ej2-javascript/code-snippet/data/querying-cs1/index.ts
index 1a555a705..8f1d1ba39 100644
--- a/ej2-javascript/code-snippet/data/querying-cs1/index.ts
+++ b/ej2-javascript/code-snippet/data/querying-cs1/index.ts
@@ -5,10 +5,10 @@ let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${Emplo
 
 let compiledFunction: Function = compile(template);
 
-const SERVICE_URI: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/';
+const SERVICE_URL: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/';
 
 let dataManager = new DataManager({
-    url: SERVICE_URI,
+    url: SERVICE_URL,
     adaptor: new ODataV4Adaptor()
 });
 
diff --git a/ej2-javascript/code-snippet/data/querying-cs30/index.css b/ej2-javascript/code-snippet/data/querying-cs30/index.css
new file mode 100644
index 000000000..8948f677d
--- /dev/null
+++ b/ej2-javascript/code-snippet/data/querying-cs30/index.css
@@ -0,0 +1,33 @@
+#container {
+  visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#datatable.e-table {
+  border: solid 1px #e0e0e0;
+  border-collapse: collapse;
+  font-family: Roboto;
+}
+
+#datatable.e-table td, #datatable.e-table th {
+  border: solid #e0e0e0;
+  border-width: 1px 0 0;
+  display: table-cell;
+  font-size: 14px;
+  line-height: 20px;
+  overflow: hidden;
+  padding: 8px 21px;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/data/querying-cs30/index.js b/ej2-javascript/code-snippet/data/querying-cs30/index.js
new file mode 100644
index 000000000..f4c4679f7
--- /dev/null
+++ b/ej2-javascript/code-snippet/data/querying-cs30/index.js
@@ -0,0 +1,15 @@
+var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';
+
+var compiledFunction = ej.base.compile(template);
+
+const SERVICE_URL = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+
+var table = (document.getElementById('datatable'));
+
+new ej.data.DataManager({ url: SERVICE_URL, adaptor: new ej.data.ODataV4Adaptor })
+.executeQuery(new ej.data.Query().select(['OrderID', 'CustomerID', 'EmployeeID']).take(8))
+.then((e) => {
+    (e.result).forEach((data) => {
+        table.appendChild(compiledFunction(data)[0]);
+    });
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/data/querying-cs30/index.ts b/ej2-javascript/code-snippet/data/querying-cs30/index.ts
new file mode 100644
index 000000000..d1c922faa
--- /dev/null
+++ b/ej2-javascript/code-snippet/data/querying-cs30/index.ts
@@ -0,0 +1,17 @@
+import { DataManager, Query, ReturnOption, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { compile } from '@syncfusion/ej2-base';
+
+let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';
+
+let compiledFunction: Function = compile(template);
+
+const SERVICE_URL: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders';
+
+new DataManager({ url: SERVICE_URL, adaptor: new ODataV4Adaptor() })
+.executeQuery(new Query().select(['OrderID', 'CustomerID', 'EmployeeID']).take(8))
+.then((e: ReturnOption) => {
+    let table: HTMLElement = document.getElementById('datatable') as HTMLElement;
+    (e.result).forEach((data: Object) => {
+        (table as HTMLElement).appendChild(compiledFunction(data)[0]);
+    });
+});
diff --git a/ej2-javascript/code-snippet/data/querying-cs30/js/index.html b/ej2-javascript/code-snippet/data/querying-cs30/js/index.html
new file mode 100644
index 000000000..bdb6090b2
--- /dev/null
+++ b/ej2-javascript/code-snippet/data/querying-cs30/js/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Grid</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Grid Control">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-grids/styles/material.css" rel="stylesheet">
+        <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-calendars/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+<script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+<body>
+    <div id="container">
+        <table id="datatable" border="1" class="e-table">
+            <thead>
+                <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
+            </thead>
+            <tbody>
+            </tbody>    
+        </table>        
+    </div>
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+</script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/data/querying-cs30/systemjs.config.js b/ej2-javascript/code-snippet/data/querying-cs30/systemjs.config.js
new file mode 100644
index 000000000..27a59fb8d
--- /dev/null
+++ b/ej2-javascript/code-snippet/data/querying-cs30/systemjs.config.js
@@ -0,0 +1,39 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/29.2.4/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",        
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", 
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/data/querying-cs30/ts/index.html b/ej2-javascript/code-snippet/data/querying-cs30/ts/index.html
new file mode 100644
index 000000000..4cf5f87da
--- /dev/null
+++ b/ej2-javascript/code-snippet/data/querying-cs30/ts/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Grid</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Grid Control" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-grids/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-calendars/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <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='container'>
+        <table id='datatable' border="1" class='e-table'>
+            <thead>
+                <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
+            </thead>
+            <tbody>
+            </tbody>    
+        </table>        
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/clear-search-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/clear-search-cs1/ts/index.html
index d1751b6ef..745d6dd45 100644
--- a/ej2-javascript/code-snippet/gantt/clear-search-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/clear-search-cs1/ts/index.html
@@ -8,17 +8,16 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-        <button id="clear">Clear Search</button>    
-        <div id='Gantt'></div>        
+        <button id="clear">Clear Search</button>
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/copypasterecords-cs1/index.js b/ej2-javascript/code-snippet/gantt/copypasterecords-cs1/index.js
index 8b1724204..bde49cc1b 100644
--- a/ej2-javascript/code-snippet/gantt/copypasterecords-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/copypasterecords-cs1/index.js
@@ -1,64 +1,64 @@
-ej.base.enableRipple(true);
-var copiedRecord;
-var enableFlag;
-var gantt = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-        	name: 'TaskName',
-        	startDate: 'StartDate',
-        	dependency: 'Predecessor',
-        	duration: 'Duration',
-        	progress: 'Progress',
-        	parentID: 'ParentID'
-        },
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '430px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        dependency: 'Predecessor',
+        parentID: 'ParentID'
+    },
+    enableContextMenu: true,
     editSettings: {
         allowAdding: true,
         allowEditing: true,
-        allowDeleting: true,
-        allowTaskbarEditing: true 
+        allowDeleting: true
     },
-    toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
-    allowSelection: true,
-    enableContextMenu: true,
     contextMenuItems: [
         { text: 'Copy', target: '.e-content', id: 'copy' },
-        { text: 'Paste', target: '.e-content', id: 'paste' },
+        { text: 'Paste', target: '.e-content', id: 'paste' }
     ],
-    contextMenuClick: function (args) {
-        if (args.item.id === 'copy') {
-            copiedRecord = args.rowData;
-            copiedRecord.taskData.TaskID = gantt.currentViewData.length + 1;
-        }
-        if (args.item.id === 'paste') {
-            gantt.addRecord(copiedRecord.taskData,'Below',args.rowData.index);
-            if(copiedRecord.hasChildRecords) {
-                addChildRecords(copiedRecord, args.rowData.index + 1);
-            }
-            copiedRecord = undefined;
-        }
-    },
-    contextMenuOpen: function (args) {
-        if (args.type !== 'Header') {
-            if (copiedRecord) {
-                args.hideItems.push('Copy');
-            } else {
-                args.hideItems.push('Paste');
-             }
+    contextMenuClick: contextMenuClick,
+    contextMenuOpen: contextMenuOpen
+});
+
+ganttChart.appendTo('#Gantt');
+
+var copiedRecord;
+
+function contextMenuClick(args) {
+    if (args.item.id === 'copy') {
+        copiedRecord = args.rowData;
+        copiedRecord.taskData.TaskID = ganttChart.currentViewData.length + 1;
+    }
+    if (args.item.id === 'paste') {
+        ganttChart.addRecord(copiedRecord.taskData, 'Below', args.rowData.index);
+        if (copiedRecord.hasChildRecords) {
+            addChildRecords(copiedRecord, args.rowData.index + 1);
         }
+        copiedRecord = undefined;
     }
-});
+}
 
-gantt.appendTo('#Gantt');
+function contextMenuOpen(args) {
+    if (args.type !== 'Header') {
+        if (copiedRecord) {
+            args.hideItems.push('Copy');
+        } else {
+            args.hideItems.push('Paste');
+        }
+    }
+}
 
 function addChildRecords(record, index) {
-    for(var i=0; i<record.childRecords.length; i++) {
+    for (var i = 0; i < record.childRecords.length; i++) {
         var childRecord = record.childRecords[i];
         childRecord.taskData.TaskID = ganttChart.currentViewData.length + 1;
-        ganttChart.addRecord(childRecord.taskData,'Child',index);
-        if(childRecord.hasChildRecords) {
-            addChildRecords(childRecord, index + (i+1));
+        ganttChart.addRecord(childRecord.taskData, 'Child', index);
+        if (childRecord.hasChildRecords) {
+            addChildRecords(childRecord, index + (i + 1));
         }
     }
 }
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/copypasterecords-cs1/index.ts b/ej2-javascript/code-snippet/gantt/copypasterecords-cs1/index.ts
index a863e2043..6143385e6 100644
--- a/ej2-javascript/code-snippet/gantt/copypasterecords-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/copypasterecords-cs1/index.ts
@@ -1,70 +1,71 @@
-
-
-
-import { Gantt, Edit, Selection, ContextMenu } from '@syncfusion/ej2-gantt';
+import { Gantt, Edit, Selection, ContextMenu, ContextMenuClickEventArgs, ContextMenuOpenEventArgs } from '@syncfusion/ej2-gantt';
+import { ContextMenuItemModel } from '@syncfusion/ej2-grids';
 import { GanttData } from './datasource.ts';
 
 Gantt.Inject(Edit, Selection, ContextMenu);
 
-var copiedRecord: any;
+let copiedRecord: any;
 
 let gantt: Gantt = new Gantt({
     dataSource: GanttData,
+    height: '430px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
         startDate: 'StartDate',
         duration: 'Duration',
         progress: 'Progress',
-        dependency:'Predecessor',
+        dependency: 'Predecessor',
         parentID: 'ParentID'
     },
+    enableContextMenu: true,
     editSettings: {
         allowAdding: true,
         allowEditing: true,
-        allowDeleting: true,
-        allowTaskbarEditing: true
+        allowDeleting: true
     },
-    toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
-    allowSelection: true,
-    enableContextMenu: true,
     contextMenuItems: [
-        { text: 'Copy', target: '.e-content', id: 'copy' },
-        { text: 'Paste', target: '.e-content', id: 'paste' },
+        { text: 'Copy', target: '.e-content', id: 'copy' } as ContextMenuItemModel,
+        { text: 'Paste', target: '.e-content', id: 'paste' } as ContextMenuItemModel
     ],
-    contextMenuClick: function (args) {
-        if (args.item.id === 'copy') {
-            copiedRecord = args.rowData;
-            copiedRecord.taskData.TaskID = gantt.currentViewData.length + 1;
-        }
-        if (args.item.id === 'paste') {
-            gantt.addRecord(copiedRecord.taskData,'Below',args.rowData.index);
-            if(copiedRecord.hasChildRecords) {
-                addChildRecords(copiedRecord, args.rowData.index + 1);
-            }
-            copiedRecord = undefined;
-        }
-    },
-    contextMenuOpen: function (args) {
-        if (args.type !== 'Header') {
-            if (copiedRecord) {
-                args.hideItems.push('Copy');
-            } else {
-                args.hideItems.push('Paste');
-             }
-        }
-    },
+    contextMenuClick: contextMenuClick,
+    contextMenuOpen: contextMenuOpen
 });
 
 gantt.appendTo('#Gantt');
 
-function addChildRecords(record: any, index: any) {
-    for(var i=0; i<record.childRecords.length; i++) {
-          var childRecord = record.childRecords[i];
-          childRecord.taskData.TaskID = gantt.currentViewData.length + 1;
-          gantt.addRecord(childRecord.taskData,'Child',index);
-          if(childRecord.hasChildRecords) {
-              addChildRecords(childRecord, index + (i+1));
-          }
+function contextMenuClick(args: ContextMenuClickEventArgs): void {
+    if (args.item.id === 'copy') {
+        copiedRecord = args.rowData;
+        copiedRecord.taskData.TaskID = gantt.currentViewData.length + 1;
+    }
+
+    if (args.item.id === 'paste') {
+        gantt.addRecord(copiedRecord.taskData, 'Below', args.rowData!.index);
+        if (copiedRecord.hasChildRecords) {
+            addChildRecords(copiedRecord, args.rowData!.index! + 1);
+        }
+        copiedRecord = undefined;
+    }
+}
+
+function contextMenuOpen(args: ContextMenuOpenEventArgs): void {
+    if (args.type !== 'Header') {
+        if (copiedRecord) {
+            args.hideItems!.push('Copy');
+        } else {
+            args.hideItems!.push('Paste');
+        }
+    }
+}
+
+function addChildRecords(record: any, index: number): void {
+    for (let i = 0; i < record.childRecords.length; i++) {
+        let childRecord = record.childRecords[i];
+        childRecord.taskData.TaskID = gantt.currentViewData.length + 1;
+        gantt.addRecord(childRecord.taskData, 'Child', index);
+        if (childRecord.hasChildRecords) {
+            addChildRecords(childRecord, index + (i + 1));
+        }
     }
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/customfield-cs1/index.js b/ej2-javascript/code-snippet/gantt/customfield-cs1/index.js
index 61f847c6b..326cab56e 100644
--- a/ej2-javascript/code-snippet/gantt/customfield-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/customfield-cs1/index.js
@@ -1,5 +1,3 @@
-
-var divElement;
 var inputs = {
   booleanedit: ej.buttons.CheckBox,
   dropdownedit: ej.dropdowns.DropDownList,
@@ -9,78 +7,82 @@ var inputs = {
   numericedit: ej.inputs.NumericTextBox,
   stringedit: ej.inputs.TextBox
 };
-var gantt = new ej.gantt.Gantt({
-     dataSource: GanttData,
-        height:'450px',
-        taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-            duration: 'Duration',
-            progress: 'Progress',
-            parentID: 'ParentID',
-        },
-        editSettings: {
-        allowAdding: true,
-        allowEditing: true,
-        allowDeleting: true,
-        mode: "Auto"
-    },
-    columns: [
-        { field: 'TaskID', width: '150' },
-        { field: 'TaskName', width: '250' },
-        { field: 'StartDate', width: '250' },
-        { field: 'Duration', width: '250' },
-        { field: 'Progress', width: '250' },
-        { field: 'CustomField', width: '250' }
-    ],
-    toolbar: ['Add', 'Cancel', 'CollapseAll', 'Delete', 'Edit', 'ExpandAll', 'Update'],
-    editDialogFields: [
-        { type: 'General', headerText: 'General' },
-        { type: 'Dependency' },
-        { type: 'Resources' },
-        { type: 'Notes' }
-    ],
-    addDialogFields: [
-        { type: 'General', headerText: 'General' },
-        { type: 'Dependency' },
-        { type: 'Resources' },
-        { type: 'Notes' }
-    ],
-    actionBegin: function(args) {
-        if (args.requestType === "beforeOpenEditDialog" || args.requestType === "beforeOpenAddDialog" ) {
-          var column = this.columnByField["CustomField"];
-          divElement = this.createElement("div", {
-            className: "e-edit-form-column"
-          });
-          var inputElement;
-          inputElement = this.createElement("input", {
-            attrs: {
-              type: "text",
-              id: this.controlId + "" + column.field,
-              name: column.field,
-              title: column.field
-            }
-          });
-          divElement.appendChild(inputElement);
-          var input = {
-            enabled: true,
-            floatLabelType: "Auto",
-            placeholder: "CustomField",
-            value: args.rowData.CustomField
-          };
-          var inputObj = new inputs[column.editType](input);
-          inputObj.appendTo(inputElement);
-        }
-    },
-      actionComplete: function(args) {
-        if (args.requestType === "openEditDialog" || args.requestType === "openAddDialog") {
-          var generalTab = document.getElementById(
-            this.controlId + "GeneralTabContainer"
-          );
-          generalTab.appendChild(divElement);
-        }
-      }
+
+var divElement;
+
+var ganttChart = new ej.gantt.Gantt({
+  dataSource: GanttData,
+  height: '430px',
+  taskFields: {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    endDate: 'EndDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+  },
+  editSettings: {
+    allowEditing: true,
+    allowAdding: true,
+    allowDeleting: true,
+    mode: 'Dialog'
+  },
+  editDialogFields: [
+    { type: 'General', headerText: 'General' },
+    { type: 'Dependency' },
+    { type: 'Resources' },
+    { type: 'Notes' }
+  ],
+  addDialogFields: [
+    { type: 'General', headerText: 'General' },
+    { type: 'Dependency' },
+    { type: 'Resources' },
+    { type: 'Notes' }
+  ],
+  columns: [
+    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
+    { field: 'TaskName', headerText: 'Task Name', width: '250' },
+    { field: 'StartDate', headerText: 'Start Date', width: '150' },
+    { field: 'EndDate', headerText: 'End Date', width: '150' },
+    { field: 'Duration', headerText: 'Duration', width: '150' },
+    { field: 'Progress', headerText: 'Progress', width: '150' },
+    { field: 'CustomField', headerText: 'CustomField', width: '150' }
+  ],
+  toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll'],
+  actionBegin: actionBegin,
+  actionComplete: actionComplete
 });
 
-gantt.appendTo('#Gantt');
\ No newline at end of file
+ganttChart.appendTo('#Gantt');
+
+function actionBegin(args) {
+  if (args.requestType === 'beforeOpenEditDialog' || args.requestType === 'beforeOpenAddDialog') {
+    var column = ganttChart.columnByField['CustomField'];
+    divElement = ganttChart.createElement('div', { className: 'e-edit-form-column' });
+    var inputElement = ganttChart.createElement('input', {
+      attrs: {
+        type: 'text',
+        id: ganttChart.controlId + column.field,
+        name: column.field,
+        title: column.field
+      }
+    });
+    divElement.appendChild(inputElement);
+    var input = {
+      enabled: true,
+      floatLabelType: 'Auto',
+      placeholder: 'CustomField',
+      value: args.rowData ? args.rowData.CustomField : null
+    };
+    var inputObj = new inputs[column.editType](input);
+    inputObj.appendTo(inputElement);
+  }
+}
+
+function actionComplete(args) {
+  if (args.requestType === 'openEditDialog' || args.requestType === 'openAddDialog') {
+    var generalTab = document.getElementById(ganttChart.controlId + 'GeneralTabContainer');
+    generalTab.appendChild(divElement);
+  }
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/customfield-cs1/index.ts b/ej2-javascript/code-snippet/gantt/customfield-cs1/index.ts
index 54e731e62..abd496656 100644
--- a/ej2-javascript/code-snippet/gantt/customfield-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/customfield-cs1/index.ts
@@ -1,17 +1,13 @@
-
-
-
-import { Gantt, Edit, Toolbar } from '@syncfusion/ej2-gantt';
-import { CheckBox } from "@syncfusion/ej2-buttons";
-import { TextBox, NumericTextBox, MaskedTextBox } from "@syncfusion/ej2-inputs";
-import { DatePicker, DateTimePicker } from "@syncfusion/ej2-calendars";
-import { DropDownList } from "@syncfusion/ej2-dropdowns";
+import { Gantt, Edit, Selection, Toolbar, ActionBeginArgs, ActionCompleteArgs } from '@syncfusion/ej2-gantt';
+import { CheckBox } from '@syncfusion/ej2-buttons';
+import { TextBox, NumericTextBox, MaskedTextBox } from '@syncfusion/ej2-inputs';
+import { DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';
+import { DropDownList } from '@syncfusion/ej2-dropdowns';
 import { GanttData } from './datasource.ts';
 
-Gantt.Inject(Edit, Toolbar);
+Gantt.Inject(Edit, Selection, Toolbar);
 
-var divElement;
-var inputs = {
+let inputs: { [key: string]: any } = {
   booleanedit: CheckBox,
   dropdownedit: DropDownList,
   datepickeredit: DatePicker,
@@ -21,78 +17,81 @@ var inputs = {
   stringedit: TextBox
 };
 
+let divElement: HTMLElement;
+
 let gantt: Gantt = new Gantt({
-     dataSource: GanttData,
-        height:'450px',
-        taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-            duration: 'Duration',
-            progress: 'Progress',
-            parentID: 'ParentID',
-        },
-        editSettings: {
-        allowAdding: true,
-        allowEditing: true,
-        allowDeleting: true,
-        mode: "Auto"
-    },
-    columns: [
-        { field: 'TaskID', width: '150' },
-        { field: 'TaskName', width: '250' },
-        { field: 'StartDate', width: '250' },
-        { field: 'Duration', width: '250' },
-        { field: 'Progress', width: '250' },
-        { field: 'CustomField', width: '250' }
-    ],
-    toolbar: ['Add', 'Cancel', 'CollapseAll', 'Delete', 'Edit', 'ExpandAll', 'Update'],
-    editDialogFields: [
-        { type: 'General', headerText: 'General' },
-        { type: 'Dependency' },
-        { type: 'Resources' },
-        { type: 'Notes' }
-    ],
-    addDialogFields: [
-        { type: 'General', headerText: 'General' },
-        { type: 'Dependency' },
-        { type: 'Resources' },
-        { type: 'Notes' }
-    ],
-    actionBegin: function(args) {
-        if (args.requestType === "beforeOpenEditDialog" || args.requestType === "beforeOpenAddDialog" ) {
-          var column = this.columnByField["CustomField"];
-          divElement = this.createElement("div", {
-            className: "e-edit-form-column"
-          });
-          var inputElement;
-          inputElement = this.createElement("input", {
-            attrs: {
-              type: "text",
-              id: this.controlId + "" + column.field,
-              name: column.field,
-              title: column.field
-            }
-          });
-          divElement.appendChild(inputElement);
-          var input = {
-            enabled: true,
-            floatLabelType: "Auto",
-            placeholder: "CustomField",
-            value: args.rowData.CustomField
-          };
-          var inputObj = new inputs[column.editType](input);
-          inputObj.appendTo(inputElement);
-        }
-    },
-      actionComplete: function(args) {
-        if (args.requestType === "openEditDialog" || args.requestType === "openAddDialog") {
-          var generalTab = document.getElementById(
-            this.controlId + "GeneralTabContainer"
-          );
-          generalTab.appendChild(divElement);
-        }
-      }
+  dataSource: GanttData,
+  height: '430px',
+  taskFields: {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    endDate: 'EndDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+  },
+  editSettings: {
+    allowEditing: true,
+    allowAdding: true,
+    allowDeleting: true,
+    mode: 'Dialog'
+  },
+  editDialogFields: [
+    { type: 'General', headerText: 'General' },
+    { type: 'Dependency' },
+    { type: 'Resources' },
+    { type: 'Notes' }
+  ],
+  addDialogFields: [
+    { type: 'General', headerText: 'General' },
+    { type: 'Dependency' },
+    { type: 'Resources' },
+    { type: 'Notes' }
+  ],
+  columns: [
+    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
+    { field: 'TaskName', headerText: 'Task Name', width: '250' },
+    { field: 'StartDate', headerText: 'Start Date', width: '150' },
+    { field: 'EndDate', headerText: 'End Date', width: '150' },
+    { field: 'Duration', headerText: 'Duration', width: '150' },
+    { field: 'Progress', headerText: 'Progress', width: '150' },
+    { field: 'CustomField', headerText: 'CustomField', width: '150' }
+  ],
+  toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll'],
+  actionBegin: actionBegin,
+  actionComplete: actionComplete
 });
 
-gantt.appendTo('#Gantt');
\ No newline at end of file
+gantt.appendTo('#Gantt');
+
+function actionBegin(args: ActionBeginArgs): void {
+  if (args.requestType === 'beforeOpenEditDialog' || args.requestType === 'beforeOpenAddDialog') {
+    let column: any = (gantt as any).columnByField['CustomField'];
+    divElement = gantt.createElement('div', { className: 'e-edit-form-column' }) as HTMLElement;
+    let inputElement = gantt.createElement('input', {
+      attrs: {
+        type: 'text',
+        id: gantt.controlId + column.field,
+        name: column.field,
+        title: column.field
+      }
+    }) as HTMLInputElement;
+    divElement.appendChild(inputElement);
+    let input: any = {
+      enabled: true,
+      floatLabelType: 'Auto',
+      placeholder: 'CustomField',
+      value: (args.rowData as any).CustomField
+    };
+    let inputObj = new (inputs as any)[column.editType](input);
+    inputObj.appendTo(inputElement);
+  }
+}
+
+function actionComplete(args: ActionCompleteArgs): void {
+  if (args.requestType === 'openEditDialog' || args.requestType === 'openAddDialog') {
+    let generalTab = document.getElementById(gantt.controlId + 'GeneralTabContainer') as HTMLElement;
+    generalTab.appendChild(divElement);
+  }
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/diacriticsFilter-cs1/datasource.ts b/ej2-javascript/code-snippet/gantt/diacriticsFilter-cs1/datasource.ts
index e709bac26..85d6172a6 100644
--- a/ej2-javascript/code-snippet/gantt/diacriticsFilter-cs1/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/diacriticsFilter-cs1/datasource.ts
@@ -1,10 +1,10 @@
-export let GanttData: Object[]  = [
+export let GanttData: Object[] = [
     { TaskID: 1, TaskName: 'Projéct initiàtion', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 2, TaskName: 'Identify site locàtion', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
     { TaskID: 3, TaskName: 'Perförm soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
-    { TaskID: 4, TaskName: 'Soil tëst appröval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil tëst appröval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 10, ParentID: 1 },
     { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 6, TaskName: 'Develöp floor plan for estimàtion', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
     { TaskID: 7, TaskName: 'List matërials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: "6SS", Progress: 70, ParentID: 5 }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/diacriticsFilter-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/diacriticsFilter-cs1/es5-datasource.js
index 52b55a6d0..0c5abeb37 100644
--- a/ej2-javascript/code-snippet/gantt/diacriticsFilter-cs1/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/diacriticsFilter-cs1/es5-datasource.js
@@ -2,9 +2,9 @@ var GanttData = [
     { TaskID: 1, TaskName: 'Projéct initiàtion', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 2, TaskName: 'Identify site locàtion', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
     { TaskID: 3, TaskName: 'Perförm soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
-    { TaskID: 4, TaskName: 'Soil tëst appröval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil tëst appröval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 10, ParentID: 1 },
     { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 6, TaskName: 'Develöp floor plan for estimàtion', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
     { TaskID: 7, TaskName: 'List matërials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: "6SS", Progress: 70, ParentID: 5 }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/event-markers-cs1/datasource.ts b/ej2-javascript/code-snippet/gantt/event-markers-cs1/datasource.ts
index 127dfb7fb..72cf493a3 100644
--- a/ej2-javascript/code-snippet/gantt/event-markers-cs1/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/event-markers-cs1/datasource.ts
@@ -1,24 +1,326 @@
-export let GanttData: Object[]  = [
-        {
-            TaskID: 1,
-            TaskName: 'Project Initiation',
-            StartDate: new Date('04/02/2019'),
-            EndDate: new Date('04/21/2019'),
-            subtasks: [
-                { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
-                { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
-                { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
-            ]
-        },
-        {
-            TaskID: 5,
-            TaskName: 'Project Estimation',
-            StartDate: new Date('04/02/2019'),
-            EndDate: new Date('04/21/2019'),
-            subtasks: [
-                { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
-                { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
-                { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
-            ]
-        },
-    ];
\ No newline at end of file
+export let GanttData: Object[] = [
+    {
+        TaskID: 1,
+        TaskName: "Product Concept",
+        StartDate: new Date('2019-04-02'),
+        EndDate: new Date('2019-04-21')
+    },
+    {
+        TaskID: 2,
+        TaskName: "Defining the product and its usage",
+        StartDate: new Date('2019-04-02'),
+        Duration: 3,
+        Progress: 30,
+        ParentID: 1
+    },
+    {
+        TaskID: 3,
+        TaskName: "Defining target audience",
+        StartDate: new Date('2019-04-02'),
+        Duration: 3,
+        ParentID: 1
+    },
+    {
+        TaskID: 4,
+        TaskName: "Prepare product sketch and notes",
+        StartDate: new Date('2019-04-02'),
+        Duration: 2,
+        Predecessor: "2",
+        Progress: 30,
+        ParentID: 1
+    },
+    {
+        TaskID: 5,
+        TaskName: "Concept Approval",
+        StartDate: new Date('2019-04-02'),
+        Duration: 0,
+        Predecessor: "3,4",
+        Indicators: [
+            { date: new Date('2019-04-10'), name: "#briefing", title: "Product concept briefing" }
+        ]
+    },
+    {
+        TaskID: 6,
+        TaskName: "Market Research",
+        StartDate: new Date('2019-04-02'),
+        EndDate: new Date('2019-04-20')
+    },
+    {
+        TaskID: 7,
+        TaskName: "Demand Analysis",
+        StartDate: new Date('2019-04-04'),
+        EndDate: new Date('2019-04-20'),
+        ParentID: 6
+    },
+    {
+        TaskID: 8,
+        TaskName: "Customer strength",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "5",
+        Progress: 30,
+        ParentID: 7
+    },
+    {
+        TaskID: 9,
+        TaskName: "Market opportunity analysis",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "5",
+        ParentID: 7
+    },
+    {
+        TaskID: 10,
+        TaskName: "Competitor Analysis",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "7,8",
+        Progress: 30,
+        ParentID: 6
+    },
+    {
+        TaskID: 11,
+        TaskName: "Product strength analysis",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "9",
+        ParentID: 6
+    },
+    {
+        TaskID: 12,
+        TaskName: "Research complete",
+        StartDate: new Date('2019-04-20'),
+        Duration: 0,
+        Predecessor: "10",
+        Indicators: [
+            { date: new Date('2019-04-20'), name: "#meeting", title: "1st board of directors meeting" }
+        ],
+        ParentID: 6
+    },
+    {
+        TaskID: 13,
+        TaskName: "Product Design and Development",
+        StartDate: new Date('2019-04-21'),
+        EndDate: new Date('2019-05-18')
+    },
+    {
+        TaskID: 14,
+        TaskName: "Functionality design",
+        StartDate: new Date('2019-04-21'),
+        Duration: 3,
+        Progress: 30,
+        Predecessor: "12",
+        ParentID: 13
+    },
+    {
+        TaskID: 15,
+        TaskName: "Quality design",
+        StartDate: new Date('2019-04-21'),
+        Duration: 3,
+        Predecessor: "12",
+        ParentID: 13
+    },
+    {
+        TaskID: 16,
+        TaskName: "Define Reliability",
+        StartDate: new Date('2019-04-24'),
+        Duration: 2,
+        Progress: 30,
+        Predecessor: "15",
+        ParentID: 13
+    },
+    {
+        TaskID: 17,
+        TaskName: "Identifying raw materials",
+        StartDate: new Date('2019-04-24'),
+        Duration: 2,
+        Predecessor: "15",
+        ParentID: 13
+    },
+    {
+        TaskID: 18,
+        TaskName: "Define cost plan",
+        StartDate: new Date('2019-04-26'),
+        EndDate: new Date('2019-05-18'),
+        ParentID: 13
+    },
+    {
+        TaskID: 19,
+        TaskName: "Manufacturing cost",
+        StartDate: new Date('2019-04-26'),
+        Duration: 2,
+        Progress: 30,
+        Predecessor: "17",
+        ParentID: 18
+    },
+    {
+        TaskID: 20,
+        TaskName: "Selling cost",
+        StartDate: new Date('2019-04-26'),
+        Duration: 2,
+        Predecessor: "17",
+        ParentID: 18
+    },
+    {
+        TaskID: 21,
+        TaskName: "Development of the final design",
+        StartDate: new Date('2019-04-28'),
+        EndDate: new Date('2019-05-18'),
+        ParentID: 13
+    },
+    {
+        TaskID: 22,
+        TaskName: "Defining dimensions and package volume",
+        StartDate: new Date('2019-04-28'),
+        Duration: 2,
+        Progress: 30,
+        Predecessor: "19,20",
+        ParentID: 21
+    },
+    {
+        TaskID: 23,
+        TaskName: "Develop design to meet industry standards",
+        StartDate: new Date('2019-04-30'),
+        Duration: 2,
+        Predecessor: "22",
+        ParentID: 21
+    },
+    {
+        TaskID: 24,
+        TaskName: "Include all the details",
+        StartDate: new Date('2019-05-02'),
+        Duration: 3,
+        Predecessor: "23",
+        ParentID: 21
+    },
+    {
+        TaskID: 25,
+        TaskName: "CAD Computer-aided design",
+        StartDate: new Date('2019-05-05'),
+        Duration: 3,
+        Progress: 30,
+        Predecessor: "24",
+        ParentID: 13
+    },
+    {
+        TaskID: 26,
+        TaskName: "CAM Computer-aided manufacturing",
+        StartDate: new Date('2019-05-08'),
+        Duration: 3,
+        Predecessor: "25",
+        ParentID: 13
+    },
+    {
+        TaskID: 27,
+        TaskName: "Design complete",
+        StartDate: new Date('2019-05-11'),
+        Duration: 0,
+        Predecessor: "26",
+        Indicators: [
+            { date: new Date('2019-05-18'), name: "#meeting", title: "2nd board of directors meeting" }
+        ],
+        ParentID: 13
+    },
+    {
+        TaskID: 28,
+        TaskName: "Prototype Testing",
+        StartDate: new Date('2019-05-19'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "27"
+    },
+    {
+        TaskID: 29,
+        TaskName: "Include feedback",
+        StartDate: new Date('2019-05-23'),
+        Duration: 4,
+        Predecessor: "28",
+        ParentID: 32
+    },
+    {
+        TaskID: 30,
+        TaskName: "Manufacturing",
+        StartDate: new Date('2019-05-27'),
+        Duration: 5,
+        Progress: 30,
+        Predecessor: "28,29"
+    },
+    {
+        TaskID: 31,
+        TaskName: "Assembling materials to finished goods",
+        StartDate: new Date('2019-06-01'),
+        Duration: 5,
+        Predecessor: "30"
+    },
+    {
+        TaskID: 32,
+        TaskName: "Feedback and Testing",
+        StartDate: new Date('2019-05-23'),
+        EndDate: new Date('2019-06-05')
+    },
+    {
+        TaskID: 33,
+        TaskName: "Internal testing and feedback",
+        StartDate: new Date('2019-05-23'),
+        Duration: 3,
+        Progress: 45,
+        Predecessor: "31",
+        ParentID: 32
+    },
+    {
+        TaskID: 34,
+        TaskName: "Customer testing and feedback",
+        StartDate: new Date('2019-05-26'),
+        Duration: 3,
+        Progress: 50,
+        Predecessor: "33",
+        ParentID: 32
+    },
+    {
+        TaskID: 35,
+        TaskName: "Final Product Development",
+        StartDate: new Date('2019-05-29'),
+        EndDate: new Date('2019-06-05')
+    },
+    {
+        TaskID: 36,
+        TaskName: "Important improvements",
+        StartDate: new Date('2019-05-29'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "34",
+        ParentID: 35
+    },
+    {
+        TaskID: 37,
+        TaskName: "Address any unforeseen issues",
+        StartDate: new Date('2019-06-02'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "36",
+        ParentID: 35
+    },
+    {
+        TaskID: 38,
+        TaskName: "Final Product",
+        StartDate: new Date('2019-06-20'),
+        EndDate: new Date('2019-06-27')
+    },
+    {
+        TaskID: 39,
+        TaskName: "Branding product",
+        StartDate: new Date('2019-06-20'),
+        Duration: 4,
+        Predecessor: "37",
+        ParentID: 38
+    },
+    {
+        TaskID: 40,
+        TaskName: "Marketing and presales",
+        StartDate: new Date('2019-06-24'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "39",
+        ParentID: 38
+    }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/event-markers-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/event-markers-cs1/es5-datasource.js
index 5fb197d24..c66da126d 100644
--- a/ej2-javascript/code-snippet/gantt/event-markers-cs1/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/event-markers-cs1/es5-datasource.js
@@ -1,24 +1,326 @@
 var GanttData = [
-        {
-            TaskID: 1,
-            TaskName: 'Project Initiation',
-            StartDate: new Date('04/02/2019'),
-            EndDate: new Date('04/21/2019'),
-            subtasks: [
-                { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
-                { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
-                { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
-            ]
-        },
-        {
-            TaskID: 5,
-            TaskName: 'Project Estimation',
-            StartDate: new Date('04/02/2019'),
-            EndDate: new Date('04/21/2019'),
-            subtasks: [
-                { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
-                { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
-                { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
-            ]
-        },
-    ];
\ No newline at end of file
+    {
+        TaskID: 1,
+        TaskName: "Product Concept",
+        StartDate: new Date('2019-04-02'),
+        EndDate: new Date('2019-04-21')
+    },
+    {
+        TaskID: 2,
+        TaskName: "Defining the product and its usage",
+        StartDate: new Date('2019-04-02'),
+        Duration: 3,
+        Progress: 30,
+        ParentID: 1
+    },
+    {
+        TaskID: 3,
+        TaskName: "Defining target audience",
+        StartDate: new Date('2019-04-02'),
+        Duration: 3,
+        ParentID: 1
+    },
+    {
+        TaskID: 4,
+        TaskName: "Prepare product sketch and notes",
+        StartDate: new Date('2019-04-02'),
+        Duration: 2,
+        Predecessor: "2",
+        Progress: 30,
+        ParentID: 1
+    },
+    {
+        TaskID: 5,
+        TaskName: "Concept Approval",
+        StartDate: new Date('2019-04-02'),
+        Duration: 0,
+        Predecessor: "3,4",
+        Indicators: [
+            { date: new Date('2019-04-10'), name: "#briefing", title: "Product concept briefing" }
+        ]
+    },
+    {
+        TaskID: 6,
+        TaskName: "Market Research",
+        StartDate: new Date('2019-04-02'),
+        EndDate: new Date('2019-04-20')
+    },
+    {
+        TaskID: 7,
+        TaskName: "Demand Analysis",
+        StartDate: new Date('2019-04-04'),
+        EndDate: new Date('2019-04-20'),
+        ParentID: 6
+    },
+    {
+        TaskID: 8,
+        TaskName: "Customer strength",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "5",
+        Progress: 30,
+        ParentID: 7
+    },
+    {
+        TaskID: 9,
+        TaskName: "Market opportunity analysis",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "5",
+        ParentID: 7
+    },
+    {
+        TaskID: 10,
+        TaskName: "Competitor Analysis",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "7,8",
+        Progress: 30,
+        ParentID: 6
+    },
+    {
+        TaskID: 11,
+        TaskName: "Product strength analysis",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "9",
+        ParentID: 6
+    },
+    {
+        TaskID: 12,
+        TaskName: "Research complete",
+        StartDate: new Date('2019-04-20'),
+        Duration: 0,
+        Predecessor: "10",
+        Indicators: [
+            { date: new Date('2019-04-20'), name: "#meeting", title: "1st board of directors meeting" }
+        ],
+        ParentID: 6
+    },
+    {
+        TaskID: 13,
+        TaskName: "Product Design and Development",
+        StartDate: new Date('2019-04-21'),
+        EndDate: new Date('2019-05-18')
+    },
+    {
+        TaskID: 14,
+        TaskName: "Functionality design",
+        StartDate: new Date('2019-04-21'),
+        Duration: 3,
+        Progress: 30,
+        Predecessor: "12",
+        ParentID: 13
+    },
+    {
+        TaskID: 15,
+        TaskName: "Quality design",
+        StartDate: new Date('2019-04-21'),
+        Duration: 3,
+        Predecessor: "12",
+        ParentID: 13
+    },
+    {
+        TaskID: 16,
+        TaskName: "Define Reliability",
+        StartDate: new Date('2019-04-24'),
+        Duration: 2,
+        Progress: 30,
+        Predecessor: "15",
+        ParentID: 13
+    },
+    {
+        TaskID: 17,
+        TaskName: "Identifying raw materials",
+        StartDate: new Date('2019-04-24'),
+        Duration: 2,
+        Predecessor: "15",
+        ParentID: 13
+    },
+    {
+        TaskID: 18,
+        TaskName: "Define cost plan",
+        StartDate: new Date('2019-04-26'),
+        EndDate: new Date('2019-05-18'),
+        ParentID: 13
+    },
+    {
+        TaskID: 19,
+        TaskName: "Manufacturing cost",
+        StartDate: new Date('2019-04-26'),
+        Duration: 2,
+        Progress: 30,
+        Predecessor: "17",
+        ParentID: 18
+    },
+    {
+        TaskID: 20,
+        TaskName: "Selling cost",
+        StartDate: new Date('2019-04-26'),
+        Duration: 2,
+        Predecessor: "17",
+        ParentID: 18
+    },
+    {
+        TaskID: 21,
+        TaskName: "Development of the final design",
+        StartDate: new Date('2019-04-28'),
+        EndDate: new Date('2019-05-18'),
+        ParentID: 13
+    },
+    {
+        TaskID: 22,
+        TaskName: "Defining dimensions and package volume",
+        StartDate: new Date('2019-04-28'),
+        Duration: 2,
+        Progress: 30,
+        Predecessor: "19,20",
+        ParentID: 21
+    },
+    {
+        TaskID: 23,
+        TaskName: "Develop design to meet industry standards",
+        StartDate: new Date('2019-04-30'),
+        Duration: 2,
+        Predecessor: "22",
+        ParentID: 21
+    },
+    {
+        TaskID: 24,
+        TaskName: "Include all the details",
+        StartDate: new Date('2019-05-02'),
+        Duration: 3,
+        Predecessor: "23",
+        ParentID: 21
+    },
+    {
+        TaskID: 25,
+        TaskName: "CAD Computer-aided design",
+        StartDate: new Date('2019-05-05'),
+        Duration: 3,
+        Progress: 30,
+        Predecessor: "24",
+        ParentID: 13
+    },
+    {
+        TaskID: 26,
+        TaskName: "CAM Computer-aided manufacturing",
+        StartDate: new Date('2019-05-08'),
+        Duration: 3,
+        Predecessor: "25",
+        ParentID: 13
+    },
+    {
+        TaskID: 27,
+        TaskName: "Design complete",
+        StartDate: new Date('2019-05-11'),
+        Duration: 0,
+        Predecessor: "26",
+        Indicators: [
+            { date: new Date('2019-05-18'), name: "#meeting", title: "2nd board of directors meeting" }
+        ],
+        ParentID: 13
+    },
+    {
+        TaskID: 28,
+        TaskName: "Prototype Testing",
+        StartDate: new Date('2019-05-19'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "27"
+    },
+    {
+        TaskID: 29,
+        TaskName: "Include feedback",
+        StartDate: new Date('2019-05-23'),
+        Duration: 4,
+        Predecessor: "28",
+        ParentID: 32
+    },
+    {
+        TaskID: 30,
+        TaskName: "Manufacturing",
+        StartDate: new Date('2019-05-27'),
+        Duration: 5,
+        Progress: 30,
+        Predecessor: "28,29"
+    },
+    {
+        TaskID: 31,
+        TaskName: "Assembling materials to finished goods",
+        StartDate: new Date('2019-06-01'),
+        Duration: 5,
+        Predecessor: "30"
+    },
+    {
+        TaskID: 32,
+        TaskName: "Feedback and Testing",
+        StartDate: new Date('2019-05-23'),
+        EndDate: new Date('2019-06-05')
+    },
+    {
+        TaskID: 33,
+        TaskName: "Internal testing and feedback",
+        StartDate: new Date('2019-05-23'),
+        Duration: 3,
+        Progress: 45,
+        Predecessor: "31",
+        ParentID: 32
+    },
+    {
+        TaskID: 34,
+        TaskName: "Customer testing and feedback",
+        StartDate: new Date('2019-05-26'),
+        Duration: 3,
+        Progress: 50,
+        Predecessor: "33",
+        ParentID: 32
+    },
+    {
+        TaskID: 35,
+        TaskName: "Final Product Development",
+        StartDate: new Date('2019-05-29'),
+        EndDate: new Date('2019-06-05')
+    },
+    {
+        TaskID: 36,
+        TaskName: "Important improvements",
+        StartDate: new Date('2019-05-29'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "34",
+        ParentID: 35
+    },
+    {
+        TaskID: 37,
+        TaskName: "Address any unforeseen issues",
+        StartDate: new Date('2019-06-02'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "36",
+        ParentID: 35
+    },
+    {
+        TaskID: 38,
+        TaskName: "Final Product",
+        StartDate: new Date('2019-06-20'),
+        EndDate: new Date('2019-06-27')
+    },
+    {
+        TaskID: 39,
+        TaskName: "Branding product",
+        StartDate: new Date('2019-06-20'),
+        Duration: 4,
+        Predecessor: "37",
+        ParentID: 38
+    },
+    {
+        TaskID: 40,
+        TaskName: "Marketing and presales",
+        StartDate: new Date('2019-06-24'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "39",
+        ParentID: 38
+    }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/event-markers-cs1/index.js b/ej2-javascript/code-snippet/gantt/event-markers-cs1/index.js
index 18cd0b883..e8ee38fa9 100644
--- a/ej2-javascript/code-snippet/gantt/event-markers-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/event-markers-cs1/index.js
@@ -1,23 +1,30 @@
 ej.gantt.Gantt.Inject(ej.gantt.DayMarkers);
 
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			child: 'subtasks'
-        },
-		eventMarkers: [
-            {
-                day: '04/10/2019',
-                cssClass: 'e-custom-event-marker',
-                label: 'Project approval and kick-off' 
-            }
-        ]
+    height: '430px',
+    dataSource: GanttData,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    eventMarkers: [
+        { day: new Date('2019-04-20'), label: 'Research phase ends' },
+        { day: new Date('2019-05-18'), label: 'Design phase ends' },
+        { day: new Date('2019-06-05'), label: 'Production phase ends' },
+        { day: new Date('2019-06-20'), label: 'Sales and marketing phase starts' }
+    ],
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: '100' },
+        { field: 'TaskName', headerText: 'Task Name', width: '150' },
+        { field: 'StartDate', headerText: 'Start Date', width: '150' },
+        { field: 'Duration', headerText: 'Duration', width: '150' },
+        { field: 'Progress', headerText: 'Progress', width: '150' }
+    ]
 });
-ganttChart.appendTo('#Gantt');
 
+ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/event-markers-cs1/index.ts b/ej2-javascript/code-snippet/gantt/event-markers-cs1/index.ts
index 419aa59a0..2856f35eb 100644
--- a/ej2-javascript/code-snippet/gantt/event-markers-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/event-markers-cs1/index.ts
@@ -1,33 +1,33 @@
-
-
-
 import { Gantt, DayMarkers } from '@syncfusion/ej2-gantt';
-import { GanttData } from 'datasource.ts';
+import { GanttData } from './datasource.ts';
 
 Gantt.Inject(DayMarkers);
 
 let gantt: Gantt = new Gantt({
+    height: '430px',
     dataSource: GanttData,
-    height: '450px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
         startDate: 'StartDate',
-        resourceInfo: 'resources',
+        endDate: 'EndDate',
         duration: 'Duration',
         progress: 'Progress',
-        dependency: 'Predecessor',
-        child: 'subtasks'
+        parentID: 'ParentID'
     },
     eventMarkers: [
-        {
-            day: '04/10/2019',
-            cssClass: 'e-custom-event-marker',
-            label: 'Project approval and kick-off'
-        }
+        { day: new Date('2019-04-20'), label: 'Research phase ends' },
+        { day: new Date('2019-05-18'), label: 'Design phase ends' },
+        { day: new Date('2019-06-05'), label: 'Production phase ends' },
+        { day: new Date('2019-06-20'), label: 'Sales and marketing phase starts' }
+    ],
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: '100' },
+        { field: 'TaskName', headerText: 'Task Name', width: '150' },
+        { field: 'StartDate', headerText: 'Start Date', width: '150' },
+        { field: 'Duration', headerText: 'Duration', width: '150' },
+        { field: 'Progress', headerText: 'Progress', width: '150' }
     ]
 });
-gantt.appendTo('#Gantt');
-
-
 
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/event-markers-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/event-markers-cs1/js/index.html
index a93e856e8..9252eae89 100644
--- a/ej2-javascript/code-snippet/gantt/event-markers-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/event-markers-cs1/js/index.html
@@ -1,36 +1,35 @@
-<!DOCTYPE html><html lang="en"><head>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
     <title>EJ2 Gantt</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Typescript Gantt Controls">
     <meta name="author" content="Syncfusion">
     <link href="index.css" rel="stylesheet">
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-    
-    
-	<style>
-       .e-gantt .e-gantt-chart .e-custom-event-marker {
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <style>
+        .e-gantt .e-gantt-chart .e-custom-event-marker {
             width: 1px;
             border-left: 2px green dotted;
         }
-	</style>
-<script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-<script src="es5-datasource.js" type="text/javascript"></script>
+    </style>
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
 </head>
 
 <body>
-       
-    
     <div id="container">
-        <div id="Gantt"></div>        
+        <div id="Gantt"></div>
     </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
 
-
-<script>
-var ele = document.getElementById('container');
-if(ele) {
-  ele.style.visibility = "visible";
-}   
-      </script>
-<script src="index.js" type="text/javascript"></script>
-</body></html>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/event-markers-cs3/datasource.ts b/ej2-javascript/code-snippet/gantt/event-markers-cs3/datasource.ts
new file mode 100644
index 000000000..72cf493a3
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/event-markers-cs3/datasource.ts
@@ -0,0 +1,326 @@
+export let GanttData: Object[] = [
+    {
+        TaskID: 1,
+        TaskName: "Product Concept",
+        StartDate: new Date('2019-04-02'),
+        EndDate: new Date('2019-04-21')
+    },
+    {
+        TaskID: 2,
+        TaskName: "Defining the product and its usage",
+        StartDate: new Date('2019-04-02'),
+        Duration: 3,
+        Progress: 30,
+        ParentID: 1
+    },
+    {
+        TaskID: 3,
+        TaskName: "Defining target audience",
+        StartDate: new Date('2019-04-02'),
+        Duration: 3,
+        ParentID: 1
+    },
+    {
+        TaskID: 4,
+        TaskName: "Prepare product sketch and notes",
+        StartDate: new Date('2019-04-02'),
+        Duration: 2,
+        Predecessor: "2",
+        Progress: 30,
+        ParentID: 1
+    },
+    {
+        TaskID: 5,
+        TaskName: "Concept Approval",
+        StartDate: new Date('2019-04-02'),
+        Duration: 0,
+        Predecessor: "3,4",
+        Indicators: [
+            { date: new Date('2019-04-10'), name: "#briefing", title: "Product concept briefing" }
+        ]
+    },
+    {
+        TaskID: 6,
+        TaskName: "Market Research",
+        StartDate: new Date('2019-04-02'),
+        EndDate: new Date('2019-04-20')
+    },
+    {
+        TaskID: 7,
+        TaskName: "Demand Analysis",
+        StartDate: new Date('2019-04-04'),
+        EndDate: new Date('2019-04-20'),
+        ParentID: 6
+    },
+    {
+        TaskID: 8,
+        TaskName: "Customer strength",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "5",
+        Progress: 30,
+        ParentID: 7
+    },
+    {
+        TaskID: 9,
+        TaskName: "Market opportunity analysis",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "5",
+        ParentID: 7
+    },
+    {
+        TaskID: 10,
+        TaskName: "Competitor Analysis",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "7,8",
+        Progress: 30,
+        ParentID: 6
+    },
+    {
+        TaskID: 11,
+        TaskName: "Product strength analysis",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "9",
+        ParentID: 6
+    },
+    {
+        TaskID: 12,
+        TaskName: "Research complete",
+        StartDate: new Date('2019-04-20'),
+        Duration: 0,
+        Predecessor: "10",
+        Indicators: [
+            { date: new Date('2019-04-20'), name: "#meeting", title: "1st board of directors meeting" }
+        ],
+        ParentID: 6
+    },
+    {
+        TaskID: 13,
+        TaskName: "Product Design and Development",
+        StartDate: new Date('2019-04-21'),
+        EndDate: new Date('2019-05-18')
+    },
+    {
+        TaskID: 14,
+        TaskName: "Functionality design",
+        StartDate: new Date('2019-04-21'),
+        Duration: 3,
+        Progress: 30,
+        Predecessor: "12",
+        ParentID: 13
+    },
+    {
+        TaskID: 15,
+        TaskName: "Quality design",
+        StartDate: new Date('2019-04-21'),
+        Duration: 3,
+        Predecessor: "12",
+        ParentID: 13
+    },
+    {
+        TaskID: 16,
+        TaskName: "Define Reliability",
+        StartDate: new Date('2019-04-24'),
+        Duration: 2,
+        Progress: 30,
+        Predecessor: "15",
+        ParentID: 13
+    },
+    {
+        TaskID: 17,
+        TaskName: "Identifying raw materials",
+        StartDate: new Date('2019-04-24'),
+        Duration: 2,
+        Predecessor: "15",
+        ParentID: 13
+    },
+    {
+        TaskID: 18,
+        TaskName: "Define cost plan",
+        StartDate: new Date('2019-04-26'),
+        EndDate: new Date('2019-05-18'),
+        ParentID: 13
+    },
+    {
+        TaskID: 19,
+        TaskName: "Manufacturing cost",
+        StartDate: new Date('2019-04-26'),
+        Duration: 2,
+        Progress: 30,
+        Predecessor: "17",
+        ParentID: 18
+    },
+    {
+        TaskID: 20,
+        TaskName: "Selling cost",
+        StartDate: new Date('2019-04-26'),
+        Duration: 2,
+        Predecessor: "17",
+        ParentID: 18
+    },
+    {
+        TaskID: 21,
+        TaskName: "Development of the final design",
+        StartDate: new Date('2019-04-28'),
+        EndDate: new Date('2019-05-18'),
+        ParentID: 13
+    },
+    {
+        TaskID: 22,
+        TaskName: "Defining dimensions and package volume",
+        StartDate: new Date('2019-04-28'),
+        Duration: 2,
+        Progress: 30,
+        Predecessor: "19,20",
+        ParentID: 21
+    },
+    {
+        TaskID: 23,
+        TaskName: "Develop design to meet industry standards",
+        StartDate: new Date('2019-04-30'),
+        Duration: 2,
+        Predecessor: "22",
+        ParentID: 21
+    },
+    {
+        TaskID: 24,
+        TaskName: "Include all the details",
+        StartDate: new Date('2019-05-02'),
+        Duration: 3,
+        Predecessor: "23",
+        ParentID: 21
+    },
+    {
+        TaskID: 25,
+        TaskName: "CAD Computer-aided design",
+        StartDate: new Date('2019-05-05'),
+        Duration: 3,
+        Progress: 30,
+        Predecessor: "24",
+        ParentID: 13
+    },
+    {
+        TaskID: 26,
+        TaskName: "CAM Computer-aided manufacturing",
+        StartDate: new Date('2019-05-08'),
+        Duration: 3,
+        Predecessor: "25",
+        ParentID: 13
+    },
+    {
+        TaskID: 27,
+        TaskName: "Design complete",
+        StartDate: new Date('2019-05-11'),
+        Duration: 0,
+        Predecessor: "26",
+        Indicators: [
+            { date: new Date('2019-05-18'), name: "#meeting", title: "2nd board of directors meeting" }
+        ],
+        ParentID: 13
+    },
+    {
+        TaskID: 28,
+        TaskName: "Prototype Testing",
+        StartDate: new Date('2019-05-19'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "27"
+    },
+    {
+        TaskID: 29,
+        TaskName: "Include feedback",
+        StartDate: new Date('2019-05-23'),
+        Duration: 4,
+        Predecessor: "28",
+        ParentID: 32
+    },
+    {
+        TaskID: 30,
+        TaskName: "Manufacturing",
+        StartDate: new Date('2019-05-27'),
+        Duration: 5,
+        Progress: 30,
+        Predecessor: "28,29"
+    },
+    {
+        TaskID: 31,
+        TaskName: "Assembling materials to finished goods",
+        StartDate: new Date('2019-06-01'),
+        Duration: 5,
+        Predecessor: "30"
+    },
+    {
+        TaskID: 32,
+        TaskName: "Feedback and Testing",
+        StartDate: new Date('2019-05-23'),
+        EndDate: new Date('2019-06-05')
+    },
+    {
+        TaskID: 33,
+        TaskName: "Internal testing and feedback",
+        StartDate: new Date('2019-05-23'),
+        Duration: 3,
+        Progress: 45,
+        Predecessor: "31",
+        ParentID: 32
+    },
+    {
+        TaskID: 34,
+        TaskName: "Customer testing and feedback",
+        StartDate: new Date('2019-05-26'),
+        Duration: 3,
+        Progress: 50,
+        Predecessor: "33",
+        ParentID: 32
+    },
+    {
+        TaskID: 35,
+        TaskName: "Final Product Development",
+        StartDate: new Date('2019-05-29'),
+        EndDate: new Date('2019-06-05')
+    },
+    {
+        TaskID: 36,
+        TaskName: "Important improvements",
+        StartDate: new Date('2019-05-29'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "34",
+        ParentID: 35
+    },
+    {
+        TaskID: 37,
+        TaskName: "Address any unforeseen issues",
+        StartDate: new Date('2019-06-02'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "36",
+        ParentID: 35
+    },
+    {
+        TaskID: 38,
+        TaskName: "Final Product",
+        StartDate: new Date('2019-06-20'),
+        EndDate: new Date('2019-06-27')
+    },
+    {
+        TaskID: 39,
+        TaskName: "Branding product",
+        StartDate: new Date('2019-06-20'),
+        Duration: 4,
+        Predecessor: "37",
+        ParentID: 38
+    },
+    {
+        TaskID: 40,
+        TaskName: "Marketing and presales",
+        StartDate: new Date('2019-06-24'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "39",
+        ParentID: 38
+    }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/event-markers-cs3/es5-datasource.js b/ej2-javascript/code-snippet/gantt/event-markers-cs3/es5-datasource.js
new file mode 100644
index 000000000..c66da126d
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/event-markers-cs3/es5-datasource.js
@@ -0,0 +1,326 @@
+var GanttData = [
+    {
+        TaskID: 1,
+        TaskName: "Product Concept",
+        StartDate: new Date('2019-04-02'),
+        EndDate: new Date('2019-04-21')
+    },
+    {
+        TaskID: 2,
+        TaskName: "Defining the product and its usage",
+        StartDate: new Date('2019-04-02'),
+        Duration: 3,
+        Progress: 30,
+        ParentID: 1
+    },
+    {
+        TaskID: 3,
+        TaskName: "Defining target audience",
+        StartDate: new Date('2019-04-02'),
+        Duration: 3,
+        ParentID: 1
+    },
+    {
+        TaskID: 4,
+        TaskName: "Prepare product sketch and notes",
+        StartDate: new Date('2019-04-02'),
+        Duration: 2,
+        Predecessor: "2",
+        Progress: 30,
+        ParentID: 1
+    },
+    {
+        TaskID: 5,
+        TaskName: "Concept Approval",
+        StartDate: new Date('2019-04-02'),
+        Duration: 0,
+        Predecessor: "3,4",
+        Indicators: [
+            { date: new Date('2019-04-10'), name: "#briefing", title: "Product concept briefing" }
+        ]
+    },
+    {
+        TaskID: 6,
+        TaskName: "Market Research",
+        StartDate: new Date('2019-04-02'),
+        EndDate: new Date('2019-04-20')
+    },
+    {
+        TaskID: 7,
+        TaskName: "Demand Analysis",
+        StartDate: new Date('2019-04-04'),
+        EndDate: new Date('2019-04-20'),
+        ParentID: 6
+    },
+    {
+        TaskID: 8,
+        TaskName: "Customer strength",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "5",
+        Progress: 30,
+        ParentID: 7
+    },
+    {
+        TaskID: 9,
+        TaskName: "Market opportunity analysis",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "5",
+        ParentID: 7
+    },
+    {
+        TaskID: 10,
+        TaskName: "Competitor Analysis",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "7,8",
+        Progress: 30,
+        ParentID: 6
+    },
+    {
+        TaskID: 11,
+        TaskName: "Product strength analysis",
+        StartDate: new Date('2019-04-04'),
+        Duration: 4,
+        Predecessor: "9",
+        ParentID: 6
+    },
+    {
+        TaskID: 12,
+        TaskName: "Research complete",
+        StartDate: new Date('2019-04-20'),
+        Duration: 0,
+        Predecessor: "10",
+        Indicators: [
+            { date: new Date('2019-04-20'), name: "#meeting", title: "1st board of directors meeting" }
+        ],
+        ParentID: 6
+    },
+    {
+        TaskID: 13,
+        TaskName: "Product Design and Development",
+        StartDate: new Date('2019-04-21'),
+        EndDate: new Date('2019-05-18')
+    },
+    {
+        TaskID: 14,
+        TaskName: "Functionality design",
+        StartDate: new Date('2019-04-21'),
+        Duration: 3,
+        Progress: 30,
+        Predecessor: "12",
+        ParentID: 13
+    },
+    {
+        TaskID: 15,
+        TaskName: "Quality design",
+        StartDate: new Date('2019-04-21'),
+        Duration: 3,
+        Predecessor: "12",
+        ParentID: 13
+    },
+    {
+        TaskID: 16,
+        TaskName: "Define Reliability",
+        StartDate: new Date('2019-04-24'),
+        Duration: 2,
+        Progress: 30,
+        Predecessor: "15",
+        ParentID: 13
+    },
+    {
+        TaskID: 17,
+        TaskName: "Identifying raw materials",
+        StartDate: new Date('2019-04-24'),
+        Duration: 2,
+        Predecessor: "15",
+        ParentID: 13
+    },
+    {
+        TaskID: 18,
+        TaskName: "Define cost plan",
+        StartDate: new Date('2019-04-26'),
+        EndDate: new Date('2019-05-18'),
+        ParentID: 13
+    },
+    {
+        TaskID: 19,
+        TaskName: "Manufacturing cost",
+        StartDate: new Date('2019-04-26'),
+        Duration: 2,
+        Progress: 30,
+        Predecessor: "17",
+        ParentID: 18
+    },
+    {
+        TaskID: 20,
+        TaskName: "Selling cost",
+        StartDate: new Date('2019-04-26'),
+        Duration: 2,
+        Predecessor: "17",
+        ParentID: 18
+    },
+    {
+        TaskID: 21,
+        TaskName: "Development of the final design",
+        StartDate: new Date('2019-04-28'),
+        EndDate: new Date('2019-05-18'),
+        ParentID: 13
+    },
+    {
+        TaskID: 22,
+        TaskName: "Defining dimensions and package volume",
+        StartDate: new Date('2019-04-28'),
+        Duration: 2,
+        Progress: 30,
+        Predecessor: "19,20",
+        ParentID: 21
+    },
+    {
+        TaskID: 23,
+        TaskName: "Develop design to meet industry standards",
+        StartDate: new Date('2019-04-30'),
+        Duration: 2,
+        Predecessor: "22",
+        ParentID: 21
+    },
+    {
+        TaskID: 24,
+        TaskName: "Include all the details",
+        StartDate: new Date('2019-05-02'),
+        Duration: 3,
+        Predecessor: "23",
+        ParentID: 21
+    },
+    {
+        TaskID: 25,
+        TaskName: "CAD Computer-aided design",
+        StartDate: new Date('2019-05-05'),
+        Duration: 3,
+        Progress: 30,
+        Predecessor: "24",
+        ParentID: 13
+    },
+    {
+        TaskID: 26,
+        TaskName: "CAM Computer-aided manufacturing",
+        StartDate: new Date('2019-05-08'),
+        Duration: 3,
+        Predecessor: "25",
+        ParentID: 13
+    },
+    {
+        TaskID: 27,
+        TaskName: "Design complete",
+        StartDate: new Date('2019-05-11'),
+        Duration: 0,
+        Predecessor: "26",
+        Indicators: [
+            { date: new Date('2019-05-18'), name: "#meeting", title: "2nd board of directors meeting" }
+        ],
+        ParentID: 13
+    },
+    {
+        TaskID: 28,
+        TaskName: "Prototype Testing",
+        StartDate: new Date('2019-05-19'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "27"
+    },
+    {
+        TaskID: 29,
+        TaskName: "Include feedback",
+        StartDate: new Date('2019-05-23'),
+        Duration: 4,
+        Predecessor: "28",
+        ParentID: 32
+    },
+    {
+        TaskID: 30,
+        TaskName: "Manufacturing",
+        StartDate: new Date('2019-05-27'),
+        Duration: 5,
+        Progress: 30,
+        Predecessor: "28,29"
+    },
+    {
+        TaskID: 31,
+        TaskName: "Assembling materials to finished goods",
+        StartDate: new Date('2019-06-01'),
+        Duration: 5,
+        Predecessor: "30"
+    },
+    {
+        TaskID: 32,
+        TaskName: "Feedback and Testing",
+        StartDate: new Date('2019-05-23'),
+        EndDate: new Date('2019-06-05')
+    },
+    {
+        TaskID: 33,
+        TaskName: "Internal testing and feedback",
+        StartDate: new Date('2019-05-23'),
+        Duration: 3,
+        Progress: 45,
+        Predecessor: "31",
+        ParentID: 32
+    },
+    {
+        TaskID: 34,
+        TaskName: "Customer testing and feedback",
+        StartDate: new Date('2019-05-26'),
+        Duration: 3,
+        Progress: 50,
+        Predecessor: "33",
+        ParentID: 32
+    },
+    {
+        TaskID: 35,
+        TaskName: "Final Product Development",
+        StartDate: new Date('2019-05-29'),
+        EndDate: new Date('2019-06-05')
+    },
+    {
+        TaskID: 36,
+        TaskName: "Important improvements",
+        StartDate: new Date('2019-05-29'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "34",
+        ParentID: 35
+    },
+    {
+        TaskID: 37,
+        TaskName: "Address any unforeseen issues",
+        StartDate: new Date('2019-06-02'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "36",
+        ParentID: 35
+    },
+    {
+        TaskID: 38,
+        TaskName: "Final Product",
+        StartDate: new Date('2019-06-20'),
+        EndDate: new Date('2019-06-27')
+    },
+    {
+        TaskID: 39,
+        TaskName: "Branding product",
+        StartDate: new Date('2019-06-20'),
+        Duration: 4,
+        Predecessor: "37",
+        ParentID: 38
+    },
+    {
+        TaskID: 40,
+        TaskName: "Marketing and presales",
+        StartDate: new Date('2019-06-24'),
+        Duration: 4,
+        Progress: 30,
+        Predecessor: "39",
+        ParentID: 38
+    }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/event-markers-cs3/index.css b/ej2-javascript/code-snippet/gantt/event-markers-cs3/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/event-markers-cs3/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/event-markers-cs3/index.js b/ej2-javascript/code-snippet/gantt/event-markers-cs3/index.js
new file mode 100644
index 000000000..4f0a22c2f
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/event-markers-cs3/index.js
@@ -0,0 +1,40 @@
+var eventMarkersEnabled = true;
+
+var defaultMarkers = [
+    { day: new Date('04/09/2019'), label: 'Research phase' },
+    { day: new Date('04/30/2019'), label: 'Design phase' },
+    { day: new Date('05/23/2019'), label: 'Production phase' },
+    { day: new Date('06/20/2019'), label: 'Sales and marketing phase' }
+];
+
+var ganttChart = new ej.gantt.Gantt({
+    height: '430px',
+    dataSource: GanttData,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    eventMarkers: defaultMarkers,
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: '100' },
+        { field: 'TaskName', headerText: 'Task Name', width: '150' },
+        { field: 'StartDate', headerText: 'Start Date', width: '150' },
+        { field: 'Duration', headerText: 'Duration', width: '150' },
+        { field: 'Progress', headerText: 'Progress', width: '150' }
+    ]
+});
+ganttChart.appendTo('#Gantt');
+
+var eventBtn = new ej.buttons.Button({ content: 'Event Markers' });
+eventBtn.appendTo('#eventMarkers');
+
+document.getElementById('eventMarkers').addEventListener('click', function () {
+    ganttChart.eventMarkers = eventMarkersEnabled ? [] : defaultMarkers.slice();
+    ganttChart.refresh();
+    eventMarkersEnabled = !eventMarkersEnabled;
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/event-markers-cs3/index.ts b/ej2-javascript/code-snippet/gantt/event-markers-cs3/index.ts
new file mode 100644
index 000000000..8b225b4a6
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/event-markers-cs3/index.ts
@@ -0,0 +1,47 @@
+import { Gantt, DayMarkers } from '@syncfusion/ej2-gantt';
+import { Button } from '@syncfusion/ej2-buttons';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(DayMarkers);
+
+let eventMarkersEnabled: boolean = true;
+
+const defaultMarkers: Array<{ day: Date; label: string }> = [
+    { day: new Date('04/09/2019'), label: 'Research phase' },
+    { day: new Date('04/30/2019'), label: 'Design phase' },
+    { day: new Date('05/23/2019'), label: 'Production phase' },
+    { day: new Date('06/20/2019'), label: 'Sales and marketing phase' }
+];
+
+let gantt: Gantt = new Gantt({
+    height: '430px',
+    dataSource: GanttData,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    eventMarkers: defaultMarkers,
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: '100' },
+        { field: 'TaskName', headerText: 'Task Name', width: '150' },
+        { field: 'StartDate', headerText: 'Start Date', width: '150' },
+        { field: 'Duration', headerText: 'Duration', width: '150' },
+        { field: 'Progress', headerText: 'Progress', width: '150' }
+    ]
+});
+
+gantt.appendTo('#Gantt');
+
+let eventBtn: Button = new Button({ content: 'Event Markers' });
+eventBtn.appendTo('#eventMarkers');
+
+document.getElementById('eventMarkers')!.addEventListener('click', () => {
+    gantt.eventMarkers = eventMarkersEnabled ? [] : defaultMarkers.slice();
+    gantt.refresh();
+    eventMarkersEnabled = !eventMarkersEnabled;
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/event-markers-cs3/js/index.html b/ej2-javascript/code-snippet/gantt/event-markers-cs3/js/index.html
new file mode 100644
index 000000000..fd1663a51
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/event-markers-cs3/js/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <style>
+        .e-gantt .e-gantt-chart .e-custom-event-marker {
+            width: 1px;
+            border-left: 2px green dotted;
+        }
+    </style>
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div style="margin-bottom:20px;">
+            <button id="eventMarkers"></button>
+        </div>
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/event-markers-cs3/systemjs.config.js b/ej2-javascript/code-snippet/gantt/event-markers-cs3/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/event-markers-cs3/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/event-markers-cs3/ts/index.html b/ej2-javascript/code-snippet/gantt/event-markers-cs3/ts/index.html
new file mode 100644
index 000000000..425dfef44
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/event-markers-cs3/ts/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+    <style>
+        .e-gantt .e-gantt-chart .e-custom-event-marker {
+            width: 1px;
+            border-left: 2px green dotted;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div style="margin-bottom:20px;">
+            <button id="eventMarkers"></button>
+        </div>
+        <div id='Gantt'></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs10/datasource.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs10/datasource.ts
new file mode 100644
index 000000000..04cf6dd52
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs10/datasource.ts
@@ -0,0 +1,20 @@
+export let GanttData: Object[] = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs10/es5-datasource.js b/ej2-javascript/code-snippet/gantt/excel-export-cs10/es5-datasource.js
new file mode 100644
index 000000000..7f269d947
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs10/es5-datasource.js
@@ -0,0 +1,20 @@
+var GanttData = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs10/index.css b/ej2-javascript/code-snippet/gantt/excel-export-cs10/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs10/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs10/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs10/index.html
new file mode 100644
index 000000000..0b7fc4fc8
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs10/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>EJ2 Gantt</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Typescript Gantt Controls">
+        <meta name="author" content="Syncfusion">
+        <link href="index.css" rel="stylesheet">
+        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+        <script src="es5-datasource.js" type="text/javascript"></script>
+    </head>
+
+    <body>
+        <div id="container">
+          <div id="GanttDefault"></div>
+        </div>
+        <script>
+            var ele = document.getElementById('container');
+            if(ele) {
+            ele.style.visibility = "visible";
+            }   
+        </script>
+        <script src="index.js" type="text/javascript"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs10/index.js b/ej2-javascript/code-snippet/gantt/excel-export-cs10/index.js
new file mode 100644
index 000000000..666ecdb22
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs10/index.js
@@ -0,0 +1,40 @@
+ej.gantt.Gantt.Inject(ej.gantt.Toolbar, ej.gantt.ExcelExport, ej.gantt.Selection);
+
+var gantt = new ej.gantt.Gantt({
+    id: 'ganttDefault',
+    height: '450px',
+    dataSource: GanttData,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    toolbar: ['ExcelExport'],
+    allowExcelExport: true,
+
+    toolbarClick: function (args) {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            gantt.showSpinner();
+            setTimeout(function () {
+                gantt.excelExport();
+            }, 2000);
+        }
+    },
+
+    excelExportComplete: function () {
+        gantt.hideSpinner();
+    },
+
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 120 },
+        { field: 'TaskName', headerText: 'Task Name', width: 180 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 120 },
+        { field: 'Progress', headerText: 'Progress', width: 120 }
+    ]
+});
+
+gantt.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs10/index.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs10/index.ts
new file mode 100644
index 000000000..e05b135a4
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs10/index.ts
@@ -0,0 +1,49 @@
+import { Gantt, Toolbar, ExcelExport, Selection, TaskFieldsModel, ToolbarItem, ColumnModel } from '@syncfusion/ej2-gantt';
+import { ClickEventArgs } from '@syncfusion/ej2-navigations';
+import { ExcelExportCompleteArgs } from '@syncfusion/ej2-grids';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Toolbar, ExcelExport, Selection);
+
+const taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+const toolbar: ToolbarItem[] = ['ExcelExport'];
+
+const columns: ColumnModel[] = [
+    { field: 'TaskID', headerText: 'Task ID', width: 120 },
+    { field: 'TaskName', headerText: 'Task Name', width: 180 },
+    { field: 'StartDate', headerText: 'Start Date', width: 150 },
+    { field: 'Duration', headerText: 'Duration', width: 120 },
+    { field: 'Progress', headerText: 'Progress', width: 120 }
+];
+
+let gantt: Gantt = new Gantt({
+    height: '450px',
+    dataSource: GanttData,
+    taskFields,
+    columns,
+    toolbar,
+    allowExcelExport: true,
+
+    toolbarClick: (args: ClickEventArgs) => {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            gantt.showSpinner();
+            setTimeout(() => {
+                gantt.excelExport();
+            }, 2000);
+        }
+    },
+
+    excelExportComplete: (_args: ExcelExportCompleteArgs) => {
+        gantt.hideSpinner();
+    }
+});
+
+gantt.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs10/systemjs.config.js b/ej2-javascript/code-snippet/gantt/excel-export-cs10/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs10/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs10/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs10/ts/index.html
new file mode 100644
index 000000000..7430d8714
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs10/ts/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <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='container'>
+            <div id='GanttDefault'></div>        
+        </div>   
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs11/datasource.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs11/datasource.ts
new file mode 100644
index 000000000..04cf6dd52
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs11/datasource.ts
@@ -0,0 +1,20 @@
+export let GanttData: Object[] = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs11/es5-datasource.js b/ej2-javascript/code-snippet/gantt/excel-export-cs11/es5-datasource.js
new file mode 100644
index 000000000..7f269d947
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs11/es5-datasource.js
@@ -0,0 +1,20 @@
+var GanttData = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs11/index.css b/ej2-javascript/code-snippet/gantt/excel-export-cs11/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs11/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs11/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs11/index.html
new file mode 100644
index 000000000..0b7fc4fc8
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs11/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>EJ2 Gantt</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Typescript Gantt Controls">
+        <meta name="author" content="Syncfusion">
+        <link href="index.css" rel="stylesheet">
+        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+        <script src="es5-datasource.js" type="text/javascript"></script>
+    </head>
+
+    <body>
+        <div id="container">
+          <div id="GanttDefault"></div>
+        </div>
+        <script>
+            var ele = document.getElementById('container');
+            if(ele) {
+            ele.style.visibility = "visible";
+            }   
+        </script>
+        <script src="index.js" type="text/javascript"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs11/index.js b/ej2-javascript/code-snippet/gantt/excel-export-cs11/index.js
new file mode 100644
index 000000000..f907eadd5
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs11/index.js
@@ -0,0 +1,31 @@
+ej.gantt.Gantt.Inject(ej.gantt.Toolbar, ej.gantt.ExcelExport, ej.gantt.Selection);
+
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '430px',
+    treeColumnIndex: 1,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    toolbar: ['ExcelExport', 'CsvExport'],
+    allowExcelExport: true,
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number' },
+        { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' },
+        { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: { type: 'date', format: 'dd/MM/yyyy' } },
+        { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'number' },
+        { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' }
+    ],
+    toolbarClick: function (args) {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            ganttChart.excelExport();
+        }
+    }
+});
+
+ganttChart.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs11/index.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs11/index.ts
new file mode 100644
index 000000000..e05b135a4
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs11/index.ts
@@ -0,0 +1,49 @@
+import { Gantt, Toolbar, ExcelExport, Selection, TaskFieldsModel, ToolbarItem, ColumnModel } from '@syncfusion/ej2-gantt';
+import { ClickEventArgs } from '@syncfusion/ej2-navigations';
+import { ExcelExportCompleteArgs } from '@syncfusion/ej2-grids';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Toolbar, ExcelExport, Selection);
+
+const taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+const toolbar: ToolbarItem[] = ['ExcelExport'];
+
+const columns: ColumnModel[] = [
+    { field: 'TaskID', headerText: 'Task ID', width: 120 },
+    { field: 'TaskName', headerText: 'Task Name', width: 180 },
+    { field: 'StartDate', headerText: 'Start Date', width: 150 },
+    { field: 'Duration', headerText: 'Duration', width: 120 },
+    { field: 'Progress', headerText: 'Progress', width: 120 }
+];
+
+let gantt: Gantt = new Gantt({
+    height: '450px',
+    dataSource: GanttData,
+    taskFields,
+    columns,
+    toolbar,
+    allowExcelExport: true,
+
+    toolbarClick: (args: ClickEventArgs) => {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            gantt.showSpinner();
+            setTimeout(() => {
+                gantt.excelExport();
+            }, 2000);
+        }
+    },
+
+    excelExportComplete: (_args: ExcelExportCompleteArgs) => {
+        gantt.hideSpinner();
+    }
+});
+
+gantt.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs11/systemjs.config.js b/ej2-javascript/code-snippet/gantt/excel-export-cs11/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs11/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs11/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs11/ts/index.html
new file mode 100644
index 000000000..7430d8714
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs11/ts/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <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='container'>
+            <div id='GanttDefault'></div>        
+        </div>   
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs12/datasource.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs12/datasource.ts
new file mode 100644
index 000000000..7e30b613b
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs12/datasource.ts
@@ -0,0 +1,20 @@
+export let GanttData: Object[] = [
+  {
+    TaskID: 1,
+    TaskName: 'Project Initiation',
+    StartDate: new Date('04/02/2019'),
+    EndDate: new Date('04/21/2019'),
+  },
+  { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
+  { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
+  { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
+  {
+    TaskID: 5,
+    TaskName: 'Project Estimation',
+    StartDate: new Date('04/02/2019'),
+    EndDate: new Date('04/21/2019'),
+  },
+  { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
+  { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
+  { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs12/es5-datasource.js b/ej2-javascript/code-snippet/gantt/excel-export-cs12/es5-datasource.js
new file mode 100644
index 000000000..7f269d947
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs12/es5-datasource.js
@@ -0,0 +1,20 @@
+var GanttData = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs12/index.css b/ej2-javascript/code-snippet/gantt/excel-export-cs12/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs12/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs12/index.js b/ej2-javascript/code-snippet/gantt/excel-export-cs12/index.js
new file mode 100644
index 000000000..519afebc1
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs12/index.js
@@ -0,0 +1,53 @@
+ej.gantt.Gantt.Inject(ej.gantt.Toolbar, ej.gantt.ExcelExport, ej.gantt.Selection);
+
+function exportBlob(blob) {
+    var a = document.createElement('a');
+    document.body.appendChild(a);
+    a.style.display = 'none';
+    var url = window.URL.createObjectURL(blob);
+    a.href = url;
+    a.download = 'Export';
+    a.click();
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+}
+
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    treeColumnIndex: 1,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    toolbar: ['ExcelExport', 'CsvExport'],
+    allowExcelExport: true,
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: '100' },
+        { field: 'TaskName', headerText: 'Task Name', width: '150' },
+        { field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
+        { field: 'Duration', headerText: 'Duration', width: '150' },
+        { field: 'Progress', headerText: 'Progress', width: '150' }
+    ],
+    toolbarClick: function (args) {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            ganttChart.excelExport(undefined, undefined, undefined, true);
+        }
+        if (args.item && args.item.id === 'GanttDefault_csvexport') {
+            ganttChart.csvExport(undefined, undefined, undefined, true);
+        }
+    },
+    excelExportComplete: function (args) {
+        if (args && args.promise) {
+            args.promise.then(function (e) {
+                exportBlob(e.blobData);
+            });
+        }
+    }
+});
+
+ganttChart.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs12/index.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs12/index.ts
new file mode 100644
index 000000000..68bf54456
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs12/index.ts
@@ -0,0 +1,63 @@
+import { Gantt, Toolbar, ExcelExport, Selection, TaskFieldsModel, ColumnModel } from '@syncfusion/ej2-gantt';
+import { ClickEventArgs } from '@syncfusion/ej2-navigations';
+import { ExcelExportCompleteArgs } from '@syncfusion/ej2-grids';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Toolbar, ExcelExport, Selection);
+
+function exportBlob(blob: Blob): void {
+    const a: HTMLAnchorElement = document.createElement('a');
+    document.body.appendChild(a);
+    a.style.display = 'none';
+    const url: string = window.URL.createObjectURL(blob);
+    a.href = url;
+    a.download = 'Export';
+    a.click();
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+}
+
+const taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+const columns: ColumnModel[] = [
+    { field: 'TaskID', headerText: 'Task ID', width: '100' },
+    { field: 'TaskName', headerText: 'Task Name', width: '150' },
+    { field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
+    { field: 'Duration', headerText: 'Duration', width: '150' },
+    { field: 'Progress', headerText: 'Progress', width: '150' }
+];
+
+let gantt: Gantt = new Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    treeColumnIndex: 1,
+    taskFields,
+    toolbar: ['ExcelExport', 'CsvExport'],
+    allowExcelExport: true,
+    columns,
+    toolbarClick: (args: ClickEventArgs) => {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            gantt.excelExport(undefined, undefined, undefined, true);
+        }
+        if (args.item && args.item.id === 'GanttDefault_csvexport') {
+            gantt.csvExport(undefined, undefined, undefined, true);
+        }
+    },
+    excelExportComplete: (args: ExcelExportCompleteArgs) => {
+        const a: any = args as any;
+        if (a && a.promise) {
+            a.promise.then((e: { blobData: Blob }) => {
+                exportBlob(e.blobData);
+            });
+        }
+    }
+});
+
+gantt.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs12/js/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs12/js/index.html
new file mode 100644
index 000000000..0b7fc4fc8
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs12/js/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>EJ2 Gantt</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Typescript Gantt Controls">
+        <meta name="author" content="Syncfusion">
+        <link href="index.css" rel="stylesheet">
+        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+        <script src="es5-datasource.js" type="text/javascript"></script>
+    </head>
+
+    <body>
+        <div id="container">
+          <div id="GanttDefault"></div>
+        </div>
+        <script>
+            var ele = document.getElementById('container');
+            if(ele) {
+            ele.style.visibility = "visible";
+            }   
+        </script>
+        <script src="index.js" type="text/javascript"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs12/systemjs.config.js b/ej2-javascript/code-snippet/gantt/excel-export-cs12/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs12/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs12/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs12/ts/index.html
new file mode 100644
index 000000000..7430d8714
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs12/ts/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <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='container'>
+            <div id='GanttDefault'></div>        
+        </div>   
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs13/datasource.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs13/datasource.ts
new file mode 100644
index 000000000..7e30b613b
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs13/datasource.ts
@@ -0,0 +1,20 @@
+export let GanttData: Object[] = [
+  {
+    TaskID: 1,
+    TaskName: 'Project Initiation',
+    StartDate: new Date('04/02/2019'),
+    EndDate: new Date('04/21/2019'),
+  },
+  { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
+  { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
+  { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
+  {
+    TaskID: 5,
+    TaskName: 'Project Estimation',
+    StartDate: new Date('04/02/2019'),
+    EndDate: new Date('04/21/2019'),
+  },
+  { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
+  { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
+  { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs13/es5-datasource.js b/ej2-javascript/code-snippet/gantt/excel-export-cs13/es5-datasource.js
new file mode 100644
index 000000000..7f269d947
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs13/es5-datasource.js
@@ -0,0 +1,20 @@
+var GanttData = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs13/index.css b/ej2-javascript/code-snippet/gantt/excel-export-cs13/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs13/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs13/index.js b/ej2-javascript/code-snippet/gantt/excel-export-cs13/index.js
new file mode 100644
index 000000000..519afebc1
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs13/index.js
@@ -0,0 +1,53 @@
+ej.gantt.Gantt.Inject(ej.gantt.Toolbar, ej.gantt.ExcelExport, ej.gantt.Selection);
+
+function exportBlob(blob) {
+    var a = document.createElement('a');
+    document.body.appendChild(a);
+    a.style.display = 'none';
+    var url = window.URL.createObjectURL(blob);
+    a.href = url;
+    a.download = 'Export';
+    a.click();
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+}
+
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    treeColumnIndex: 1,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    toolbar: ['ExcelExport', 'CsvExport'],
+    allowExcelExport: true,
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: '100' },
+        { field: 'TaskName', headerText: 'Task Name', width: '150' },
+        { field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
+        { field: 'Duration', headerText: 'Duration', width: '150' },
+        { field: 'Progress', headerText: 'Progress', width: '150' }
+    ],
+    toolbarClick: function (args) {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            ganttChart.excelExport(undefined, undefined, undefined, true);
+        }
+        if (args.item && args.item.id === 'GanttDefault_csvexport') {
+            ganttChart.csvExport(undefined, undefined, undefined, true);
+        }
+    },
+    excelExportComplete: function (args) {
+        if (args && args.promise) {
+            args.promise.then(function (e) {
+                exportBlob(e.blobData);
+            });
+        }
+    }
+});
+
+ganttChart.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs13/index.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs13/index.ts
new file mode 100644
index 000000000..68bf54456
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs13/index.ts
@@ -0,0 +1,63 @@
+import { Gantt, Toolbar, ExcelExport, Selection, TaskFieldsModel, ColumnModel } from '@syncfusion/ej2-gantt';
+import { ClickEventArgs } from '@syncfusion/ej2-navigations';
+import { ExcelExportCompleteArgs } from '@syncfusion/ej2-grids';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Toolbar, ExcelExport, Selection);
+
+function exportBlob(blob: Blob): void {
+    const a: HTMLAnchorElement = document.createElement('a');
+    document.body.appendChild(a);
+    a.style.display = 'none';
+    const url: string = window.URL.createObjectURL(blob);
+    a.href = url;
+    a.download = 'Export';
+    a.click();
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+}
+
+const taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+const columns: ColumnModel[] = [
+    { field: 'TaskID', headerText: 'Task ID', width: '100' },
+    { field: 'TaskName', headerText: 'Task Name', width: '150' },
+    { field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
+    { field: 'Duration', headerText: 'Duration', width: '150' },
+    { field: 'Progress', headerText: 'Progress', width: '150' }
+];
+
+let gantt: Gantt = new Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    treeColumnIndex: 1,
+    taskFields,
+    toolbar: ['ExcelExport', 'CsvExport'],
+    allowExcelExport: true,
+    columns,
+    toolbarClick: (args: ClickEventArgs) => {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            gantt.excelExport(undefined, undefined, undefined, true);
+        }
+        if (args.item && args.item.id === 'GanttDefault_csvexport') {
+            gantt.csvExport(undefined, undefined, undefined, true);
+        }
+    },
+    excelExportComplete: (args: ExcelExportCompleteArgs) => {
+        const a: any = args as any;
+        if (a && a.promise) {
+            a.promise.then((e: { blobData: Blob }) => {
+                exportBlob(e.blobData);
+            });
+        }
+    }
+});
+
+gantt.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs13/js/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs13/js/index.html
new file mode 100644
index 000000000..0b7fc4fc8
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs13/js/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>EJ2 Gantt</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Typescript Gantt Controls">
+        <meta name="author" content="Syncfusion">
+        <link href="index.css" rel="stylesheet">
+        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+        <script src="es5-datasource.js" type="text/javascript"></script>
+    </head>
+
+    <body>
+        <div id="container">
+          <div id="GanttDefault"></div>
+        </div>
+        <script>
+            var ele = document.getElementById('container');
+            if(ele) {
+            ele.style.visibility = "visible";
+            }   
+        </script>
+        <script src="index.js" type="text/javascript"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs13/systemjs.config.js b/ej2-javascript/code-snippet/gantt/excel-export-cs13/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs13/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs13/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs13/ts/index.html
new file mode 100644
index 000000000..7430d8714
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs13/ts/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <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='container'>
+            <div id='GanttDefault'></div>        
+        </div>   
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs14/datasource.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs14/datasource.ts
new file mode 100644
index 000000000..7e30b613b
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs14/datasource.ts
@@ -0,0 +1,20 @@
+export let GanttData: Object[] = [
+  {
+    TaskID: 1,
+    TaskName: 'Project Initiation',
+    StartDate: new Date('04/02/2019'),
+    EndDate: new Date('04/21/2019'),
+  },
+  { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
+  { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
+  { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
+  {
+    TaskID: 5,
+    TaskName: 'Project Estimation',
+    StartDate: new Date('04/02/2019'),
+    EndDate: new Date('04/21/2019'),
+  },
+  { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
+  { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
+  { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs14/es5-datasource.js b/ej2-javascript/code-snippet/gantt/excel-export-cs14/es5-datasource.js
new file mode 100644
index 000000000..7f269d947
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs14/es5-datasource.js
@@ -0,0 +1,20 @@
+var GanttData = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs14/index.css b/ej2-javascript/code-snippet/gantt/excel-export-cs14/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs14/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs14/index.js b/ej2-javascript/code-snippet/gantt/excel-export-cs14/index.js
new file mode 100644
index 000000000..cfe6b2f1e
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs14/index.js
@@ -0,0 +1,35 @@
+ej.gantt.Gantt.Inject(ej.gantt.Toolbar, ej.gantt.ExcelExport, ej.gantt.Selection);
+
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '450px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    selectionSettings: {
+        type: 'Multiple'
+    },
+    toolbar: ['ExcelExport'],
+    allowExcelExport: true,
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: '100' },
+        { field: 'TaskName', headerText: 'Task Name', width: '150' },
+        { field: 'StartDate', headerText: 'Start Date', width: '120' },
+        { field: 'Duration', headerText: 'Duration', width: '100' },
+        { field: 'Progress', headerText: 'Progress', width: '120' }
+    ],
+    toolbarClick: function (args) {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            var selectedRecords = ganttChart.treeGrid.getSelectedRecords();
+            var exportProperties = { dataSource: selectedRecords };
+            ganttChart.excelExport(exportProperties);
+        }
+    }
+});
+
+ganttChart.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs14/index.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs14/index.ts
new file mode 100644
index 000000000..279b24321
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs14/index.ts
@@ -0,0 +1,47 @@
+import { Gantt, Toolbar, ExcelExport, Selection, TaskFieldsModel, SelectionSettingsModel, ExcelExportProperties, ColumnModel } from '@syncfusion/ej2-gantt';
+import { ClickEventArgs } from '@syncfusion/ej2-navigations';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Toolbar, ExcelExport, Selection);
+
+const taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+const selectionSettings: SelectionSettingsModel = {
+    type: 'Multiple'
+};
+
+const columns: ColumnModel[] = [
+    { field: 'TaskID', headerText: 'Task ID', width: '100' },
+    { field: 'TaskName', headerText: 'Task Name', width: '150' },
+    { field: 'StartDate', headerText: 'Start Date', width: '120' },
+    { field: 'Duration', headerText: 'Duration', width: '100' },
+    { field: 'Progress', headerText: 'Progress', width: '120' }
+];
+
+let gantt: Gantt = new Gantt({
+    dataSource: GanttData,
+    height: '450px',
+    taskFields,
+    selectionSettings,
+    toolbar: ['ExcelExport'],
+    allowExcelExport: true,
+    columns,
+    toolbarClick: (args: ClickEventArgs) => {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            const selectedRecords: Object[] = gantt.treeGrid.getSelectedRecords();
+            const exportProperties: ExcelExportProperties = {
+                dataSource: selectedRecords
+            };
+            gantt.excelExport(exportProperties);
+        }
+    }
+});
+
+gantt.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs14/js/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs14/js/index.html
new file mode 100644
index 000000000..0b7fc4fc8
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs14/js/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>EJ2 Gantt</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Typescript Gantt Controls">
+        <meta name="author" content="Syncfusion">
+        <link href="index.css" rel="stylesheet">
+        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+        <script src="es5-datasource.js" type="text/javascript"></script>
+    </head>
+
+    <body>
+        <div id="container">
+          <div id="GanttDefault"></div>
+        </div>
+        <script>
+            var ele = document.getElementById('container');
+            if(ele) {
+            ele.style.visibility = "visible";
+            }   
+        </script>
+        <script src="index.js" type="text/javascript"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs14/systemjs.config.js b/ej2-javascript/code-snippet/gantt/excel-export-cs14/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs14/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs14/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs14/ts/index.html
new file mode 100644
index 000000000..7430d8714
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs14/ts/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <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='container'>
+            <div id='GanttDefault'></div>        
+        </div>   
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs15/datasource.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs15/datasource.ts
new file mode 100644
index 000000000..7e30b613b
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs15/datasource.ts
@@ -0,0 +1,20 @@
+export let GanttData: Object[] = [
+  {
+    TaskID: 1,
+    TaskName: 'Project Initiation',
+    StartDate: new Date('04/02/2019'),
+    EndDate: new Date('04/21/2019'),
+  },
+  { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
+  { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
+  { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
+  {
+    TaskID: 5,
+    TaskName: 'Project Estimation',
+    StartDate: new Date('04/02/2019'),
+    EndDate: new Date('04/21/2019'),
+  },
+  { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
+  { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
+  { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs15/es5-datasource.js b/ej2-javascript/code-snippet/gantt/excel-export-cs15/es5-datasource.js
new file mode 100644
index 000000000..7f269d947
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs15/es5-datasource.js
@@ -0,0 +1,20 @@
+var GanttData = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs15/index.css b/ej2-javascript/code-snippet/gantt/excel-export-cs15/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs15/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs15/index.js b/ej2-javascript/code-snippet/gantt/excel-export-cs15/index.js
new file mode 100644
index 000000000..3246e9410
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs15/index.js
@@ -0,0 +1,31 @@
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '430px',
+    treeColumnIndex: 1,
+    allowExcelExport: true,
+    allowFiltering: true,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    toolbar: ['ExcelExport', 'CsvExport'],
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'StartDate', headerText: 'StartDate', width: 150, visible: false },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ],
+    toolbarClick: function (args) {
+        if (args.item.id === 'GanttDefault_excelexport') {
+            var excelExportProperties = { enableFilter: true };
+            ganttChart.excelExport(excelExportProperties);
+        }
+    }
+});
+
+ganttChart.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs15/index.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs15/index.ts
new file mode 100644
index 000000000..5d3b65b75
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs15/index.ts
@@ -0,0 +1,36 @@
+import { Gantt, Toolbar, ExcelExport, Filter, ClickEventArgs } from '@syncfusion/ej2-gantt';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Toolbar, ExcelExport, Filter);
+
+let gantt: Gantt = new Gantt({
+    dataSource: GanttData,
+    height: '430px',
+    treeColumnIndex: 1,
+    allowExcelExport: true,
+    allowFiltering: true,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    toolbar: ['ExcelExport', 'CsvExport'],
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'StartDate', headerText: 'StartDate', width: 150, visible: false },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ],
+    toolbarClick: (args: ClickEventArgs) => {
+        if (args.item.id === 'GanttDefault_excelexport') {
+            const excelExportProperties = { enableFilter: true };
+            gantt.excelExport(excelExportProperties);
+        }
+    }
+});
+
+gantt.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs15/js/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs15/js/index.html
new file mode 100644
index 000000000..0b7fc4fc8
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs15/js/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>EJ2 Gantt</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Typescript Gantt Controls">
+        <meta name="author" content="Syncfusion">
+        <link href="index.css" rel="stylesheet">
+        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+        <script src="es5-datasource.js" type="text/javascript"></script>
+    </head>
+
+    <body>
+        <div id="container">
+          <div id="GanttDefault"></div>
+        </div>
+        <script>
+            var ele = document.getElementById('container');
+            if(ele) {
+            ele.style.visibility = "visible";
+            }   
+        </script>
+        <script src="index.js" type="text/javascript"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs15/systemjs.config.js b/ej2-javascript/code-snippet/gantt/excel-export-cs15/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs15/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs15/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs15/ts/index.html
new file mode 100644
index 000000000..7430d8714
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs15/ts/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <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='container'>
+            <div id='GanttDefault'></div>        
+        </div>   
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs16/datasource.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs16/datasource.ts
new file mode 100644
index 000000000..7e30b613b
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs16/datasource.ts
@@ -0,0 +1,20 @@
+export let GanttData: Object[] = [
+  {
+    TaskID: 1,
+    TaskName: 'Project Initiation',
+    StartDate: new Date('04/02/2019'),
+    EndDate: new Date('04/21/2019'),
+  },
+  { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
+  { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
+  { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
+  {
+    TaskID: 5,
+    TaskName: 'Project Estimation',
+    StartDate: new Date('04/02/2019'),
+    EndDate: new Date('04/21/2019'),
+  },
+  { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
+  { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
+  { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs16/es5-datasource.js b/ej2-javascript/code-snippet/gantt/excel-export-cs16/es5-datasource.js
new file mode 100644
index 000000000..7f269d947
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs16/es5-datasource.js
@@ -0,0 +1,20 @@
+var GanttData = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs16/index.css b/ej2-javascript/code-snippet/gantt/excel-export-cs16/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs16/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs16/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs16/index.html
new file mode 100644
index 000000000..7430d8714
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs16/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <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='container'>
+            <div id='GanttDefault'></div>        
+        </div>   
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs16/index.js b/ej2-javascript/code-snippet/gantt/excel-export-cs16/index.js
new file mode 100644
index 000000000..2ea3ea3c6
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs16/index.js
@@ -0,0 +1,32 @@
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '430px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    treeColumnIndex: 1,
+    allowExcelExport: true,
+    toolbar: ['ExcelExport', 'CsvExport'],
+    toolbarClick: function (args) {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            var exportColumns = [
+                { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
+                { field: 'TaskName', headerText: 'Project Name', width: '150' },
+                { field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
+                { field: 'Duration', headerText: 'Duration', width: '150' },
+                { field: 'Progress', headerText: 'Progress', width: '150' }
+            ];
+            var excelExportProperties = {
+                columns: exportColumns
+            };
+            ganttChart.excelExport(excelExportProperties);
+        }
+    }
+});
+
+ganttChart.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs16/index.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs16/index.ts
new file mode 100644
index 000000000..6feeae8c1
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs16/index.ts
@@ -0,0 +1,40 @@
+import { Gantt, Toolbar, ExcelExport, ClickEventArgs } from '@syncfusion/ej2-gantt';
+import { ExcelExportProperties, Column } from '@syncfusion/ej2-grids';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Toolbar, ExcelExport);
+
+let gantt: Gantt = new Gantt({
+    dataSource: GanttData,
+    height: '430px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    treeColumnIndex: 1,
+    allowExcelExport: true,
+    toolbar: ['ExcelExport', 'CsvExport'],
+    toolbarClick: (args: ClickEventArgs) => {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            const exportColumns: Partial<Column>[] = [
+                { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
+                { field: 'TaskName', headerText: 'Project Name', width: '150' },
+                { field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
+                { field: 'Duration', headerText: 'Duration', width: '150' },
+                { field: 'Progress', headerText: 'Progress', width: '150' }
+            ];
+
+            const excelExportProperties: ExcelExportProperties = {
+                columns: exportColumns as Column[]
+            };
+
+            gantt.excelExport(excelExportProperties);
+        }
+    }
+});
+
+gantt.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs16/js/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs16/js/index.html
new file mode 100644
index 000000000..0b7fc4fc8
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs16/js/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>EJ2 Gantt</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Typescript Gantt Controls">
+        <meta name="author" content="Syncfusion">
+        <link href="index.css" rel="stylesheet">
+        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+        <script src="es5-datasource.js" type="text/javascript"></script>
+    </head>
+
+    <body>
+        <div id="container">
+          <div id="GanttDefault"></div>
+        </div>
+        <script>
+            var ele = document.getElementById('container');
+            if(ele) {
+            ele.style.visibility = "visible";
+            }   
+        </script>
+        <script src="index.js" type="text/javascript"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs16/systemjs.config.js b/ej2-javascript/code-snippet/gantt/excel-export-cs16/systemjs.config.js
new file mode 100644
index 000000000..8e1726657
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs16/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs4/index.js b/ej2-javascript/code-snippet/gantt/excel-export-cs4/index.js
index 910bbd29e..992060745 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs4/index.js
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs4/index.js
@@ -1,27 +1,7 @@
-var clickHandler = function(args){
-    let columns = ganttChart.treeGrid.grid.columns;
-	 if (args.item.id === 'GanttExport_excelexport') {
-        columns[0].visible = true;
-        columns[3].visible = false;
-        ganttChart.excelExport();
-    }
-	else if (args.item.id === 'GanttExport_csvexport') {
-        columns[0].visible = true;
-        columns[3].visible = false;
-        ganttChart.csvExport();
-    }
-};
-var exportComplete = function(args){
-    let columns = ganttChart.treeGrid.grid.columns;	
-    columns[0].visible = false;
-    columns[3].visible = true;
-};
-
-ej.gantt.Gantt.Inject(ej.gantt.ExcelExport,ej.gantt.Toolbar);
-
-var ganttChart = new ej.gantt.Gantt({
+var gantt = new ej.gantt.Gantt({
+    id: 'GanttExport',
     dataSource: GanttData,
-    height: '450px',
+    height: '400px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -31,16 +11,34 @@ var ganttChart = new ej.gantt.Gantt({
         parentID: 'ParentID'
     },
     treeColumnIndex: 1,
-    allowExcelExport: true,
-	columns: [
-        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100',visible: false },
-        { field: 'TaskName', headerText: 'Task Name', width: '150' },        
-        { field: 'StartDate', headerText: 'Start Date', width: '150' },
-        { field: 'Duration', headerText: 'Duration', width: '150' },
-        { field: 'Progress', headerText: 'Progress', width: '150' },
-    ],
     toolbar: ['ExcelExport', 'CsvExport'],
-	toolbarClick: clickHandler,
-	excelExportComplete: exportComplete
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'StartDate', headerText: 'StartDate', width: 150, visible: false },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ],
+    allowExcelExport: true,
+    toolbarClick: function (args) {
+        if (args.item.id === 'GanttExport_excelexport') {
+            gantt.treeGrid.grid.columns[0].visible = true;
+            gantt.treeGrid.grid.columns[3].visible = false;
+            gantt.excelExport();
+        } else if (args.item.id === 'GanttExport_csvexport') {
+            gantt.treeGrid.grid.columns[0].visible = true;
+            gantt.treeGrid.grid.columns[3].visible = false;
+            gantt.csvExport();
+        }
+    },
+    excelExportComplete: function () {
+        gantt.treeGrid.grid.columns[0].visible = false;
+        gantt.treeGrid.grid.columns[3].visible = true;
+    },
+    csvExportComplete: function () {
+        gantt.treeGrid.grid.columns[0].visible = false;
+        gantt.treeGrid.grid.columns[3].visible = true;
+    }
 });
-ganttChart.appendTo('#GanttExport');
\ No newline at end of file
+
+gantt.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs4/index.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs4/index.ts
index 90ec7cd64..13c009b7a 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs4/index.ts
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs4/index.ts
@@ -1,49 +1,53 @@
-import { Gantt, Toolbar, ExcelExport, Selection } from '@syncfusion/ej2-gantt';
+import { Gantt, Toolbar, ExcelExport, Selection, ClickEventArgs, TaskFieldsModel } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
 
 Gantt.Inject(Toolbar, ExcelExport, Selection);
 
-var clickHandler = function(args){
-    let columns: Column[] = gantt.treeGrid.grid.columns;
-    if (args.item.id === 'GanttExport_excelexport') {
-        columns[0].visible = true;
-        columns[3].visible = false;
-        gantt.excelExport();
-    }
-    else if (args.item.id === 'GanttExport_csvexport') {
-        columns[0].visible = true;
-        columns[3].visible = false;
-        gantt.csvExport();
-    }
-};
-var exportComplete = function(args){
-        let columns: Column[] = gantt.treeGrid.grid.columns;
-        columns[0].visible = false;
-        columns[3].visible = true;
+let gantt: Gantt;
+
+const taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
 };
 
-let gantt: Gantt = new Gantt({
+gantt = new Gantt({
+    id: 'GanttExport',
     dataSource: GanttData,
-    height: '450px',
-    taskFields: {
-        id: 'TaskID',
-        name: 'TaskName',
-        startDate: 'StartDate',
-        duration: 'Duration',
-        progress: 'Progress',
-        parentID: 'ParentID'
-    },
+    height: '400px',
+    taskFields: taskFields,
     treeColumnIndex: 1,
-    allowExcelExport: true,
+    toolbar: ['ExcelExport', 'CsvExport'],
     columns: [
-        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100',visible:false  },
-        { field: 'TaskName', headerText: 'Task Name', width: '150' },
-        { field: 'StartDate', headerText: 'Start Date', width: '150' },
-        { field: 'Duration', headerText: 'Duration', width: '150' },
-        { field: 'Progress', headerText: 'Progress', width: '150' },
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'StartDate', headerText: 'StartDate', width: 150, visible: false },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
     ],
-    toolbar: ['ExcelExport','CsvExport'],
-    toolbarClick: clickHandler,
-    excelExportComplete: exportComplete
+    allowExcelExport: true,
+    toolbarClick: (args: ClickEventArgs) => {
+        if (args.item.id === 'GanttExport_excelexport') {
+            gantt.treeGrid.grid.columns[0].visible = true;
+            gantt.treeGrid.grid.columns[3].visible = false;
+            gantt.excelExport();
+        } else if (args.item.id === 'GanttExport_csvexport') {
+            gantt.treeGrid.grid.columns[0].visible = true;
+            gantt.treeGrid.grid.columns[3].visible = false;
+            gantt.csvExport();
+        }
+    },
+    excelExportComplete: () => {
+        gantt.treeGrid.grid.columns[0].visible = false;
+        gantt.treeGrid.grid.columns[3].visible = true;
+    },
+    csvExportComplete: () => {
+        gantt.treeGrid.grid.columns[0].visible = false;
+        gantt.treeGrid.grid.columns[3].visible = true;
+    }
 });
+
 gantt.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs5/index.js b/ej2-javascript/code-snippet/gantt/excel-export-cs5/index.js
index 25c386a05..27460528b 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs5/index.js
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs5/index.js
@@ -1,66 +1,67 @@
-var clickHandler = function(args){
-	 if (args.item.id === 'GanttExport_excelexport') {        
-        ganttChart.excelExport();
-    }	
-};
-ej.gantt.Gantt.Inject(ej.gantt.ExcelExport,ej.gantt.Toolbar);
-
 var ganttChart = new ej.gantt.Gantt({
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
+    treeColumnIndex: 1,
+    allowExcelExport: true,
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
-        startDate: 'StartDate',        
+        startDate: 'StartDate',
         duration: 'Duration',
-        progress: 'Progress',       
+        progress: 'Progress',
         parentID: 'ParentID'
     },
-    treeColumnIndex: 1,
-    allowExcelExport: true,	
-    toolbar: ['ExcelExport'],
-    labelSettings:{
+    labelSettings: {
         taskLabel: '${Progress}%'
     },
     splitterSettings: {
         columnIndex: 3
     },
+    toolbar: ['ExcelExport'],
     columns: [
-        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100',visible:false  },
-        { field: 'TaskName', headerText: 'Task Name', width: '150' },
-        { field: 'Progress', headerText: 'Progress', width: '150' },
-        { field: 'StartDate', headerText: 'Start Date', width: '150' },
-        { field: 'Duration', headerText: 'Duration', width: '150' }
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100, visible: false },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 }
     ],
-    excelQueryCellInfo: function(args) {
-        if(args.column.field == 'Progress'){
-            if(args.value > 80) {
+    toolbarClick: function (args) {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            ganttChart.excelExport();
+        }
+    },
+    excelQueryCellInfo: function (args) {
+        if (args.column && args.column.field === 'Progress') {
+            var progressValue = args.value;
+            if (progressValue > 80) {
                 args.style = { backColor: '#A569BD' };
-            }
-            else if(args.value < 20) {
+            } else if (progressValue < 20) {
                 args.style = { backColor: '#F08080' };
-            }            
+            }
         }
     },
-    queryTaskbarInfo: function(args) {
-        if (args.data.Progress > 80) {
-            args.progressBarBgColor = "#6C3483";
-            args.taskbarBgColor = args.taskbarBorderColor = "#A569BD";
-        } else if (args.data.Progress < 20) {
-            args.progressBarBgColor = "#CD5C5C";
-            args.taskbarBgColor = args.taskbarBorderColor = "#F08080";
+    queryTaskbarInfo: function (args) {
+        var progress = args.data && args.data.Progress;
+        if (progress > 80) {
+            args.progressBarBgColor = '#6C3483';
+            args.taskbarBgColor = '#A569BD';
+            args.taskbarBorderColor = '#A569BD';
+        } else if (progress < 20) {
+            args.progressBarBgColor = '#CD5C5C';
+            args.taskbarBgColor = '#F08080';
+            args.taskbarBorderColor = '#F08080';
         }
     },
-    queryCellInfo: function(args) {
-        if(args.column.field == 'Progress'){
-            if(args.data.Progress > 80) {
-                args.cell.style.backgroundColor  = '#A569BD';
+    queryCellInfo: function (args) {
+        if (args.column && args.column.field === 'Progress') {
+            var progress = args.data && args.data.Progress;
+            if (progress > 80) {
+                args.cell.style.backgroundColor = '#A569BD';
+            } else if (progress < 20) {
+                args.cell.style.backgroundColor = '#F08080';
             }
-            else if(args.data.Progress < 20) {
-                args.cell.style.backgroundColor  = '#F08080';
-            }            
         }
-    },
-	toolbarClick: clickHandler	
+    }
 });
-ganttChart.appendTo('#GanttExport');
\ No newline at end of file
+
+ganttChart.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs5/index.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs5/index.ts
index d2291e5ce..d68694700 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs5/index.ts
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs5/index.ts
@@ -1,68 +1,71 @@
-import { Gantt, Toolbar, ExcelExport, Selection } from '@syncfusion/ej2-gantt';
+import { Gantt, Toolbar, ExcelExport, Selection, ClickEventArgs, IQueryTaskbarInfoEventArgs } from '@syncfusion/ej2-gantt';
+import { ExcelQueryCellInfoEventArgs, QueryCellInfoEventArgs, Column } from '@syncfusion/ej2-grids';
 import { GanttData } from './datasource.ts';
 
-Gantt.Inject(Toolbar, ExcelExport,Selection );
+Gantt.Inject(Toolbar, ExcelExport, Selection);
 
 let gantt: Gantt = new Gantt({
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
+    treeColumnIndex: 1,
+    allowExcelExport: true,
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
         startDate: 'StartDate',
         duration: 'Duration',
         progress: 'Progress',
-        parentID: 'parentID',
+        parentID: 'ParentID'
     },
-    treeColumnIndex: 1,
-    allowExcelExport: true,
-    labelSettings:{
+    labelSettings: {
         taskLabel: '${Progress}%'
     },
-    toolbar: ['ExcelExport'],
     splitterSettings: {
         columnIndex: 3
     },
+    toolbar: ['ExcelExport'],
     columns: [
-        { field: 'TaskId', headerText: 'Task ID', textAlign: 'Left', width: '100',visible:false  },
-        { field: 'TaskName', headerText: 'Task Name', width: '150' },
-        { field: 'Progress', headerText: 'Progress', width: '150' },
-        { field: 'StartDate', headerText: 'Start Date', width: '150' },
-        { field: 'Duration', headerText: 'Duration', width: '150' }
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100, visible: false },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 }
     ],
-    excelQueryCellInfo: function (args: any) {
-        if(args.column.field == 'Progress'){
-            if(args.value > 80) {
+    toolbarClick: (args: ClickEventArgs) => {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            gantt.excelExport();
+        }
+    },
+    excelQueryCellInfo: (args: ExcelQueryCellInfoEventArgs) => {
+        if (args.column && args.column.field === 'Progress') {
+            const progressValue: number = args.value as number;
+            if (progressValue > 80) {
                 args.style = { backColor: '#A569BD' };
-            }
-            else if(args.value < 20) {
+            } else if (progressValue < 20) {
                 args.style = { backColor: '#F08080' };
             }
         }
     },
-    queryTaskbarInfo: function (args: any) {
-        if (args.data.Progress > 80) {
-            args.progressBarBgColor = "#6C3483";
-            args.taskbarBgColor = args.taskbarBorderColor = "#A569BD";
-        } else if (args.data.Progress < 20) {
-            args.progressBarBgColor = "#CD5C5C";
-            args.taskbarBgColor = args.taskbarBorderColor = "#F08080";
+    queryTaskbarInfo: (args: IQueryTaskbarInfoEventArgs) => {
+        const progress: number = (args.data as { Progress: number }).Progress;
+        if (progress > 80) {
+            args.progressBarBgColor = '#6C3483';
+            args.taskbarBgColor = args.taskbarBorderColor = '#A569BD';
+        } else if (progress < 20) {
+            args.progressBarBgColor = '#CD5C5C';
+            args.taskbarBgColor = args.taskbarBorderColor = '#F08080';
         }
     },
-    queryCellInfo: function (args: any) {
-        if(args.column.field == 'Progress'){
-            if(args.data.Progress > 80) {
-                args.cell.style.backgroundColor  = '#A569BD';
-            }
-            else if(args.data.Progress < 20) {
-                args.cell.style.backgroundColor  = '#F08080';
+    queryCellInfo: (args: QueryCellInfoEventArgs) => {
+        if ((args.column as Column).field === 'Progress') {
+            const progress: number = (args.data as { Progress: number }).Progress;
+            if (progress > 80) {
+                (args.cell as HTMLElement).style.backgroundColor = '#A569BD';
+            } else if (progress < 20) {
+                (args.cell as HTMLElement).style.backgroundColor = '#F08080';
             }
         }
     }
 });
-gantt.appendTo('#GanttExport');
-gantt.toolbarClick = (args: Object) => {
-    if (args.item.id === 'GanttExport_excelexport') {
-        gantt.excelExport();
-    }
-}
\ No newline at end of file
+
+gantt.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs5/js/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs5/js/index.html
index cb92eda42..0b7fc4fc8 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs5/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs5/js/index.html
@@ -14,7 +14,7 @@
 
     <body>
         <div id="container">
-          <div id="GanttExport"></div>
+          <div id="GanttDefault"></div>
         </div>
         <script>
             var ele = document.getElementById('container');
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs5/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs5/ts/index.html
index 47821f5a9..4d0df72db 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs5/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs5/ts/index.html
@@ -8,17 +8,17 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-            <div id='GanttExport'></div>        
-        </div>   
- </script>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='GanttDefault'></div>
+    </div>
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs6/index.js b/ej2-javascript/code-snippet/gantt/excel-export-cs6/index.js
index 79d8968c4..6bc2f9df1 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs6/index.js
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs6/index.js
@@ -1,31 +1,35 @@
-ej.gantt.Gantt.Inject(ej.gantt.ExcelExport,ej.gantt.Toolbar);
-
 var ganttChart = new ej.gantt.Gantt({
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
-        startDate: 'StartDate',        
+        startDate: 'StartDate',
         duration: 'Duration',
-        progress: 'Progress',        
+        progress: 'Progress',
         parentID: 'ParentID'
     },
     treeColumnIndex: 1,
-    allowExcelExport: true,	
-    toolbar: ['ExcelExport'],	
-});
-ganttChart.appendTo('#GanttExport');
-ganttChart.toolbarClick = (args) => {
-    if (args['item'].id === 'GanttExport_excelexport') {
-        let excelExportProperties = {
-            theme:
-                {
+    allowExcelExport: true,
+    toolbar: ['ExcelExport'],
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 80 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'StartDate', headerText: 'Start Date', width: 120 },
+        { field: 'Duration', headerText: 'Duration', width: 100, textAlign: 'Right' },
+        { field: 'Progress', headerText: 'Progress', width: 100, textAlign: 'Right' }
+    ],
+    toolbarClick: function (args) {
+        if (args.item && args.item.id === 'ganttDefault_excelexport') {
+            var excelExportProperties = {
+                theme: {
                     header: { fontName: 'Segoe UI', fontColor: '#666666' },
-                    record: { fontName: 'Segoe UI', fontColor: '#666666' },
-                    caption: { fontName: 'Segoe UI', fontColor: '#666666' }
+                    record: { fontName: 'Segoe UI', fontColor: '#666666' }
                 }
-        };
-        ganttChart.excelExport(excelExportProperties);
-    }	
-}
\ No newline at end of file
+            };
+            ganttChart.excelExport(excelExportProperties);
+        }
+    }
+});
+
+ganttChart.appendTo('#ganttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs6/index.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs6/index.ts
index ad33bf989..05e1f51e5 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs6/index.ts
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs6/index.ts
@@ -1,12 +1,12 @@
-import { Gantt, Toolbar, ExcelExport, Selection } from '@syncfusion/ej2-gantt';
-import { ExcelExportProperties } from '@syncfusion/ej2-grids'
+import { Gantt, Toolbar, ExcelExport, ClickEventArgs } from '@syncfusion/ej2-gantt';
+import { ExcelExportProperties } from '@syncfusion/ej2-grids';
 import { GanttData } from './datasource.ts';
 
-Gantt.Inject(Toolbar, ExcelExport, Selection);
+Gantt.Inject(Toolbar, ExcelExport);
 
 let gantt: Gantt = new Gantt({
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -17,18 +17,25 @@ let gantt: Gantt = new Gantt({
     },
     treeColumnIndex: 1,
     allowExcelExport: true,
-    toolbar: ['ExcelExport']
-});
-gantt.appendTo('#GanttExport');
-gantt.toolbarClick = (args: Object) => {
-    if (args['item'].id === 'GanttExport_excelexport') {
-        let excelExportProperties: ExcelExportProperties = {
-            theme:
-                {
+    toolbar: ['ExcelExport'],
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 80 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'StartDate', headerText: 'Start Date', width: 120 },
+        { field: 'Duration', headerText: 'Duration', width: 100, textAlign: 'Right' },
+        { field: 'Progress', headerText: 'Progress', width: 100, textAlign: 'Right' }
+    ],
+    toolbarClick: (args: ClickEventArgs) => {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            const excelExportProperties: ExcelExportProperties = {
+                theme: {
                     header: { fontName: 'Segoe UI', fontColor: '#666666' },
                     record: { fontName: 'Segoe UI', fontColor: '#666666' }
                 }
-        };
-        gantt.excelExport(excelExportProperties);
+            };
+            gantt.excelExport(excelExportProperties);
+        }
     }
-}
\ No newline at end of file
+});
+
+gantt.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs6/js/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs6/js/index.html
index cb92eda42..7a4bfc512 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs6/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs6/js/index.html
@@ -14,7 +14,7 @@
 
     <body>
         <div id="container">
-          <div id="GanttExport"></div>
+          <div id="ganttDefault"></div>
         </div>
         <script>
             var ele = document.getElementById('container');
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs6/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs6/ts/index.html
index 47821f5a9..7430d8714 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs6/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs6/ts/index.html
@@ -16,7 +16,7 @@
 <body>
         <div id='loader'>Loading....</div>
         <div id='container'>
-            <div id='GanttExport'></div>        
+            <div id='GanttDefault'></div>        
         </div>   
  </script>
 </body>
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs7/index.js b/ej2-javascript/code-snippet/gantt/excel-export-cs7/index.js
index de1556364..3387a08af 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs7/index.js
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs7/index.js
@@ -1,43 +1,113 @@
-ej.gantt.Gantt.Inject(ej.gantt.ExcelExport,ej.gantt.Toolbar);
-
 var ganttChart = new ej.gantt.Gantt({
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
+    treeColumnIndex: 1,
+    allowExcelExport: true,
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
         startDate: 'StartDate',
         duration: 'Duration',
         progress: 'Progress',
-       parentID: 'ParentID'
+        parentID: 'ParentID'
     },
-    treeColumnIndex: 1,
-    allowExcelExport: true,	
-    toolbar: ['ExcelExport'],	
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 80 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'StartDate', headerText: 'Start Date', width: 120 },
+        { field: 'Duration', headerText: 'Duration', width: 100, textAlign: 'Right' },
+        { field: 'Progress', headerText: 'Progress', width: 100, textAlign: 'Right' }
+    ],
+    toolbar: ['ExcelExport'],
+    toolbarClick: function (args) {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            var excelExportProperties = {
+                header: {
+                    headerRows: 7,
+                    rows: [
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    value: 'Northwind Traders',
+                                    style: { fontColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true }
+                                }
+                            ]
+                        },
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    value: '2501 Aerial Center Parkway',
+                                    style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true }
+                                }
+                            ]
+                        },
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    value: 'Suite 200 Morrisville, NC 27560 USA',
+                                    style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true }
+                                }
+                            ]
+                        },
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    value: 'Tel +1 888.936.8638 Fax +1 919.573.0306',
+                                    style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true }
+                                }
+                            ]
+                        },
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    hyperlink: { target: 'https://www.northwind.com/', displayText: 'www.northwind.com' },
+                                    style: { hAlign: 'Center' }
+                                }
+                            ]
+                        },
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    hyperlink: { target: 'mailto:support@northwind.com' },
+                                    style: { hAlign: 'Center' }
+                                }
+                            ]
+                        }
+                    ]
+                },
+                footer: {
+                    footerRows: 4,
+                    rows: [
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    value: 'Thank you for your business!',
+                                    style: { hAlign: 'Center', bold: true }
+                                }
+                            ]
+                        },
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    value: '!Visit Again!',
+                                    style: { hAlign: 'Center', bold: true }
+                                }
+                            ]
+                        }
+                    ]
+                }
+            };
+            ganttChart.excelExport(excelExportProperties);
+        }
+    }
 });
-ganttChart.appendTo('#GanttExport');
-ganttChart.toolbarClick = (args) => {
-   if (args['item'].id === 'GanttExport_excelexport') {
-        let excelExportProperties = {
-            header: {
-                headerRows: 7,
-                rows: [
-                    { cells: [{ colSpan: 4, value: "Northwind Traders", style: { fontColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true, } }] },
-                    { cells: [{ colSpan: 4, value: "2501 Aerial Center Parkway", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
-                    { cells: [{ colSpan: 4, value: "Suite 200 Morrisville, NC 27560 USA", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
-                    { cells: [{ colSpan: 4, value: "Tel +1 888.936.8638 Fax +1 919.573.0306", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
-                    { cells: [{ colSpan: 4, hyperlink: { target: 'https://www.northwind.com/', displayText: 'www.northwind.com' }, style: { hAlign: 'Center' } }] },
-                    { cells: [{ colSpan: 4, hyperlink: { target: 'mailto:support@northwind.com' }, style: { hAlign: 'Center' } }] },
-                ]
-            },
-            footer: {
-                footerRows: 4,
-                rows: [
-                    { cells: [{ colSpan: 4, value: "Thank you for your business!", style: { hAlign: 'Center', bold: true } }] },
-                    { cells: [{ colSpan: 4, value: "!Visit Again!", style: { hAlign: 'Center', bold: true } }] }
-                ]
-            },
-        };
-        ganttChart.excelExport(excelExportProperties);
-    }	
-}
\ No newline at end of file
+
+ganttChart.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs7/index.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs7/index.ts
index b9d15d797..821bb4763 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs7/index.ts
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs7/index.ts
@@ -1,47 +1,120 @@
-import { Gantt, Toolbar, ExcelExport, Selection } from '@syncfusion/ej2-gantt';
-import { ExcelExportProperties } from '@syncfusion/ej2-grids'
+import { Gantt, Toolbar, ExcelExport, ClickEventArgs } from '@syncfusion/ej2-gantt';
+import { ExcelExportProperties } from '@syncfusion/ej2-grids';
 import { GanttData } from './datasource.ts';
 
-Gantt.Inject(Toolbar, ExcelExport, Selection);
+Gantt.Inject(Toolbar, ExcelExport);
 
 let gantt: Gantt = new Gantt({
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
+    treeColumnIndex: 1,
+    allowExcelExport: true,
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
         startDate: 'StartDate',
         duration: 'Duration',
         progress: 'Progress',
-       parentID: 'ParentID'
+        parentID: 'ParentID'
     },
-    treeColumnIndex: 1,
-    allowExcelExport: true,
-    toolbar: ['ExcelExport']
-});
-gantt.appendTo('#GanttExport');
-gantt.toolbarClick = (args: Object) => {
-    if (args['item'].id === 'GanttExport_excelexport') {
-        let excelExportProperties: ExcelExportProperties = {
-            header: {
-                headerRows: 7,
-                rows: [
-                    { cells: [{ colSpan: 4, value: "Northwind Traders", style: { fontColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true, } }] },
-                    { cells: [{ colSpan: 4, value: "2501 Aerial Center Parkway", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
-                    { cells: [{ colSpan: 4, value: "Suite 200 Morrisville, NC 27560 USA", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
-                    { cells: [{ colSpan: 4, value: "Tel +1 888.936.8638 Fax +1 919.573.0306", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
-                    { cells: [{ colSpan: 4, hyperlink: { target: 'https://www.northwind.com/', displayText: 'www.northwind.com' }, style: { hAlign: 'Center' } }] },
-                    { cells: [{ colSpan: 4, hyperlink: { target: 'mailto:support@northwind.com' }, style: { hAlign: 'Center' } }] },
-                ]
-            },
-            footer: {
-                footerRows: 4,
-                rows: [
-                    { cells: [{ colSpan: 4, value: "Thank you for your business!", style: { hAlign: 'Center', bold: true } }] },
-                    { cells: [{ colSpan: 4, value: "!Visit Again!", style: { hAlign: 'Center', bold: true } }] }
-                ]
-            },
-        };
-        gantt.excelExport(excelExportProperties);
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 80 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'StartDate', headerText: 'Start Date', width: 120 },
+        { field: 'Duration', headerText: 'Duration', width: 100, textAlign: 'Right' },
+        { field: 'Progress', headerText: 'Progress', width: 100, textAlign: 'Right' }
+    ],
+    toolbar: ['ExcelExport'],
+    toolbarClick: (args: ClickEventArgs) => {
+        if (args.item && args.item.id === 'GanttDefault_excelexport') {
+            const excelExportProperties: ExcelExportProperties = {
+                header: {
+                    headerRows: 7,
+                    rows: [
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    value: 'Northwind Traders',
+                                    style: { fontColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true }
+                                }
+                            ]
+                        },
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    value: '2501 Aerial Center Parkway',
+                                    style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true }
+                                }
+                            ]
+                        },
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    value: 'Suite 200 Morrisville, NC 27560 USA',
+                                    style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true }
+                                }
+                            ]
+                        },
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    value: 'Tel +1 888.936.8638 Fax +1 919.573.0306',
+                                    style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true }
+                                }
+                            ]
+                        },
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    hyperlink: { target: 'https://www.northwind.com/', displayText: 'www.northwind.com' },
+                                    style: { hAlign: 'Center' }
+                                }
+                            ]
+                        },
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    hyperlink: { target: 'mailto:support@northwind.com' },
+                                    style: { hAlign: 'Center' }
+                                }
+                            ]
+                        }
+                    ]
+                },
+                footer: {
+                    footerRows: 4,
+                    rows: [
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    value: 'Thank you for your business!',
+                                    style: { hAlign: 'Center', bold: true }
+                                }
+                            ]
+                        },
+                        {
+                            cells: [
+                                {
+                                    colSpan: 4,
+                                    value: '!Visit Again!',
+                                    style: { hAlign: 'Center', bold: true }
+                                }
+                            ]
+                        }
+                    ]
+                }
+            };
+
+            gantt.excelExport(excelExportProperties);
+        }
     }
-}
\ No newline at end of file
+});
+
+gantt.appendTo('#GanttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs7/js/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs7/js/index.html
index cb92eda42..8b07023b3 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs7/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs7/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-          <div id="GanttExport"></div>
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="GanttDefault"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs7/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs7/ts/index.html
index 47821f5a9..4d0df72db 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs7/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs7/ts/index.html
@@ -8,17 +8,17 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-            <div id='GanttExport'></div>        
-        </div>   
- </script>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='GanttDefault'></div>
+    </div>
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs8/index.js b/ej2-javascript/code-snippet/gantt/excel-export-cs8/index.js
index c16baf5da..d89434f92 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs8/index.js
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs8/index.js
@@ -1,32 +1,37 @@
-ej.gantt.Gantt.Inject(ej.gantt.ExcelExport,ej.gantt.Toolbar);
+var fileNameBox = new ej.inputs.TextBox({
+    placeholder: 'Enter file name',
+    width: 120
+});
+fileNameBox.appendTo('#fileNameBox');
 
 var ganttChart = new ej.gantt.Gantt({
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
+    treeColumnIndex: 1,
+    allowExcelExport: true,
+    splitterSettings: { columnIndex: 1 },
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
-        startDate: 'StartDate',        
+        startDate: 'StartDate',
         duration: 'Duration',
-        progress: 'Progress',        
-       parentID: 'ParentID'
+        progress: 'Progress',
+        parentID: 'ParentID'
     },
-    treeColumnIndex: 1,
-    allowExcelExport: true,	
-    toolbar: ['ExcelExport', 'CsvExport'],	
-});
-ganttChart.appendTo('#GanttExport');
-ganttChart.toolbarClick = (args) => {
-   if (args['item'].id === 'GanttExport_excelexport') {
-        let excelExportProperties = {
-            fileName:"Gantt.xlsx"
-        };
-        ganttChart.excelExport(excelExportProperties);
+    toolbar: ['ExcelExport', 'CsvExport'],
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'StartDate', headerText: 'StartDate', width: 150, visible: false },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ],
+    toolbarClick: function (args) {
+        if (args.item.id === 'ganttDefault_excelexport') {
+            var name = fileNameBox.value && fileNameBox.value.trim() !== '' ? fileNameBox.value.trim() : 'new';
+            ganttChart.excelExport({ fileName: name + '.xlsx' });
+        }
     }
-	else if (args['item'].id === 'GanttExport_csvexport') {
-        let excelExportProperties = {
-            fileName:"Gantt.csv"
-        };
-        ganttChart.csvExport(excelExportProperties);
-    }
-}
\ No newline at end of file
+});
+
+ganttChart.appendTo('#ganttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs8/index.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs8/index.ts
index fc8cde9ff..689927eb1 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs8/index.ts
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs8/index.ts
@@ -1,36 +1,51 @@
-import { Gantt, Toolbar, ExcelExport, Selection } from '@syncfusion/ej2-gantt';
-import { ExcelExportProperties } from '@syncfusion/ej2-grids'
+import { Gantt, Toolbar, ExcelExport, ClickEventArgs } from '@syncfusion/ej2-gantt';
+import { TextBox } from '@syncfusion/ej2-inputs';
+import { ExcelExportProperties } from '@syncfusion/ej2-grids';
 import { GanttData } from './datasource.ts';
 
-Gantt.Inject(Toolbar, ExcelExport, Selection);
+Gantt.Inject(Toolbar, ExcelExport);
+
+let fileNameBox: TextBox = new TextBox({
+    placeholder: 'Enter file name',
+    width: 120
+});
+fileNameBox.appendTo('#fileNameBox');
 
 let gantt: Gantt = new Gantt({
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
+    treeColumnIndex: 1,
+    allowExcelExport: true,
+    splitterSettings: { columnIndex: 1 },
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
         startDate: 'StartDate',
         duration: 'Duration',
         progress: 'Progress',
-       parentID: 'ParentID'
+        parentID: 'ParentID'
     },
-    treeColumnIndex: 1,
-    allowExcelExport: true,
-    toolbar: ['ExcelExport','CsvExport']
-});
-gantt.appendTo('#GanttExport');
-gantt.toolbarClick = (args: Object) => {
-    if (args['item'].id === 'GanttExport_excelexport') {
-        let excelExportProperties: ExcelExportProperties = {
-            fileName:"Gantt.xlsx"
-        };
-        gantt.excelExport(excelExportProperties);
-    }
-    else if (args['item'].id === 'GanttExport_csvexport') {
-        let excelExportProperties: ExcelExportProperties = {
-            fileName:"Gantt.csv"
-        };
-        gantt.csvExport(excelExportProperties);
+    toolbar: ['ExcelExport', 'CsvExport'],
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'StartDate', headerText: 'StartDate', width: 150, visible: false },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ],
+    toolbarClick: (args: ClickEventArgs) => {
+        if (args.item.id === 'ganttDefault_excelexport') {
+            const name: string = fileNameBox.value && fileNameBox.value.toString().trim() !== ''
+                ? fileNameBox.value.toString().trim()
+                : 'new';
+
+            const excelProps: ExcelExportProperties = {
+                fileName: `${name}.xlsx`
+            };
+
+            gantt.excelExport(excelProps);
+        }
     }
-}
\ No newline at end of file
+});
+
+gantt.appendTo('#ganttDefault');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs8/js/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs8/js/index.html
index cb92eda42..c84789b5f 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs8/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs8/js/index.html
@@ -1,27 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-          <div id="GanttExport"></div>
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div style="padding: 0 0 20px 0;">
+            <label style="padding: 30px 17px 0 0; font-weight: bold;">
+                Enter file name:
+            </label>
+            <input id="fileNameBox" />
         </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+        <div id="ganttDefault"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs8/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs8/ts/index.html
index 47821f5a9..f5dbc95a3 100644
--- a/ej2-javascript/code-snippet/gantt/excel-export-cs8/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs8/ts/index.html
@@ -8,17 +8,23 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-            <div id='GanttExport'></div>        
-        </div>   
- </script>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div style="padding: 0 0 20px 0;">
+            <label style="padding: 30px 17px 0 0; font-weight: bold;">
+                Enter file name:
+            </label>
+            <input id="fileNameBox" />
+        </div>
+        <div id='ganttDefault'></div>
+    </div>
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs9/datasource.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs9/datasource.ts
new file mode 100644
index 000000000..04cf6dd52
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs9/datasource.ts
@@ -0,0 +1,20 @@
+export let GanttData: Object[] = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs9/es5-datasource.js b/ej2-javascript/code-snippet/gantt/excel-export-cs9/es5-datasource.js
new file mode 100644
index 000000000..7f269d947
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs9/es5-datasource.js
@@ -0,0 +1,20 @@
+var GanttData = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs9/index.css b/ej2-javascript/code-snippet/gantt/excel-export-cs9/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs9/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs9/index.js b/ej2-javascript/code-snippet/gantt/excel-export-cs9/index.js
new file mode 100644
index 000000000..8200e0d2a
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs9/index.js
@@ -0,0 +1,48 @@
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '450px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    toolbar: ['ExcelExport'],
+    allowExcelExport: true,
+    toolbarClick: function (args) {
+        if (args.item && args.item.id === 'GanttExport_excelexport') {
+            ganttChart.excelExport();
+        } else if (args.item && args.item.id === 'GanttExport_csvexport') {
+            ganttChart.csvExport();
+        }
+    },
+    queryCellInfo: function (args) {
+        var d = args.data;
+        if (d.TaskID === 4 && args.column && args.column.field === 'TaskName') {
+            args.rowSpan = 2;
+        }
+        if (d.TaskID === 6 && args.column && args.column.field === 'TaskName') {
+            args.colSpan = 2;
+        }
+    },
+    excelQueryCellInfo: function (args) {
+        var d = args.data;
+        if (d.TaskID === 4 && args.column && args.column.field === 'TaskName') {
+            args.rowSpan = 2;
+        }
+        if (d.TaskID === 6 && args.column && args.column.field === 'TaskName') {
+            args.colSpan = 2;
+        }
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 120 },
+        { field: 'TaskName', headerText: 'Task Name', width: 180 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 120 },
+        { field: 'Progress', headerText: 'Progress', width: 120 }
+    ]
+});
+
+ganttChart.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs9/index.ts b/ej2-javascript/code-snippet/gantt/excel-export-cs9/index.ts
new file mode 100644
index 000000000..0015baad8
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs9/index.ts
@@ -0,0 +1,55 @@
+import { Gantt, Toolbar, ExcelExport, Selection, ToolbarClickEventArgs, QueryCellInfoEventArgs } from '@syncfusion/ej2-gantt';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Toolbar, ExcelExport, Selection);
+
+let gantt: Gantt = new Gantt({
+    dataSource: GanttData,
+    height: '450px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    toolbar: ['ExcelExport'],
+    allowExcelExport: true,
+    toolbarClick: (args: ToolbarClickEventArgs) => {
+        if (args.item && args.item.id === 'GanttExport_excelexport') {
+            gantt.excelExport();
+        } else if (args.item && args.item.id === 'GanttExport_csvexport') {
+            gantt.csvExport();
+        }
+    },
+    queryCellInfo: (args: QueryCellInfoEventArgs) => {
+        const d: any = args.data as any;
+
+        if (d.TaskID === 4 && args.column && (args.column as any).field === 'TaskName') {
+            (args as any).rowSpan = 2;
+        }
+        if (d.TaskID === 6 && args.column && (args.column as any).field === 'TaskName') {
+            (args as any).colSpan = 2;
+        }
+    },
+    excelQueryCellInfo: (args: any) => {
+        const d: any = args.data;
+
+        if (d.TaskID === 4 && args.column && args.column.field === 'TaskName') {
+            args.rowSpan = 2;
+        }
+        if (d.TaskID === 6 && args.column && args.column.field === 'TaskName') {
+            args.colSpan = 2;
+        }
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 120 },
+        { field: 'TaskName', headerText: 'Task Name', width: 180 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 120 },
+        { field: 'Progress', headerText: 'Progress', width: 120 }
+    ]
+});
+
+gantt.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs9/js/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs9/js/index.html
new file mode 100644
index 000000000..cb92eda42
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs9/js/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>EJ2 Gantt</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Typescript Gantt Controls">
+        <meta name="author" content="Syncfusion">
+        <link href="index.css" rel="stylesheet">
+        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+        <script src="es5-datasource.js" type="text/javascript"></script>
+    </head>
+
+    <body>
+        <div id="container">
+          <div id="GanttExport"></div>
+        </div>
+        <script>
+            var ele = document.getElementById('container');
+            if(ele) {
+            ele.style.visibility = "visible";
+            }   
+        </script>
+        <script src="index.js" type="text/javascript"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs9/systemjs.config.js b/ej2-javascript/code-snippet/gantt/excel-export-cs9/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs9/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-export-cs9/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-export-cs9/ts/index.html
new file mode 100644
index 000000000..47821f5a9
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-export-cs9/ts/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <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='container'>
+            <div id='GanttExport'></div>        
+        </div>   
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs1/datasource.ts b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/datasource.ts
new file mode 100644
index 000000000..04cf6dd52
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/datasource.ts
@@ -0,0 +1,20 @@
+export let GanttData: Object[] = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/es5-datasource.js
new file mode 100644
index 000000000..7f269d947
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/es5-datasource.js
@@ -0,0 +1,20 @@
+var GanttData = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    {
+        TaskID: 5,
+        TaskName: 'Project Estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+    },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs1/index.css b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs1/index.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/index.js
new file mode 100644
index 000000000..4958cde11
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/index.js
@@ -0,0 +1,18 @@
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '450px',
+    allowFiltering: true,
+    filterSettings: {
+        type: 'Excel'
+    },
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    }
+});
+
+ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs1/index.ts b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/index.ts
new file mode 100644
index 000000000..73c65714a
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/index.ts
@@ -0,0 +1,23 @@
+import { Gantt, Filter } from '@syncfusion/ej2-gantt';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Filter);
+
+let gantt: Gantt = new Gantt({
+    dataSource: GanttData,
+    height: '450px',
+    allowFiltering: true,
+    filterSettings: {
+        type: 'Excel'
+    },
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    }
+});
+
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/js/index.html
new file mode 100644
index 000000000..2f8e46498
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/js/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>EJ2 Gantt</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Typescript Gantt Controls">
+        <meta name="author" content="Syncfusion">
+        <link href="index.css" rel="stylesheet">
+        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+        <script src="es5-datasource.js" type="text/javascript"></script>
+    </head>
+
+    <body>
+        <div id="container">
+          <div id="Gantt"></div>
+        </div>
+        <script>
+            var ele = document.getElementById('container');
+            if(ele) {
+            ele.style.visibility = "visible";
+            }   
+        </script>
+        <script src="index.js" type="text/javascript"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs1/systemjs.config.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/ts/index.html
new file mode 100644
index 000000000..7b10e1621
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs1/ts/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <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="container">
+        <div id="Gantt"></div>        
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs2/datasource.ts b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/datasource.ts
new file mode 100644
index 000000000..eca7dc5cc
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/datasource.ts
@@ -0,0 +1,9 @@
+export const data: object[] = [
+    { TaskID: 1, TaskName: 'Project Management', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-12'), Duration: 10, Progress: 40, IsCompleted: true },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 50, IsCompleted: true, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-10'), Duration: 8, Progress: 60, IsCompleted: false },
+    { TaskID: 6, TaskName: 'Develop floor plan', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 100, IsCompleted: false, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 40, IsCompleted: false, ParentID: 5 }
+];
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs2/es5-datasource.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/es5-datasource.js
new file mode 100644
index 000000000..6cd251bb9
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/es5-datasource.js
@@ -0,0 +1,9 @@
+const data = [
+    { TaskID: 1, TaskName: 'Project Management', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-12'), Duration: 10, Progress: 40, IsCompleted: true },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 50, IsCompleted: true, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-10'), Duration: 8, Progress: 60, IsCompleted: false },
+    { TaskID: 6, TaskName: 'Develop floor plan', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 100, IsCompleted: false, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 40, IsCompleted: false, ParentID: 5 }
+];
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs2/index.css b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs2/index.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/index.js
new file mode 100644
index 000000000..19a214e86
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/index.js
@@ -0,0 +1,42 @@
+ej.gantt.Gantt.Inject(ej.gantt.Filter, ej.gantt.Sort);
+
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: data,
+    height: '450px',
+    width: '700px',
+    allowFiltering: true,
+    filterSettings: { type: 'Excel' },
+    splitterSettings: { columnIndex: 3 },
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 100, isPrimaryKey: true },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'EndDate', headerText: 'End Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 },
+        {
+            field: 'IsCompleted',
+            headerText: 'Status',
+            width: 150,
+            displayAsCheckBox: true,
+            type: 'boolean',
+            filter: {
+                type: 'Excel',
+                itemTemplate: function (args) {
+                    return args.IsCompleted ? 'Completed' : 'In Progress';
+                }
+            }
+        }
+    ]
+});
+
+ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs2/index.ts b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/index.ts
new file mode 100644
index 000000000..b1ab39664
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/index.ts
@@ -0,0 +1,51 @@
+import { Gantt, Filter, Sort, FilterSettingsModel, TaskFieldsModel, ColumnModel } from '@syncfusion/ej2-gantt';
+import { data } from './datasource.ts';
+
+Gantt.Inject(Filter, Sort);
+
+const taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    endDate: 'EndDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+const filterSettings: FilterSettingsModel = { type: 'Excel' };
+
+const columns: ColumnModel[] = [
+    { field: 'TaskID', headerText: 'Task ID', width: 100, isPrimaryKey: true },
+    { field: 'TaskName', headerText: 'Task Name', width: 150 },
+    { field: 'StartDate', headerText: 'Start Date', width: 150 },
+    { field: 'EndDate', headerText: 'End Date', width: 150 },
+    { field: 'Duration', headerText: 'Duration', width: 150 },
+    { field: 'Progress', headerText: 'Progress', width: 150 },
+    {
+        field: 'IsCompleted',
+        headerText: 'Status',
+        width: 150,
+        displayAsCheckBox: true,
+        type: 'boolean',
+        filter: {
+            type: 'Excel',
+            itemTemplate: (args: any): string => {
+                return args.IsCompleted ? 'Completed' : 'In Progress';
+            }
+        }
+    }
+];
+
+let gantt: Gantt = new Gantt({
+    dataSource: data,
+    height: '450px',
+    width: '700px',
+    allowFiltering: true,
+    filterSettings,
+    splitterSettings: { columnIndex: 3 },
+    taskFields,
+    columns
+});
+
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs2/js/index.html b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/js/index.html
new file mode 100644
index 000000000..2f8e46498
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/js/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>EJ2 Gantt</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Typescript Gantt Controls">
+        <meta name="author" content="Syncfusion">
+        <link href="index.css" rel="stylesheet">
+        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+        <script src="es5-datasource.js" type="text/javascript"></script>
+    </head>
+
+    <body>
+        <div id="container">
+          <div id="Gantt"></div>
+        </div>
+        <script>
+            var ele = document.getElementById('container');
+            if(ele) {
+            ele.style.visibility = "visible";
+            }   
+        </script>
+        <script src="index.js" type="text/javascript"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs2/systemjs.config.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs2/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/ts/index.html
new file mode 100644
index 000000000..7b10e1621
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs2/ts/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <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="container">
+        <div id="Gantt"></div>        
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs3/datasource.ts b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/datasource.ts
new file mode 100644
index 000000000..eca7dc5cc
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/datasource.ts
@@ -0,0 +1,9 @@
+export const data: object[] = [
+    { TaskID: 1, TaskName: 'Project Management', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-12'), Duration: 10, Progress: 40, IsCompleted: true },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 50, IsCompleted: true, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-10'), Duration: 8, Progress: 60, IsCompleted: false },
+    { TaskID: 6, TaskName: 'Develop floor plan', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 100, IsCompleted: false, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 40, IsCompleted: false, ParentID: 5 }
+];
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs3/es5-datasource.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/es5-datasource.js
new file mode 100644
index 000000000..6cd251bb9
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/es5-datasource.js
@@ -0,0 +1,9 @@
+const data = [
+    { TaskID: 1, TaskName: 'Project Management', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-12'), Duration: 10, Progress: 40, IsCompleted: true },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 50, IsCompleted: true, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-10'), Duration: 8, Progress: 60, IsCompleted: false },
+    { TaskID: 6, TaskName: 'Develop floor plan', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 100, IsCompleted: false, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 40, IsCompleted: false, ParentID: 5 }
+];
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs3/index.css b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs3/index.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/index.js
new file mode 100644
index 000000000..aa3cf53ab
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/index.js
@@ -0,0 +1,31 @@
+ej.gantt.Gantt.Inject(ej.gantt.Filter, ej.gantt.Sort);
+
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: data,
+    height: '370px',
+    allowFiltering: true,
+    allowSorting: true,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 120 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ],
+    splitterSettings: {
+        columnIndex: 3
+    },
+    filterSettings: {
+        type: 'Excel'
+    }
+});
+
+ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs3/index.ts b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/index.ts
new file mode 100644
index 000000000..6df3e7d31
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/index.ts
@@ -0,0 +1,34 @@
+import { Gantt, Filter, Sort } from '@syncfusion/ej2-gantt';
+import { data } from './datasource.ts';
+
+Gantt.Inject(Filter, Sort);
+
+let gantt: Gantt = new Gantt({
+    dataSource: data,
+    height: '370px',
+    allowFiltering: true,
+    allowSorting: true,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 120 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ],
+    splitterSettings: {
+        columnIndex: 3
+    },
+    filterSettings: {
+        type: 'Excel'
+    }
+});
+
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs3/js/index.html b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/js/index.html
new file mode 100644
index 000000000..5fa0d2fc3
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/js/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+    <style>
+        .e-excel-ascending,
+        .e-excel-descending,
+        .e-separator.e-excel-separator {
+            display: none;
+        }
+
+        .e-gantt .e-excelfilter .e-contextmenu-wrapper {
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs3/systemjs.config.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs3/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/ts/index.html
new file mode 100644
index 000000000..6d859ebda
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs3/ts/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+    <style>
+        .e-excel-ascending,
+        .e-excel-descending,
+        .e-separator.e-excel-separator {
+            display: none;
+        }
+
+        .e-gantt .e-excelfilter .e-contextmenu-wrapper {
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div id='loader'>Loading....</div>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs4/datasource.ts b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/datasource.ts
new file mode 100644
index 000000000..eca7dc5cc
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/datasource.ts
@@ -0,0 +1,9 @@
+export const data: object[] = [
+    { TaskID: 1, TaskName: 'Project Management', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-12'), Duration: 10, Progress: 40, IsCompleted: true },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 50, IsCompleted: true, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-10'), Duration: 8, Progress: 60, IsCompleted: false },
+    { TaskID: 6, TaskName: 'Develop floor plan', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 100, IsCompleted: false, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 40, IsCompleted: false, ParentID: 5 }
+];
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs4/es5-datasource.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/es5-datasource.js
new file mode 100644
index 000000000..6cd251bb9
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/es5-datasource.js
@@ -0,0 +1,9 @@
+const data = [
+    { TaskID: 1, TaskName: 'Project Management', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-12'), Duration: 10, Progress: 40, IsCompleted: true },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 50, IsCompleted: true, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-10'), Duration: 8, Progress: 60, IsCompleted: false },
+    { TaskID: 6, TaskName: 'Develop floor plan', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 100, IsCompleted: false, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 40, IsCompleted: false, ParentID: 5 }
+];
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs4/index.css b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs4/index.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/index.js
new file mode 100644
index 000000000..c0fbdcc5c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/index.js
@@ -0,0 +1,37 @@
+ej.gantt.Gantt.Inject(ej.gantt.Filter);
+
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: data,
+    height: '370px',
+    allowFiltering: true,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID',
+        dependency: 'Predecessor'
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 120 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250, clipMode: 'EllipsisWithTooltip' },
+        { field: 'StartDate', headerText: 'Start Date', width: 200 },
+        { field: 'Duration', headerText: 'Duration', width: 160 },
+        { field: 'Progress', headerText: 'Progress', width: 200 }
+    ],
+    splitterSettings: {
+        columnIndex: 3
+    },
+    filterSettings: {
+        type: 'Excel'
+    },
+    actionBegin: function (args) {
+        if (args.requestType === 'filterchoicerequest' || args.requestType === 'filtersearchbegin') {
+            args.filterChoiceCount = 1000;
+        }
+    }
+});
+
+ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs4/index.ts b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/index.ts
new file mode 100644
index 000000000..36d123be6
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/index.ts
@@ -0,0 +1,40 @@
+import { Gantt, Filter } from '@syncfusion/ej2-gantt';
+import { data } from './datasource.ts';
+
+Gantt.Inject(Filter);
+
+let gantt: Gantt = new Gantt({
+    dataSource: data,
+    height: '370px',
+    allowFiltering: true,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID',
+        dependency: 'Predecessor'
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 120 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250, clipMode: 'EllipsisWithTooltip' },
+        { field: 'StartDate', headerText: 'Start Date', width: 200 },
+        { field: 'Duration', headerText: 'Duration', width: 160 },
+        { field: 'Progress', headerText: 'Progress', width: 200 }
+    ],
+    splitterSettings: {
+        columnIndex: 3
+    },
+    filterSettings: {
+        type: 'Excel'
+    },
+    actionBegin: (args: any) => {
+        if (args.requestType === 'filterchoicerequest' || args.requestType === 'filtersearchbegin') {
+            args.filterChoiceCount = 1000;
+        }
+    }
+});
+
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs4/js/index.html b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/js/index.html
new file mode 100644
index 000000000..492a48005
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/js/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs4/systemjs.config.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs4/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/ts/index.html
new file mode 100644
index 000000000..4f9b709a6
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs4/ts/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <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="container">
+        <div id="Gantt"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs5/datasource.ts b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/datasource.ts
new file mode 100644
index 000000000..eca7dc5cc
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/datasource.ts
@@ -0,0 +1,9 @@
+export const data: object[] = [
+    { TaskID: 1, TaskName: 'Project Management', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-12'), Duration: 10, Progress: 40, IsCompleted: true },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 50, IsCompleted: true, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-10'), Duration: 8, Progress: 60, IsCompleted: false },
+    { TaskID: 6, TaskName: 'Develop floor plan', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 100, IsCompleted: false, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 40, IsCompleted: false, ParentID: 5 }
+];
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs5/es5-datasource.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/es5-datasource.js
new file mode 100644
index 000000000..6cd251bb9
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/es5-datasource.js
@@ -0,0 +1,9 @@
+const data = [
+    { TaskID: 1, TaskName: 'Project Management', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-12'), Duration: 10, Progress: 40, IsCompleted: true },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 50, IsCompleted: true, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('2023-04-02'), Duration: 4, Progress: 100, IsCompleted: true, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('2023-04-02'), EndDate: new Date('2023-04-10'), Duration: 8, Progress: 60, IsCompleted: false },
+    { TaskID: 6, TaskName: 'Develop floor plan', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 100, IsCompleted: false, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('2023-04-04'), Duration: 3, Progress: 40, IsCompleted: false, ParentID: 5 }
+];
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs5/index.css b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs5/index.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/index.js
new file mode 100644
index 000000000..39963c778
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/index.js
@@ -0,0 +1,53 @@
+ej.gantt.Gantt.Inject(ej.gantt.Filter);
+
+var localData = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
+
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: localData,
+    height: '370px',
+    allowFiltering: true,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID',
+        dependency: 'Predecessor'
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 120 },
+        { field: 'TaskName', headerText: 'Project Activity', width: 250, clipMode: 'EllipsisWithTooltip' },
+        { field: 'StartDate', headerText: 'Planned Start Date', width: 200 },
+        { field: 'Duration', headerText: 'Duration', width: 160 },
+        { field: 'Progress', headerText: 'Completion (%)', width: 200 }
+    ],
+    splitterSettings: {
+        columnIndex: 3
+    },
+    filterSettings: {
+        type: 'Excel'
+    },
+    actionBegin: function (args) {
+        if (args.requestType === 'filterBeforeOpen') {
+            var hostUrl = 'https://ej2services.syncfusion.com/angular/development/api/GanttWebApiRemoteData';
+            args.filterModel.options.dataSource.json = new ej.data.DataManager({
+                url: hostUrl,
+                adaptor: new ej.data.WebApiAdaptor(),
+                crossDomain: true
+            });
+        }
+    }
+});
+
+ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs5/index.ts b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/index.ts
new file mode 100644
index 000000000..9410d5ad6
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/index.ts
@@ -0,0 +1,57 @@
+import { Gantt, Filter } from '@syncfusion/ej2-gantt';
+import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
+
+Gantt.Inject(Filter);
+
+let localData: Object[] = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+];
+
+let gantt: Gantt = new Gantt({
+    dataSource: localData,
+    height: '370px',
+    allowFiltering: true,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID',
+        dependency: 'Predecessor'
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 120 },
+        { field: 'TaskName', headerText: 'Project Activity', width: 250, clipMode: 'EllipsisWithTooltip' },
+        { field: 'StartDate', headerText: 'Planned Start Date', width: 200 },
+        { field: 'Duration', headerText: 'Duration', width: 160 },
+        { field: 'Progress', headerText: 'Completion (%)', width: 200 }
+    ],
+    splitterSettings: {
+        columnIndex: 3
+    },
+    filterSettings: {
+        type: 'Excel'
+    },
+    actionBegin: (args: any) => {
+        if (args.requestType === 'filterBeforeOpen') {
+            let hostUrl: string =
+                'https://ej2services.syncfusion.com/angular/development/api/GanttWebApiRemoteData';
+            args.filterModel.options.dataSource.json = new DataManager({
+                url: hostUrl,
+                adaptor: new WebApiAdaptor(),
+                crossDomain: true
+            });
+        }
+    }
+});
+
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs5/js/index.html b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/js/index.html
new file mode 100644
index 000000000..492a48005
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/js/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs5/systemjs.config.js b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/systemjs.config.js
new file mode 100644
index 000000000..8e1726657
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-filter-cs5/ts/index.html b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/ts/index.html
new file mode 100644
index 000000000..4f9b709a6
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/excel-filter-cs5/ts/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <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="container">
+        <div id="Gantt"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/excel-multiple-export-cs1/index.ts b/ej2-javascript/code-snippet/gantt/excel-multiple-export-cs1/index.ts
index 21aa80389..ace65efc6 100644
--- a/ej2-javascript/code-snippet/gantt/excel-multiple-export-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/excel-multiple-export-cs1/index.ts
@@ -1,7 +1,4 @@
-
-
-
-import { Gantt, Toolbar,ExcelExport, Selection } from '@syncfusion/ej2-gantt';
+import { Gantt, Toolbar, ExcelExport, Selection } from '@syncfusion/ej2-gantt';
 import { ExcelExportProperties } from '@syncfusion/ej2-grids'
 import { firstGanttData, secondGanttData } from './datasource.ts';
 
@@ -27,7 +24,7 @@ let firstGantt: Gantt = new Gantt({
 firstGantt.appendTo('#GanttExport1');
 
 let secondGantt: Gantt = new Gantt({
-    dataSource: secondGanttData,  
+    dataSource: secondGanttData,
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -42,7 +39,7 @@ let secondGantt: Gantt = new Gantt({
 });
 secondGantt.appendTo('#GanttExport2');
 
-firstGantt.toolbarClick = (args: Object) => {
+firstGantt.toolbarClick = (args: any) => {
     if (args.item.id === 'GanttExport1_excelexport') {
         let appendExcelExportProperties: ExcelExportProperties = {
             multipleExport: { type: 'AppendToSheet', blankRows: 2 }
diff --git a/ej2-javascript/code-snippet/gantt/exporting-blob-data-cs1/index.js b/ej2-javascript/code-snippet/gantt/exporting-blob-data-cs1/index.js
index b59cb66b4..db16589a4 100644
--- a/ej2-javascript/code-snippet/gantt/exporting-blob-data-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/exporting-blob-data-cs1/index.js
@@ -1,61 +1,56 @@
-/**
- * Exporting Blob data
- */
-
-let excelExpComplete = (args) => {
-    //This event will be triggered when excel exporting.
-        args.promise.then((e) => {
-    //In this `then` function, we can get blob data through the arguments after promise resolved.
+var ganttChart = new ej.gantt.Gantt({
+    id: 'ganttDefault',
+    dataSource: GanttData,
+    height: '430px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    treeColumnIndex: 1,
+    toolbar: ['PdfExport', 'ExcelExport'],
+    allowPdfExport: true,
+    allowExcelExport: true,
+    columns: [
+        { field: 'TaskID' },
+        { field: 'TaskName' },
+        { field: 'StartDate' },
+        { field: 'Duration' },
+        { field: 'Progress' }
+    ],
+    toolbarClick: function (args) {
+        if (args.item.id === 'GanttExport_pdfexport') {
+            ganttChart.pdfExport(null, null, null, true);
+        }
+        if (args.item.id === 'GanttExport_excelexport') {
+            ganttChart.excelExport(null, null, null, true);
+        }
+    },
+    excelExportComplete: function (args) {
+        args.promise.then(function (e) {
             exportBlob(e.blobData);
+        });
+    },
+    pdfExportComplete: function (args) {
+        args.promise.then(function (e) {
+            exportBlob(e.blobData);
+        });
+    }
 });
-};
-let pdfExpComplete = (args) => {
-//This event will be triggered when pdf exporting.
-    args.promise.then((e) => {
-    //In this `then` function, we can get blob data through the arguments after promise resolved.
-    exportBlob(e.blobData);
-});
-};
-
 
-let exportBlob = (blob) => {
-let a = document.createElement('a');
-document.body.appendChild(a);
-a.style.display = 'none';
-let url = window.URL.createObjectURL(blob);
-a.href = url;
-a.download = 'Export';
-a.click();
-window.URL.revokeObjectURL(url);
-document.body.removeChild(a);
-}
-const clickHandler = (args) => {
-if (args.item.id === 'GanttExport_pdfexport') {
-    gantt.pdfExport(null,null,null,true);
-}
-if (args.item.id === 'GanttExport_excelexport') {
-    gantt.excelExport(null, null, null, true);
-}
-};
+ganttChart.appendTo('#GanttExport');
 
- 
- var gantt = new ej.gantt.Gantt({
-     dataSource: GanttData,
-     height: '450px',
-     taskFields: {
-         id: 'TaskID',
-         name: 'TaskName',
-         startDate: 'StartDate',
-         duration: 'Duration',
-         progress: 'Progress',
-         parentID: 'ParentID'
-     },
-     allowPdfExport: true,
-     allowExcelExport: true,
-     excelExportComplete: excelExpComplete,
-     pdfExportComplete: pdfExpComplete,
-     toolbar: ['PdfExport','ExcelExport'],
-     toolbarClick: clickHandler
-    
- });
- gantt.appendTo('#GanttExport');
\ No newline at end of file
+function exportBlob(blob) {
+    var a = document.createElement('a');
+    document.body.appendChild(a);
+    a.style.display = 'none';
+    var url = window.URL.createObjectURL(blob);
+    a.href = url;
+    a.download = 'Export';
+    a.click();
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/exporting-blob-data-cs1/index.ts b/ej2-javascript/code-snippet/gantt/exporting-blob-data-cs1/index.ts
index ab845776e..d6c811cfb 100644
--- a/ej2-javascript/code-snippet/gantt/exporting-blob-data-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/exporting-blob-data-cs1/index.ts
@@ -1,51 +1,15 @@
-import { Gantt, Toolbar, PdfExport, Selection,ExcelExport, PdfExportProperties,ExcelExportCompleteArgs,ExcelExportCompleteArgs } from '@syncfusion/ej2-gantt';
+import {
+    Gantt, Toolbar, PdfExport, ExcelExport, Selection,
+    PdfExportProperties, ExcelExportProperties
+} from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
-import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
 
-Gantt.Inject(Toolbar, PdfExport, Selection,ExcelExport);
-/**
- * Exporting Blob data
- */
-
-let excelExpComplete: EmitType<ExcelExportCompleteArgs> = (args: ExcelExportCompleteArgs) => {
-        //This event will be triggered when excel exporting.
-            args.promise.then((e: { blobData: Blob }) => {
-        //In this `then` function, we can get blob data through the arguments after promise resolved.
-                exportBlob(e.blobData);
-    });
-};
-let pdfExpComplete: EmitType<ExcelExportCompleteArgs> = (args: PdfExportCompleteArgs) => {
-    //This event will be triggered when pdf exporting.
-        args.promise.then((e: { blobData: Blob }) => {
-        //In this `then` function, we can get blob data through the arguments after promise resolved.
-        exportBlob(e.blobData);
-    });
-};
-
-
-let exportBlob: Function = (blob: Blob) => {
-    let a: HTMLAnchorElement = document.createElement('a');
-    document.body.appendChild(a);
-    a.style.display = 'none';
-    let url: string = window.URL.createObjectURL(blob);
-    a.href = url;
-    a.download = 'Export';
-    a.click();
-    window.URL.revokeObjectURL(url);
-    document.body.removeChild(a);
-}
-let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
-    if (args.item.id === 'GanttExport_pdfexport') {
-        gantt.pdfExport(null,null,null,true);
-    }
-       if (args.item.id === 'GanttExport_excelexport') {
-        gantt.excelExport(null, null, null, true);
-    }
-};
+Gantt.Inject(Toolbar, PdfExport, ExcelExport, Selection);
 
 let gantt: Gantt = new Gantt({
+    id: 'ganttDefault',
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -54,18 +18,47 @@ let gantt: Gantt = new Gantt({
         progress: 'Progress',
         parentID: 'ParentID'
     },
-    columns: [
-        { field: 'TaskID'},
-        { field: 'TaskName'},
-        { field: 'StartDate'},
-        { field: 'Duration'},
-        { field: 'Progress'}
-    ],
+    treeColumnIndex: 1,
+    toolbar: ['PdfExport', 'ExcelExport'],
     allowPdfExport: true,
     allowExcelExport: true,
-       excelExportComplete: excelExpComplete,
-        pdfExportComplete: pdfExpComplete,
-        toolbar: ['PdfExport','ExcelExport'],
-    toolbarClick: clickHandler
+    columns: [
+        { field: 'TaskID' },
+        { field: 'TaskName' },
+        { field: 'StartDate' },
+        { field: 'Duration' },
+        { field: 'Progress' }
+    ],
+    toolbarClick: (args: any) => {
+        if (args.item.id === 'GanttExport_pdfexport') {
+            gantt.pdfExport(undefined as unknown as PdfExportProperties, undefined, undefined, true);
+        }
+        if (args.item.id === 'GanttExport_excelexport') {
+            gantt.excelExport(undefined as unknown as ExcelExportProperties, undefined, undefined, true);
+        }
+    },
+    excelExportComplete: (args: any) => {
+        args.promise.then((e: { blobData: Blob }) => {
+            exportBlob(e.blobData);
+        });
+    },
+    pdfExportComplete: (args: any) => {
+        args.promise.then((e: { blobData: Blob }) => {
+            exportBlob(e.blobData);
+        });
+    }
 });
-gantt.appendTo('#GanttExport');
\ No newline at end of file
+
+gantt.appendTo('#GanttExport');
+
+function exportBlob(blob: Blob): void {
+    const a: HTMLAnchorElement = document.createElement('a');
+    document.body.appendChild(a);
+    a.style.display = 'none';
+    const url: string = window.URL.createObjectURL(blob);
+    a.href = url;
+    a.download = 'Export';
+    a.click();
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/externalSearch-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/externalSearch-cs1/ts/index.html
index 133010d71..997c52cf7 100644
--- a/ej2-javascript/code-snippet/gantt/externalSearch-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/externalSearch-cs1/ts/index.html
@@ -8,22 +8,21 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-	     <div class="e-float-input" style="width: 200px; display: inline-block;">
+        <div class="e-float-input" style="width: 200px; display: inline-block;">
             <input type="text" class="searchtext">
             <span class="e-float-line"></span>
             <label class="e-float-text">Search text</label>
-         </div>                   
-        <button id="search">Search</button>       
-        <div id='Gantt'></div>        
+        </div>
+        <button id="search">Search</button>
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/filter-events-cs1/datasource.ts b/ej2-javascript/code-snippet/gantt/filter-events-cs1/datasource.ts
new file mode 100644
index 000000000..4a4bd0814
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-events-cs1/datasource.ts
@@ -0,0 +1,10 @@
+export const GanttData: object[] = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: true },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: false },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-events-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/filter-events-cs1/es5-datasource.js
new file mode 100644
index 000000000..64d6b1543
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-events-cs1/es5-datasource.js
@@ -0,0 +1,10 @@
+const GanttData = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: true },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: false },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-events-cs1/index.css b/ej2-javascript/code-snippet/gantt/filter-events-cs1/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-events-cs1/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-events-cs1/index.js b/ej2-javascript/code-snippet/gantt/filter-events-cs1/index.js
new file mode 100644
index 000000000..c6f71186a
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-events-cs1/index.js
@@ -0,0 +1,82 @@
+var gantt = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    allowFiltering: true,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    splitterSettings: {
+        columnIndex: 2
+    },
+    filterSettings: {
+        type: 'Menu'
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: '120' },
+        { field: 'TaskName', headerText: 'Task Name', width: '250' },
+        { field: 'StartDate', headerText: 'Start Date', width: '150' },
+        { field: 'Progress', headerText: 'Progress', width: '150' },
+        { field: 'Approved', headerText: 'Approved', width: '100', type: 'boolean' }
+    ],
+    actionBegin: function (args) {
+        var msg = '';
+
+        if (args.requestType === 'filterBeforeOpen') {
+            if (args.columnType === 'number') {
+                args.filterModel.customFilterOperators.numberOperator = [
+                    { value: 'equal', text: 'Equal' },
+                    { value: 'notequal', text: 'Not Equal' }
+                ];
+                msg = 'Custom number filter operators applied.';
+            } else if (args.columnType === 'string') {
+                args.filterModel.customFilterOperators.stringOperator = [
+                    { value: 'contains', text: 'Contains' },
+                    { value: 'startswith', text: 'Starts With' }
+                ];
+                msg = 'Custom string filter operators applied.';
+            }
+        }
+
+        if (args.requestType === 'filtering' && args.currentFilteringColumn === 'StartDate') {
+            args.cancel = true;
+            msg = 'Filtering is not allowed for StartDate column';
+        } else if (!msg) {
+            msg = args.requestType + ' action is triggered in actionBegin';
+        }
+
+        updateMessage(msg);
+    },
+    actionComplete: function (args) {
+        var msg = '';
+
+        if (args.requestType === 'filterAfterOpen') {
+            msg = 'Applied custom CSS for filter dialog';
+
+            var content = args.filterModel.dlgDiv.querySelector('.e-dlg-content');
+            var footer = args.filterModel.dlgDiv.querySelector('.e-footer-content');
+
+            if (content) { content.style.background = '#eeeaea'; }
+            if (footer) { footer.style.background = '#30b0ce'; }
+        }
+
+        if (args.requestType === 'filtering') {
+            msg = args.requestType + ' action is triggered in actionComplete';
+        }
+
+        updateMessage(msg);
+    }
+});
+
+gantt.appendTo('#Gantt');
+
+function updateMessage(text) {
+    var msgElement = document.getElementById('message');
+    if (msgElement) {
+        msgElement.textContent = text;
+    }
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-events-cs1/index.ts b/ej2-javascript/code-snippet/gantt/filter-events-cs1/index.ts
new file mode 100644
index 000000000..a5249e900
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-events-cs1/index.ts
@@ -0,0 +1,104 @@
+import { Gantt, Filter, TaskFieldsModel, SplitterSettingsModel, FilterSettingsModel, ColumnModel } from '@syncfusion/ej2-gantt';
+import { FilterEventArgs } from '@syncfusion/ej2-grids';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Filter);
+
+const taskSettings: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+const splitterSettings: SplitterSettingsModel = {
+    columnIndex: 2
+};
+
+const filterSettings: FilterSettingsModel = {
+    type: 'Menu'
+};
+
+const columns: ColumnModel[] = [
+    { field: 'TaskID', headerText: 'Task ID', width: '120' },
+    { field: 'TaskName', headerText: 'Task Name', width: '250' },
+    { field: 'StartDate', headerText: 'Start Date', width: '150' },
+    { field: 'Progress', headerText: 'Progress', width: '150' },
+    { field: 'Approved', headerText: 'Approved', width: '100', type: 'boolean' }
+];
+
+function updateMessage(text: string): void {
+    const msgElement: HTMLElement | null = document.getElementById('message');
+    if (msgElement) {
+        msgElement.textContent = text;
+    }
+}
+
+function actionBegin(args: FilterEventArgs): void {
+    let msg: string = '';
+
+    if (args.requestType === 'filterBeforeOpen') {
+        const a: any = args;
+
+        if (a.columnType === 'number') {
+            a.filterModel.customFilterOperators.numberOperator = [
+                { value: 'equal', text: 'Equal' },
+                { value: 'notequal', text: 'Not Equal' }
+            ];
+            msg = 'Custom number filter operators applied.';
+        } else if (a.columnType === 'string') {
+            a.filterModel.customFilterOperators.stringOperator = [
+                { value: 'contains', text: 'Contains' },
+                { value: 'startswith', text: 'Starts With' }
+            ];
+            msg = 'Custom string filter operators applied.';
+        }
+    }
+
+    const b: any = args;
+    if (args.requestType === 'filtering' && b.currentFilteringColumn === 'StartDate') {
+        (args as any).cancel = true;
+        msg = 'Filtering is not allowed for StartDate column';
+    } else if (!msg) {
+        msg = args.requestType + ' action is triggered in actionBegin';
+    }
+
+    updateMessage(msg);
+}
+
+function actionComplete(args: FilterEventArgs): void {
+    let msg: string = '';
+
+    if (args.requestType === 'filterAfterOpen') {
+        msg = 'Applied custom CSS for filter dialog';
+
+        const a: any = args;
+        const content: HTMLElement | null = a.filterModel.dlgDiv.querySelector('.e-dlg-content');
+        const footer: HTMLElement | null = a.filterModel.dlgDiv.querySelector('.e-footer-content');
+
+        if (content) { content.style.background = '#eeeaea'; }
+        if (footer) { footer.style.background = '#30b0ce'; }
+    }
+
+    if (args.requestType === 'filtering') {
+        msg = args.requestType + ' action is triggered in actionComplete';
+    }
+
+    updateMessage(msg);
+}
+
+let gantt: Gantt = new Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    allowFiltering: true,
+    taskFields: taskSettings,
+    columns: columns,
+    splitterSettings: splitterSettings,
+    filterSettings: filterSettings,
+    actionBegin: actionBegin,
+    actionComplete: actionComplete
+});
+
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-events-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/filter-events-cs1/js/index.html
new file mode 100644
index 000000000..6fccf2194
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-events-cs1/js/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <p id="message" style="color:red;text-align:center"></p>
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-events-cs1/systemjs.config.js b/ej2-javascript/code-snippet/gantt/filter-events-cs1/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-events-cs1/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-events-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/filter-events-cs1/ts/index.html
new file mode 100644
index 000000000..066cda49a
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-events-cs1/ts/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <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="container">
+        <p id="message" style="color:red;text-align:center"></p>
+        <div id="Gantt"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs1/datasource.ts b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/datasource.ts
new file mode 100644
index 000000000..6d5a0da32
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/datasource.ts
@@ -0,0 +1,10 @@
+export let GanttData: Object[]  = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/es5-datasource.js
new file mode 100644
index 000000000..0ee8ab55d
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/es5-datasource.js
@@ -0,0 +1,10 @@
+var GanttData = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs1/index.css b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs1/index.js b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/index.js
new file mode 100644
index 000000000..4eca5b896
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/index.js
@@ -0,0 +1,38 @@
+ej.gantt.Gantt.Inject(ej.gantt.Filter);
+
+var taskFields = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+var filter = {
+    params: { showSpinButton: false }
+};
+
+var taskFilter = {
+    params: { autofill: false }
+};
+
+var splitterSettings = {
+    columnIndex: 2
+};
+
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    allowFiltering: true,
+    taskFields: taskFields,
+    splitterSettings: splitterSettings,
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 120, filter: filter },
+        { field: 'TaskName', headerText: 'Task Name', width: 250, filter: taskFilter },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
+});
+
+ganttChart.appendTo('#Gantt');
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs1/index.ts b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/index.ts
new file mode 100644
index 000000000..182cf48e3
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/index.ts
@@ -0,0 +1,43 @@
+import { Gantt, Filter, TaskFieldsModel, SplitterSettingsModel, ColumnModel } from '@syncfusion/ej2-gantt';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Filter);
+
+let taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+let filter: object = {
+    params: { showSpinButton: false }
+};
+
+let taskFilter: object = {
+    params: { autofill: false }
+};
+
+let splitterSettings: SplitterSettingsModel = {
+    columnIndex: 2
+};
+
+let columns: ColumnModel[] = [
+    { field: 'TaskID', headerText: 'Task ID', width: 120, filter: filter },
+    { field: 'TaskName', headerText: 'Task Name', width: 250, filter: taskFilter },
+    { field: 'StartDate', headerText: 'Start Date', width: 150 },
+    { field: 'Progress', headerText: 'Progress', width: 150 }
+];
+
+let gantt: Gantt = new Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    allowFiltering: true,
+    taskFields: taskFields,
+    splitterSettings: splitterSettings,
+    columns: columns
+});
+
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/js/index.html
new file mode 100644
index 000000000..3a6881318
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/js/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs1/systemjs.config.js b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/ts/index.html
new file mode 100644
index 000000000..1b0deba7f
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs1/ts/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <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="container">
+        <div id="Gantt"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs2/datasource.ts b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/datasource.ts
new file mode 100644
index 000000000..6d5a0da32
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/datasource.ts
@@ -0,0 +1,10 @@
+export let GanttData: Object[]  = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs2/es5-datasource.js b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/es5-datasource.js
new file mode 100644
index 000000000..0ee8ab55d
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/es5-datasource.js
@@ -0,0 +1,10 @@
+var GanttData = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs2/index.css b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs2/index.js b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/index.js
new file mode 100644
index 000000000..92b1d7d58
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/index.js
@@ -0,0 +1,44 @@
+ej.gantt.Gantt.Inject(ej.gantt.Filter);
+
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    allowFiltering: true,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    splitterSettings: {
+        columnIndex: 2
+    },
+    filterSettings: {
+        type: 'Menu'
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 120 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
+});
+
+ganttChart.appendTo('#Gantt');
+
+var filterBtn = new ej.buttons.Button();
+filterBtn.appendTo('#performFilter');
+
+var clearBtn = new ej.buttons.Button();
+clearBtn.appendTo('#clearFilter');
+
+document.getElementById('performFilter').addEventListener('click', function () {
+    ganttChart.filterByColumn('TaskName', 'startswith', 'Project');
+});
+
+document.getElementById('clearFilter').addEventListener('click', function () {
+    ganttChart.clearFiltering();
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs2/index.ts b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/index.ts
new file mode 100644
index 000000000..d43f4784e
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/index.ts
@@ -0,0 +1,48 @@
+import { Gantt, Filter } from '@syncfusion/ej2-gantt';
+import { Button } from '@syncfusion/ej2-buttons';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Filter);
+
+let gantt: Gantt = new Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    allowFiltering: true,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    splitterSettings: {
+        columnIndex: 2
+    },
+    filterSettings: {
+        type: 'Menu'
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 120 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
+});
+
+gantt.appendTo('#Gantt');
+
+let filterBtn: Button = new Button();
+filterBtn.appendTo('#performFilter');
+
+let clearBtn: Button = new Button();
+clearBtn.appendTo('#clearFilter');
+
+(document.getElementById('performFilter') as HTMLElement).addEventListener('click', () => {
+    gantt.filterByColumn('TaskName', 'startswith', 'Project');
+});
+
+(document.getElementById('clearFilter') as HTMLElement).addEventListener('click', () => {
+    gantt.clearFiltering();
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs2/js/index.html b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/js/index.html
new file mode 100644
index 000000000..78a13fbf5
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/js/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+    <style>
+        .e-filtermenudiv.e-icons.e-icon-filter {
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="container">
+        <div style="margin-bottom:10px;display:flex;gap:20px;">
+            <button id="performFilter">Filter Task Name Column</button>
+            <button id="clearFilter">Clear Filter</button>
+        </div>
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs2/systemjs.config.js b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs2/ts/index.html b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/ts/index.html
new file mode 100644
index 000000000..ba38e5007
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs2/ts/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <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="container">
+        <div style="margin-bottom:10px;display:flex;gap:20px;">
+            <button id="performFilter">Filter Task Name Column</button>
+            <button id="clearFilter">Clear Filter</button>
+        </div>
+        <div id="Gantt"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs3/datasource.ts b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/datasource.ts
new file mode 100644
index 000000000..d5b9b7e53
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/datasource.ts
@@ -0,0 +1,10 @@
+export const data: object[] = [
+  { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
+  { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
+  { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: true },
+  { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
+  { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
+  { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: false },
+  { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true },
+  { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs3/es5-datasource.js b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/es5-datasource.js
new file mode 100644
index 000000000..f60c65cc1
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/es5-datasource.js
@@ -0,0 +1,10 @@
+const data = [
+  { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
+  { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
+  { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: true },
+  { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
+  { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
+  { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: false },
+  { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true },
+  { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs3/index.css b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs3/index.js b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/index.js
new file mode 100644
index 000000000..75595a608
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/index.js
@@ -0,0 +1,61 @@
+ej.gantt.Gantt.Inject(ej.gantt.Filter);
+
+var taskFields = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+var filterSettings = {
+    type: 'Menu',
+    operators: {
+        stringOperator: [
+            { value: 'startsWith', text: 'Starts With' },
+            { value: 'endsWith', text: 'Ends With' },
+            { value: 'contains', text: 'Contains' },
+            { value: 'equal', text: 'Equal' },
+            { value: 'notEqual', text: 'Not Equal' }
+        ],
+        numberOperator: [
+            { value: 'equal', text: 'Equal' },
+            { value: 'notEqual', text: 'Not Equal' },
+            { value: 'greaterThan', text: 'Greater Than' },
+            { value: 'lessThan', text: 'Less Than' }
+        ],
+        dateOperator: [
+            { value: 'equal', text: 'Equal' },
+            { value: 'notEqual', text: 'Not Equal' },
+            { value: 'greaterThan', text: 'After' },
+            { value: 'lessThan', text: 'Before' }
+        ],
+        booleanOperator: [
+            { value: 'equal', text: 'Equal' },
+            { value: 'notEqual', text: 'Not Equal' }
+        ]
+    }
+};
+
+var splitterSettings = {
+    columnIndex: 2
+};
+
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: data,
+    height: '370px',
+    allowFiltering: true,
+    filterSettings: filterSettings,
+    taskFields: taskFields,
+    splitterSettings: splitterSettings,
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 120 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150, type: 'date', format: 'yMd' },
+        { field: 'Progress', headerText: 'Progress', width: 150 },
+        { field: 'Approved', headerText: 'Approved', width: 140, type: 'boolean' }
+    ]
+});
+
+ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs3/index.ts b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/index.ts
new file mode 100644
index 000000000..7b94e5f0e
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/index.ts
@@ -0,0 +1,66 @@
+import { Gantt, Filter, TaskFieldsModel, SplitterSettingsModel, FilterSettingsModel, ColumnModel } from '@syncfusion/ej2-gantt';
+import { data } from './datasource.ts';
+
+Gantt.Inject(Filter);
+
+let taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+let filterSettings: FilterSettingsModel = {
+    type: 'Menu',
+    operators: {
+        stringOperator: [
+            { value: 'startsWith', text: 'Starts With' },
+            { value: 'endsWith', text: 'Ends With' },
+            { value: 'contains', text: 'Contains' },
+            { value: 'equal', text: 'Equal' },
+            { value: 'notEqual', text: 'Not Equal' }
+        ],
+        numberOperator: [
+            { value: 'equal', text: 'Equal' },
+            { value: 'notEqual', text: 'Not Equal' },
+            { value: 'greaterThan', text: 'Greater Than' },
+            { value: 'lessThan', text: 'Less Than' }
+        ],
+        dateOperator: [
+            { value: 'equal', text: 'Equal' },
+            { value: 'notEqual', text: 'Not Equal' },
+            { value: 'greaterThan', text: 'After' },
+            { value: 'lessThan', text: 'Before' }
+        ],
+        booleanOperator: [
+            { value: 'equal', text: 'Equal' },
+            { value: 'notEqual', text: 'Not Equal' }
+        ]
+    }
+};
+
+let splitterSettings: SplitterSettingsModel = {
+    columnIndex: 2
+};
+
+let columns: ColumnModel[] = [
+    { field: 'TaskID', headerText: 'Task ID', width: 120 },
+    { field: 'TaskName', headerText: 'Task Name', width: 250 },
+    { field: 'StartDate', headerText: 'Start Date', width: 150, type: 'date', format: 'yMd' },
+    { field: 'Progress', headerText: 'Progress', width: 150 },
+    { field: 'Approved', headerText: 'Approved', width: 140, type: 'boolean' }
+];
+
+let gantt: Gantt = new Gantt({
+    dataSource: data,
+    height: '370px',
+    allowFiltering: true,
+    filterSettings: filterSettings,
+    taskFields: taskFields,
+    splitterSettings: splitterSettings,
+    columns: columns
+});
+
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs3/js/index.html b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/js/index.html
new file mode 100644
index 000000000..3a6881318
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/js/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs3/systemjs.config.js b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filter-menu-cs3/ts/index.html b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/ts/index.html
new file mode 100644
index 000000000..1b0deba7f
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filter-menu-cs3/ts/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <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="container">
+        <div id="Gantt"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/es5-datasource.js
index 0ee8ab55d..2d5992c6f 100644
--- a/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/es5-datasource.js
@@ -1,4 +1,4 @@
-var GanttData = [
+var data = [
     { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
     { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
diff --git a/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/index.js b/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/index.js
index db60b2588..6ae8f7999 100644
--- a/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/index.js
@@ -1,23 +1,51 @@
+var ganttChart;
+
 ej.gantt.Gantt.Inject(ej.gantt.Filter);
 
-var ganttChart = new ej.gantt.Gantt({
-         dataSource: GanttData,
-		 height:'450px',
-		 taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-            duration: 'Duration',
-            progress: 'Progress',
-            parentID: 'ParentID'
-        },
-		allowFiltering:true
+ganttChart = new ej.gantt.Gantt({
+    dataSource: data,
+    height: '430px',
+    allowFiltering: true,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    splitterSettings: {
+        columnIndex: 3
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 120 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
 });
+
 ganttChart.appendTo('#Gantt');
 
-var filterBtn= new ej.buttons.Button();
-filterBtn.appendTo('#filter');
+var singleBtn = new ej.buttons.Button();
+singleBtn.appendTo('#singleFilter');
+
+var multiBtn = new ej.buttons.Button();
+multiBtn.appendTo('#multipleFilter');
+
+document.getElementById('singleFilter').addEventListener('click', function () {
+    ganttChart.clearFiltering();
+    ganttChart.filterByColumn('TaskName', 'startswith', 'Iden', 'and');
+});
 
-document.getElementById('filter').addEventListener('click', function() {
-    ganttChart.filterByColumn('TaskName','startswith','Iden');
+document.getElementById('multipleFilter').addEventListener('click', function () {
+    ganttChart.clearFiltering();
+    ganttChart.filterSettings = {
+        columns: [
+            { field: 'TaskID', operator: 'equal', value: 2, predicate: 'or' },
+            { field: 'TaskID', operator: 'equal', value: 3, predicate: 'or' },
+            { field: 'TaskID', operator: 'equal', value: 4, predicate: 'or' }
+        ]
+    };
 });
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/index.ts b/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/index.ts
index 48b7b0f08..05970e132 100644
--- a/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/index.ts
@@ -1,4 +1,4 @@
-import { Gantt, Filter } from '@syncfusion/ej2-gantt';
+import { Gantt, Filter, TaskFieldsModel, SplitterSettingsModel, FilterSettingsModel } from '@syncfusion/ej2-gantt';
 import { Button } from '@syncfusion/ej2-buttons';
 import { GanttData } from './datasource.ts';
 
@@ -6,7 +6,8 @@ Gantt.Inject(Filter);
 
 let gantt: Gantt = new Gantt({
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
+    allowFiltering: true,
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -14,14 +15,39 @@ let gantt: Gantt = new Gantt({
         duration: 'Duration',
         progress: 'Progress',
         parentID: 'ParentID'
-    },
-    allowFiltering: true
+    } as TaskFieldsModel,
+    splitterSettings: {
+        columnIndex: 3
+    } as SplitterSettingsModel,
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 120 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
 });
+
 gantt.appendTo('#Gantt');
 
-let filterBtn: Button = new Button();
-filterBtn.appendTo('#filter');
+let singleBtn: Button = new Button();
+singleBtn.appendTo('#singleFilter');
+
+let multiBtn: Button = new Button();
+multiBtn.appendTo('#multipleFilter');
+
+document.getElementById('singleFilter')!.addEventListener('click', () => {
+    gantt.clearFiltering();
+    gantt.filterByColumn('TaskName', 'startswith', 'Iden', 'and');
+});
 
-document.getElementById('filter').addEventListener('click', () => {
-    gantt.filterByColumn('TaskName', 'startswith', 'Iden');
+document.getElementById('multipleFilter')!.addEventListener('click', () => {
+    gantt.clearFiltering();
+    gantt.filterSettings = {
+        columns: [
+            { field: 'TaskID', operator: 'equal', value: 2, predicate: 'or' },
+            { field: 'TaskID', operator: 'equal', value: 3, predicate: 'or' },
+            { field: 'TaskID', operator: 'equal', value: 4, predicate: 'or' }
+        ]
+    } as FilterSettingsModel;
 });
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/js/index.html
index 69c9e7e38..3183386a3 100644
--- a/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/js/index.html
@@ -1,28 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-            <button id="filter">Filter TaskName column</button>       
-            <div id="Gantt"></div>
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <button id="singleFilter">Filter with single value</button>
+        <button id="multipleFilter">Filter with multiple values</button>
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/ts/index.html
index c3b9fcd06..f83bc33b3 100644
--- a/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/filterByColumn-cs1/ts/index.html
@@ -8,18 +8,18 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-	                  
-        <button id="filter">Filter TaskName column</button>       
-        <div id='Gantt'></div>        
+        <button id="singleFilter">Filter with single value</button>
+        <button id="multipleFilter">Filter with multiple values</button>
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/filtering-cs1/datasource.ts b/ej2-javascript/code-snippet/gantt/filtering-cs1/datasource.ts
index 6d5a0da32..0fe666bb2 100644
--- a/ej2-javascript/code-snippet/gantt/filtering-cs1/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/filtering-cs1/datasource.ts
@@ -1,10 +1,10 @@
-export let GanttData: Object[]  = [
+export let GanttData: Object[] = [
     { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
     { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 10, ParentID: 1 },
     { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
     { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: "6SS", Progress: 70, ParentID: 5 }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filtering-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/filtering-cs1/es5-datasource.js
index 0ee8ab55d..3bc0410ca 100644
--- a/ej2-javascript/code-snippet/gantt/filtering-cs1/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/filtering-cs1/es5-datasource.js
@@ -2,9 +2,9 @@ var GanttData = [
     { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
     { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 10, ParentID: 1 },
     { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
     { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: "6SS", Progress: 70, ParentID: 5 }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filtering-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/filtering-cs1/ts/index.html
index c646747c1..522518aac 100644
--- a/ej2-javascript/code-snippet/gantt/filtering-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/filtering-cs1/ts/index.html
@@ -8,22 +8,22 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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="container">
         <div>
             <div style="padding-top: 7px; display: inline-block">Hierarchy Mode</div>
             <div style="display: inline-block">
-               <input type="text" id="mode">
+                <input type="text" id="mode">
             </div>
         </div>
-        <div id="Gantt"></div>        
+        <div id="Gantt"></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/filtering-cs2/datasource.ts b/ej2-javascript/code-snippet/gantt/filtering-cs2/datasource.ts
new file mode 100644
index 000000000..0fe666bb2
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filtering-cs2/datasource.ts
@@ -0,0 +1,10 @@
+export let GanttData: Object[] = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: "6SS", Progress: 70, ParentID: 5 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filtering-cs2/es5-datasource.js b/ej2-javascript/code-snippet/gantt/filtering-cs2/es5-datasource.js
new file mode 100644
index 000000000..3bc0410ca
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filtering-cs2/es5-datasource.js
@@ -0,0 +1,10 @@
+var GanttData = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: "6SS", Progress: 70, ParentID: 5 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filtering-cs2/index.css b/ej2-javascript/code-snippet/gantt/filtering-cs2/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filtering-cs2/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filtering-cs2/index.js b/ej2-javascript/code-snippet/gantt/filtering-cs2/index.js
new file mode 100644
index 000000000..6e526761f
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filtering-cs2/index.js
@@ -0,0 +1,82 @@
+ej.gantt.Gantt.Inject(ej.gantt.Filter);
+
+var taskFields = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+var columns = [
+    { field: 'TaskID', headerText: 'Task ID', width: 120 },
+    { field: 'TaskName', headerText: 'Task Name', width: 250 },
+    { field: 'StartDate', headerText: 'Start Date', width: 150 },
+    { field: 'Progress', headerText: 'Progress', width: 150 }
+];
+
+var fieldData = columns.map(function (col) { return col.field; });
+var typeData = ['Menu', 'Excel'];
+
+var gantt = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '430px',
+    allowFiltering: true,
+    taskFields: taskFields,
+    splitterSettings: { columnIndex: 2 },
+    columns: columns
+});
+gantt.appendTo('#Gantt');
+
+var fieldDropDown = new ej.dropdowns.DropDownList({
+    dataSource: fieldData,
+    placeholder: 'Select column',
+    change: onFieldChange
+});
+fieldDropDown.appendTo('#fieldDropDown');
+
+var typeDropDown = new ej.dropdowns.DropDownList({
+    dataSource: typeData,
+    placeholder: 'Select filter type',
+    enabled: false,
+    change: onTypeChange
+});
+typeDropDown.appendTo('#typeDropDown');
+
+function onFieldChange() {
+    typeDropDown.enabled = true;
+
+    var selectedField = fieldDropDown.value;
+    var column = null;
+
+    for (var i = 0; i < columns.length; i++) {
+        if (columns[i].field === selectedField) {
+            column = columns[i];
+            break;
+        }
+    }
+
+    var nextType = (column && column.filter && column.filter.type) ? column.filter.type : null;
+    typeDropDown.value = nextType;
+    typeDropDown.dataBind();
+}
+
+function onTypeChange(args) {
+    var selectedField = fieldDropDown.value;
+    var selectedType = args.value;
+
+    var column = null;
+    for (var i = 0; i < columns.length; i++) {
+        if (columns[i].field === selectedField) {
+            column = columns[i];
+            break;
+        }
+    }
+
+    if (column) {
+        column.filter = Object.assign({}, (column.filter || {}), { type: selectedType });
+        typeDropDown.value = selectedType;
+        typeDropDown.dataBind();
+        gantt.refresh();
+    }
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filtering-cs2/index.ts b/ej2-javascript/code-snippet/gantt/filtering-cs2/index.ts
new file mode 100644
index 000000000..6078c2df6
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filtering-cs2/index.ts
@@ -0,0 +1,81 @@
+import { Gantt, Filter, TaskFieldsModel, ColumnModel } from '@syncfusion/ej2-gantt';
+import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Filter);
+
+const taskFields: TaskFieldsModel = {
+  id: 'TaskID',
+  name: 'TaskName',
+  startDate: 'StartDate',
+  progress: 'Progress',
+  parentID: 'ParentID'
+};
+
+const columns: ColumnModel[] = [
+  { field: 'TaskID', headerText: 'Task ID', width: 120 },
+  { field: 'TaskName', headerText: 'Task Name', width: 250 },
+  { field: 'StartDate', headerText: 'Start Date', width: 150 },
+  { field: 'Progress', headerText: 'Progress', width: 150 }
+];
+
+const fieldData: string[] = columns.map((col: ColumnModel) => col.field as string);
+const typeData: string[] = ['Menu', 'Excel'];
+
+const gantt: Gantt = new Gantt({
+  dataSource: GanttData,
+  height: '430px',
+  allowFiltering: true,
+  taskFields: taskFields,
+  splitterSettings: { columnIndex: 2 },
+  columns: columns
+});
+gantt.appendTo('#Gantt');
+
+let fieldDropDown: DropDownList;
+let typeDropDown: DropDownList;
+
+fieldDropDown = new DropDownList({
+  dataSource: fieldData,
+  placeholder: 'Select column',
+  change: onFieldChange
+});
+fieldDropDown.appendTo('#fieldDropDown');
+
+typeDropDown = new DropDownList({
+  dataSource: typeData,
+  placeholder: 'Select filter type',
+  enabled: false,
+  change: onTypeChange
+});
+typeDropDown.appendTo('#typeDropDown');
+
+function onFieldChange(): void {
+  typeDropDown.enabled = true;
+
+  const selectedField: string = fieldDropDown.value as string;
+  const column: ColumnModel | undefined = columns.find((c: ColumnModel) => c.field === selectedField);
+
+  const nextType: any = (column && column.filter && (column.filter as any).type)
+    ? (column.filter as any).type
+    : null;
+
+  typeDropDown.value = nextType;
+  typeDropDown.dataBind();
+}
+
+function onTypeChange(args: ChangeEventArgs): void {
+  const selectedField: string = fieldDropDown.value as string;
+  const selectedType: any = args.value;
+
+  const column: ColumnModel | undefined = columns.find((c: ColumnModel) => c.field === selectedField);
+
+  if (column) {
+    column.filter = { ...(column.filter || {}), type: selectedType } as any;
+
+    typeDropDown.value = selectedType;
+    typeDropDown.dataBind();
+
+    gantt.refresh();
+  }
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filtering-cs2/js/index.html b/ej2-javascript/code-snippet/gantt/filtering-cs2/js/index.html
new file mode 100644
index 000000000..daba803bd
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filtering-cs2/js/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div style="display:flex; gap:40px; margin-bottom:20px;">
+            <div style="display:flex; align-items:center; gap:10px;">
+                <label style="font-weight:bold;">Select Column:</label>
+                <input id="fieldDropDown" />
+            </div>
+
+            <div style="display:flex; align-items:center; gap:10px;">
+                <label style="font-weight:bold;">Select Filter Type:</label>
+                <input id="typeDropDown" />
+            </div>
+        </div>
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filtering-cs2/systemjs.config.js b/ej2-javascript/code-snippet/gantt/filtering-cs2/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filtering-cs2/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/filtering-cs2/ts/index.html b/ej2-javascript/code-snippet/gantt/filtering-cs2/ts/index.html
new file mode 100644
index 000000000..41f952d4f
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/filtering-cs2/ts/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <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="container">
+        <div style="display:flex; gap:40px; margin-bottom:20px;">
+            <div style="display:flex; align-items:center; gap:10px;">
+                <label style="font-weight:bold;">Select Column:</label>
+                <input id="fieldDropDown" />
+            </div>
+
+            <div style="display:flex; align-items:center; gap:10px;">
+                <label style="font-weight:bold;">Select Filter Type:</label>
+                <input id="typeDropDown" />
+            </div>
+        </div>
+
+        <div id="Gantt"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/index.css b/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/index.css
index e7bcf086c..206424b34 100644
--- a/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/index.css
+++ b/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/index.css
@@ -3,14 +3,14 @@
 }
 
 #loader {
-  color: #008cff;
-  font-family: 'Helvetica Neue','calibiri';
-  font-size: 14px;
-  height: 40px;
-  left: 45%;
-  position: absolute;
-  top: 45%;
-  width: 30%;
+    color: #008cff;
+    font-family: 'Helvetica Neue', 'calibiri';
+    font-size: 14px;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
 }
 
 #element {
@@ -18,6 +18,6 @@
     height: 350px;
 }
 
-#container #Gantt{
-	height:450px;
+#container #Gantt {
+    height: 450px;
 }
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/index.js b/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/index.js
index 16ac454e5..157215788 100644
--- a/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/index.js
+++ b/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/index.js
@@ -1,16 +1,16 @@
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			parentID: 'parentID'
-        },
-		timelineSettings: {
-            showTooltip: true
-        }
-	});
+    dataSource: GanttData,
+    height: '450px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'parentID'
+    },
+    timelineSettings: {
+        showTooltip: true
+    }
+});
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/index.ts b/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/index.ts
index 64d4c6ef0..e175b40d8 100644
--- a/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/index.ts
+++ b/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/index.ts
@@ -1,6 +1,3 @@
-
-
-
 import { Gantt } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
 
diff --git a/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/js/index.html b/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/js/index.html
index 788c38aff..3a6881318 100644
--- a/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-            <div id="Gantt"></div>        
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/ts/index.html b/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/ts/index.html
index b6d76300f..642dfe7d0 100644
--- a/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs2/ts/index.html
@@ -8,16 +8,16 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs4/index.ts b/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs4/index.ts
index 1f2edb63c..620e99b59 100644
--- a/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs4/index.ts
+++ b/ej2-javascript/code-snippet/gantt/gantt-tooltip-cs4/index.ts
@@ -19,7 +19,7 @@ Gantt.Inject(Selection, Toolbar, DayMarkers, Edit, Filter);
 };
 (<{ imagedate?: Function }>window).imagedate = () => {
     const getImage = Math.floor(Math.random() * 5) + 1;
-    return  getImage + ".svg";
+    return getImage + ".svg";
 
 }
 (<{ holidayValue?: Function }>window).holidayValue = (value: string, date: string): string => {
diff --git a/ej2-javascript/code-snippet/gantt/global-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/global-cs1/js/index.html
index a93e856e8..9252eae89 100644
--- a/ej2-javascript/code-snippet/gantt/global-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/global-cs1/js/index.html
@@ -1,36 +1,35 @@
-<!DOCTYPE html><html lang="en"><head>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
     <title>EJ2 Gantt</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Typescript Gantt Controls">
     <meta name="author" content="Syncfusion">
     <link href="index.css" rel="stylesheet">
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-    
-    
-	<style>
-       .e-gantt .e-gantt-chart .e-custom-event-marker {
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <style>
+        .e-gantt .e-gantt-chart .e-custom-event-marker {
             width: 1px;
             border-left: 2px green dotted;
         }
-	</style>
-<script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-<script src="es5-datasource.js" type="text/javascript"></script>
+    </style>
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
 </head>
 
 <body>
-       
-    
     <div id="container">
-        <div id="Gantt"></div>        
+        <div id="Gantt"></div>
     </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
 
-
-<script>
-var ele = document.getElementById('container');
-if(ele) {
-  ele.style.visibility = "visible";
-}   
-      </script>
-<script src="index.js" type="text/javascript"></script>
-</body></html>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/global-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/global-cs1/ts/index.html
index e4f3fd4aa..3761a66ac 100644
--- a/ej2-javascript/code-snippet/gantt/global-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/global-cs1/ts/index.html
@@ -8,22 +8,21 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
-	<style>
-       .e-gantt .e-gantt-chart .e-custom-event-marker {
+    <style>
+        .e-gantt .e-gantt-chart .e-custom-event-marker {
             width: 1px;
             border-left: 2px green dotted;
         }
-	</style>
+    </style>
 </head>
 
 <body>
-       
     <div id='loader'>Loading....</div>
     <div id='container'>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/holidays-cs1/index.js b/ej2-javascript/code-snippet/gantt/holidays-cs1/index.js
index 006055451..295bfa440 100644
--- a/ej2-javascript/code-snippet/gantt/holidays-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/holidays-cs1/index.js
@@ -1,34 +1,36 @@
-ej.gantt.Gantt.Inject(ej.gantt.DayMarkers);
 
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-	    taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-            duration: 'Duration',
-            progress: 'Progress',
-            parentID: 'ParentID'
+    height: '430px',
+    dataSource: GanttData,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    holidays: [
+        {
+            from: '04/04/2019',
+            to: '04/05/2019',
+            label: 'Public holidays',
+            cssClass: 'e-custom-holiday'
         },
-		 holidays: [{
-            from: "04/04/2019",
-			to:"04/05/2019",
-            label: " Public holidays",
-			cssClass:"e-custom-holiday"
-            
-        },
-		{
-            from: "04/12/2019",
-			to:"04/12/2019",
-            label: " Public holiday",
-			cssClass:"e-custom-holiday"
-            
-        }]
+        {
+            from: '04/12/2019',
+            to: '04/12/2019',
+            label: 'Local holidays',
+            cssClass: 'e-custom-holiday'
+        }
+    ],
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: '100' },
+        { field: 'TaskName', headerText: 'Task Name', width: '150' },
+        { field: 'StartDate', headerText: 'Start Date', width: '150' },
+        { field: 'Duration', headerText: 'Duration', width: '150' },
+        { field: 'Progress', headerText: 'Progress', width: '150' }
+    ]
 });
-ganttChart.appendTo('#Gantt');
-
-
-
-
 
+ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/index.js b/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/index.js
index 028d087ca..9e8e0f6c1 100644
--- a/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/index.js
@@ -1,20 +1,21 @@
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			parentID: 'ParentID'
-        }
+    dataSource: GanttData,
+    height: '430px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    }
 });
+
 ganttChart.appendTo('#Gantt');
 
-var dateBtn= new ej.buttons.Button();
-dateBtn.appendTo('#updateSchedule');
+var dateBtn = new ej.buttons.Button();
+dateBtn.appendTo('#changedate');
 
-document.getElementById('updateSchedule').addEventListener('click', function() {
-    ganttChart.updateProjectDates(new Date('01/10/2019'),new Date('06/20/2019'),true);
-});
+document.getElementById('changedate').addEventListener('click', function () {
+    ganttChart.updateProjectDates(new Date('04/10/2019'), new Date('06/20/2019'), true);
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/index.ts b/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/index.ts
index e8940f004..bff2c98ba 100644
--- a/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/index.ts
@@ -1,15 +1,10 @@
-
-
-
-import { Gantt, Edit, Selection } from '@syncfusion/ej2-gantt';
+import { Gantt } from '@syncfusion/ej2-gantt';
 import { Button } from '@syncfusion/ej2-buttons';
 import { GanttData } from './datasource.ts';
 
-Gantt.Inject(Edit, Selection);
-
 let gantt: Gantt = new Gantt({
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -23,8 +18,8 @@ let gantt: Gantt = new Gantt({
 gantt.appendTo('#Gantt');
 
 let dateBtn: Button = new Button();
-dateBtn.appendTo('#updateSchedule');
+dateBtn.appendTo('#changedate');
 
-document.getElementById('updateSchedule').addEventListener('click', () => {
-    gantt.updateProjectDates(new Date('01/10/2019'), new Date('06/20/2019'), true);
+document.getElementById('changedate')!.addEventListener('click', () => {
+    gantt.updateProjectDates(new Date('04/10/2019'), new Date('06/20/2019'), true);
 });
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/js/index.html
index b95b0efcf..033786111 100644
--- a/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/js/index.html
@@ -1,28 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-            <button id="updateSchedule">Change Schedule Dates</button>  
-            <div id="Gantt"></div>        
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <button id="changedate">Change Schedule Dates</button>
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/ts/index.html
index 1cae49b96..e610c26c1 100644
--- a/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/how-to-changescheduledates-cs1/ts/index.html
@@ -8,18 +8,18 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
-	<script src="es5-datasource.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
 </head>
 
 <body>
-       
+
     <div id='loader'>Loading....</div>
-	  <button id="updateSchedule">Change Schedule Dates</button>  
+    <button id="changedate">Change Schedule Dates</button>
     <div id='container'>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofit-cs1/index.js b/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofit-cs1/index.js
index bab9a6475..e772f6bfd 100644
--- a/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofit-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofit-cs1/index.js
@@ -1,39 +1,34 @@
 var ganttChart = new ej.gantt.Gantt({
-    dataSource: GanttData,
-    allowSelection: true,
-    height: '450px',
-    taskFields: {
-        id: 'TaskID',
-        name: 'TaskName',
-        startDate: 'StartDate',
-        duration: 'Duration',
-        progress: 'Progress',
-        dependency: 'Predecessor',
-        parentID: 'ParentID'
-    },
-    toolbar: ['Edit', 'ZoomToFit'],
-    editSettings: {
-        allowEditing: true,
-        allowTaskbarEditing: true,
-    },
-    labelSettings: {
-        leftLabel: 'TaskName'
-    },
-    projectStartDate: new Date('03/24/2019'),
-    projectEndDate: new Date('04/28/2019'),
-    taskbarEdited: function(args){
-      if (args) {
-        var obj = document.getElementById("Gantt").ej2_instances[0];
-        obj.dataSource = GanttData;
-        obj.fitToProject();
-      }
-    },
-    actionComplete: function (args) {
-      if ((args.action === "CellEditing" || args.action === "DialogEditing") && args.requestType === "save") {
-        var obj = document.getElementById("Gantt").ej2_instances[0];
-        obj.dataSource = GanttData;
-        obj.fitToProject();
-      }
+  dataSource: GanttData,
+  height: '430px',
+  taskFields: {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    endDate: 'EndDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    dependency: 'Predecessor',
+    parentID: 'ParentID'
+  },
+  editSettings: {
+    allowEditing: true,
+    allowTaskbarEditing: true
+  },
+  toolbar: ['Edit', 'ZoomToFit'],
+  actionComplete: function (args) {
+    if ((args.action === "CellEditing" || args.action === "DialogEditing")
+      && args.requestType === "save") {
+      ganttChart.dataSource = GanttData;
+      ganttChart.fitToProject();
     }
+  },
+  taskbarEdited: function (args) {
+    if (args) {
+      ganttChart.dataSource = GanttData;
+      ganttChart.fitToProject();
+    }
+  }
 });
+
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofit-cs1/index.ts b/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofit-cs1/index.ts
index 5fceeb5ad..9f72bbf26 100644
--- a/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofit-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofit-cs1/index.ts
@@ -1,47 +1,39 @@
-
-
-
-import { Gantt, Toolbar, Edit, Selection } from '@syncfusion/ej2-gantt';
+import { Gantt, Edit, Selection, Toolbar, actionCompleteArgs, ITaskbarEditedEventArgs } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
 
-Gantt.Inject(Toolbar, Edit, Selection);
+Gantt.Inject(Edit, Selection, Toolbar);
 
 let gantt: Gantt = new Gantt({
-    dataSource: GanttData,
-    allowSelection: true,
-    height: '450px',
-    taskFields: {
-        id: 'TaskID',
-        name: 'TaskName',
-        startDate: 'StartDate',
-        duration: 'Duration',
-        progress: 'Progress',
-        dependency: 'Predecessor',
-        parentID: 'ParentID'
-    },
-    toolbar: ['Edit', 'ZoomToFit'],
-    editSettings: {
-        allowEditing: true,
-        allowTaskbarEditing: true,
-    },
-    labelSettings: {
-        leftLabel: 'TaskName'
-    },
-    projectStartDate: new Date('03/24/2019'),
-    projectEndDate: new Date('04/28/2019'),
-    taskbarEdited: function(args){
-      if (args) {
-        var obj = document.getElementById("Gantt").ej2_instances[0];
-        obj.dataSource = GanttData;
-        obj.fitToProject();
-      }
-    },
-    actionComplete: function (args) {
-      if ((args.action === "CellEditing" || args.action === "DialogEditing") && args.requestType === "save") {
-        var obj = document.getElementById("Gantt").ej2_instances[0];
-        obj.dataSource = GanttData;
-        obj.fitToProject();
-      }
+  dataSource: GanttData,
+  height: '430px',
+  taskFields: {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    endDate: 'EndDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    dependency: 'Predecessor',
+    parentID: 'ParentID'
+  },
+  editSettings: {
+    allowEditing: true,
+    allowTaskbarEditing: true
+  },
+  toolbar: ['Edit', 'ZoomToFit'],
+  actionComplete: (args: actionCompleteArgs) => {
+    if ((args.action === "CellEditing" || args.action === "DialogEditing")
+      && args.requestType === "save") {
+      gantt.dataSource = GanttData;
+      gantt.fitToProject();
     }
+  },
+  taskbarEdited: (args: ITaskbarEditedEventArgs) => {
+    if (args) {
+      gantt.dataSource = GanttData;
+      gantt.fitToProject();
+    }
+  }
 });
+
 gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofit-cs1/systemjs.config.js b/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofit-cs1/systemjs.config.js
index f91edce14..8e1726657 100644
--- a/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofit-cs1/systemjs.config.js
+++ b/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofit-cs1/systemjs.config.js
@@ -21,25 +21,25 @@ System.config({
         "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
         "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
         "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
-		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
-        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
         "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
         "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
         "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
         "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
         "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
-        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
-		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
         "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
         "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
-		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
         "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
         "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
         "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
         "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
         "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
         "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
-        
+
     }
 });
 
diff --git a/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/index.js b/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/index.js
index dd0e8c8d2..5611ac6fd 100644
--- a/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/index.js
@@ -1,28 +1,27 @@
 var ganttChart = new ej.gantt.Gantt({
-    dataSource: GanttData,
-    height: '450px',
-    taskFields: {
-        id: 'TaskID',
-        name: 'TaskName',
-        startDate: 'StartDate',
-        duration: 'Duration',
-        progress: 'Progress',
-        dependency: 'Predecessor',
-        parentID: 'ParentID'
-    },
-    toolbar: ['ZoomToFit'],
-    labelSettings: {
-        leftLabel: 'TaskName'
-    },
-    projectStartDate: new Date('03/24/2019'),
-    projectEndDate: new Date('04/28/2019'),
-    dataBound: function (args) {
-      this.fitToProject();
-    }
+  dataSource: GanttData,
+  height: '430px',
+  taskFields: {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    endDate: 'EndDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    dependency: 'Predecessor',
+    parentID: 'ParentID'
+  },
+  toolbar: ['ZoomToFit'],
+  dataBound: function () {
+    ganttChart.fitToProject();
+  }
 });
+
 ganttChart.appendTo('#Gantt');
 
+var changeBtn = new ej.buttons.Button();
+changeBtn.appendTo('#changeData');
+
 document.getElementById('changeData').addEventListener('click', function () {
-  var obj = document.getElementById('Gantt').ej2_instances[0];
-  obj.dataSource = data;
+  ganttChart.dataSource = data;
 });
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/index.ts b/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/index.ts
index 66db048ed..089e06bbd 100644
--- a/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/index.ts
@@ -1,6 +1,3 @@
-
-
-
 import { Gantt, Toolbar } from '@syncfusion/ej2-gantt';
 import { GanttData, data } from './datasource.ts';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -8,26 +5,26 @@ import { Button } from '@syncfusion/ej2-buttons';
 Gantt.Inject(Toolbar);
 
 let gantt: Gantt = new Gantt({
-    dataSource: GanttData,
-    height: '450px',
-    taskFields: {
-        id: 'TaskID',
-        name: 'TaskName',
-        startDate: 'StartDate',
-        duration: 'Duration',
-        progress: 'Progress',
-        dependency: 'Predecessor',
-        parentID: 'ParentID'
-    },
-    toolbar: ['ZoomToFit'],
-    labelSettings: {
-        leftLabel: 'TaskName'
-    },
-    projectStartDate: new Date('03/24/2019'),
-    projectEndDate: new Date('04/28/2019'),
-    dataBound: function (args) {
-      this.fitToProject();
-    }
+  dataSource: GanttData,
+  height: '450px',
+  taskFields: {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    dependency: 'Predecessor',
+    parentID: 'ParentID'
+  },
+  toolbar: ['ZoomToFit'],
+  labelSettings: {
+    leftLabel: 'TaskName'
+  },
+  projectStartDate: new Date('03/24/2019'),
+  projectEndDate: new Date('04/28/2019'),
+  dataBound: function () {
+    this.fitToProject();
+  }
 });
 gantt.appendTo('#Gantt');
 
diff --git a/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/js/index.html
index c20190cf9..6cc48bf43 100644
--- a/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/js/index.html
@@ -1,28 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-            <button id="changeData">Change Data</button>
-            <div id="Gantt"></div>        
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <button id="changeData">Change Data</button>
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/ts/index.html
index ac3e9b619..7ff08fb7e 100644
--- a/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/ts/index.html
@@ -8,18 +8,18 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
-	<script src="es5-datasource.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
 </head>
 
 <body>
-       
+
     <div id='loader'>Loading....</div>
     <div id='container'>
         <button id="changeData">Change Data</button>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs1/index.js b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs1/index.js
index 022af2b61..4958cde11 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs1/index.js
@@ -1,19 +1,18 @@
-ej.gantt.Gantt.Inject(ej.gantt.Filter);
-
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-	    taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-            duration: 'Duration',
-            progress: 'Progress',
-            parentID: 'ParentID'
-        },
-		filterSettings: {
-            type:'Menu'
-        },
-		allowFiltering: true
-    });
+    dataSource: GanttData,
+    height: '450px',
+    allowFiltering: true,
+    filterSettings: {
+        type: 'Excel'
+    },
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    }
+});
+
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs1/index.ts b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs1/index.ts
index 74469e144..73c65714a 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs1/index.ts
@@ -6,6 +6,10 @@ Gantt.Inject(Filter);
 let gantt: Gantt = new Gantt({
     dataSource: GanttData,
     height: '450px',
+    allowFiltering: true,
+    filterSettings: {
+        type: 'Excel'
+    },
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -13,11 +17,7 @@ let gantt: Gantt = new Gantt({
         duration: 'Duration',
         progress: 'Progress',
         parentID: 'ParentID'
-    },
-    filterSettings: {
-        type:'Excel'
-    },
-    allowFiltering: true
+    }
 });
 
 gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/datasource.ts b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/datasource.ts
index 04cf6dd52..8527491f3 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/datasource.ts
@@ -1,4 +1,4 @@
-export let GanttData: Object[] = [
+export let data: Object[] = [
     {
         TaskID: 1,
         TaskName: 'Project Initiation',
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/es5-datasource.js b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/es5-datasource.js
index 7f269d947..699dced95 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/es5-datasource.js
@@ -1,4 +1,4 @@
-var GanttData = [
+var data = [
     {
         TaskID: 1,
         TaskName: 'Project Initiation',
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/index.js b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/index.js
index 022af2b61..811a8231c 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/index.js
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/index.js
@@ -1,19 +1,31 @@
 ej.gantt.Gantt.Inject(ej.gantt.Filter);
 
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-	    taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-            duration: 'Duration',
-            progress: 'Progress',
-            parentID: 'ParentID'
-        },
-		filterSettings: {
-            type:'Menu'
-        },
-		allowFiltering: true
-    });
+    dataSource: data,
+    height: '370px',
+    allowFiltering: true,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    splitterSettings: {
+        columnIndex: 3
+    },
+    filterSettings: {
+        type: 'Menu'
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
+});
+
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/index.ts b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/index.ts
index 596e175b4..9876d91e1 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/index.ts
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs2/index.ts
@@ -1,23 +1,34 @@
 import { Gantt, Filter } from '@syncfusion/ej2-gantt';
-import { GanttData } from './datasource.ts';
+import { data } from './datasource.ts';
 
 Gantt.Inject(Filter);
 
 let gantt: Gantt = new Gantt({
-    dataSource: GanttData,
-    height: '450px',
+    dataSource: data,
+    height: '370px',
+    allowFiltering: true,
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
         startDate: 'StartDate',
+        endDate: 'EndDate',
         duration: 'Duration',
         progress: 'Progress',
         parentID: 'ParentID'
     },
+    splitterSettings: {
+        columnIndex: 3
+    },
     filterSettings: {
         type: 'Menu'
     },
-    allowFiltering: true
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
 });
 
 gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/index.js b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/index.js
index 6c7c10bb5..8f7851c52 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/index.js
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/index.js
@@ -1,44 +1,57 @@
-ej.gantt.Gantt.Inject(ej.gantt.Filter);
+var gantt;
+var dropInstance;
 
-var ganttChart = new ej.gantt.Gantt({
+var taskFields = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+var splitterSettings = {
+    columnIndex: 2
+};
+
+var filter = {
+    ui: {
+        create: function (args) {
+            var input = ej.base.createElement('input', { className: 'flm-input' });
+            args.target.appendChild(input);
+            dropInstance = new ej.dropdowns.DropDownList({
+                dataSource: new ej.data.DataManager(GanttData),
+                fields: { text: 'TaskName', value: 'TaskName' },
+                placeholder: 'Select a value',
+                popupHeight: '200px'
+            });
+            dropInstance.appendTo(input);
+        },
+        write: function (args) {
+            dropInstance.value = args.filteredValue;
+        },
+        read: function (args) {
+            args.fltrObj.filterByColumn(
+                args.column.field,
+                args.operator,
+                dropInstance.value
+            );
+        }
+    }
+};
+
+gantt = new ej.gantt.Gantt({
     dataSource: GanttData,
-    height: '450px',
-    taskFields: {
-        id: 'TaskID',
-        name: 'TaskName',
-        startDate: 'StartDate',
-        duration: 'Duration',
-        progress: 'Progress',
-        parentID: 'ParentID'
-    },
-     columns: [
-            { field: 'TaskID' },
-            { field: 'TaskName', filter: {
-                ui: {
-                    create: function(args){
-                        var db = new ej.data.DataManager(ganttChart.treeGrid.grid.dataSource);
-                        var flValInput = ej.base.createElement('input', { className: 'flm-input' });
-                        args.target.appendChild(flValInput);
-                        this.dropInstance = new ej.dropdowns.DropDownList({
-                            dataSource: new ej.data.DataManager(ganttChart.treeGrid.grid.dataSource),
-                            fields: { text: 'TaskName', value: 'TaskName' },
-                            placeholder: 'Select a value',
-                            popupHeight: '200px'
-                        });
-                        this.dropInstance.appendTo(flValInput);
-                    },
-                    write: function(args){
-                        this.dropInstance.value = args.filteredValue;
-                    },
-                    read: function(args) {
-                        args.fltrObj.filterByColumn(args.column.field, args.operator, this.dropInstance.value);
-                    }
-                }
-                }
-            },
-            { field: 'StartDate' },
-            { field: 'Duration' }
-        ],
-    allowFiltering: true
-    });
-ganttChart.appendTo('#Gantt');
\ No newline at end of file
+    height: '370px',
+    allowFiltering: true,
+    taskFields: taskFields,
+    splitterSettings: splitterSettings,
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 120 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250, filter: filter },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
+});
+
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/index.ts b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/index.ts
index 82694e305..dc0c9cbb1 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/index.ts
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/index.ts
@@ -1,54 +1,65 @@
-import { Gantt, Filter } from '@syncfusion/ej2-gantt';
-import { GanttData } from 'datasource.ts';
-import { DataManager } from '@syncfusion/ej2-data';
+import { Gantt, Filter, TaskFieldsModel, SplitterSettingsModel } from '@syncfusion/ej2-gantt';
 import { DropDownList } from '@syncfusion/ej2-dropdowns';
+import { DataManager } from '@syncfusion/ej2-data';
 import { createElement } from '@syncfusion/ej2-base';
+import { GanttData } from './datasource.ts';
 
 Gantt.Inject(Filter);
 
-let gantt: Gantt = new Gantt({
+let gantt: Gantt;
+let dropInstance: DropDownList;
+
+let taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+let splitterSettings: SplitterSettingsModel = {
+    columnIndex: 2
+};
+
+let filter = {
+    ui: {
+        create: (args: any) => {
+            let input: HTMLElement = createElement('input', { className: 'flm-input' });
+            args.target.appendChild(input);
+            dropInstance = new DropDownList({
+                dataSource: new DataManager(GanttData),
+                fields: { text: 'TaskName', value: 'TaskName' },
+                placeholder: 'Select a value',
+                popupHeight: '200px'
+            });
+            dropInstance.appendTo(input);
+        },
+        write: (args: any) => {
+            dropInstance.value = args.filteredValue;
+        },
+        read: (args: any) => {
+            args.fltrObj.filterByColumn(
+                args.column.field,
+                args.operator,
+                dropInstance.value
+            );
+        }
+    }
+};
+
+gantt = new Gantt({
     dataSource: GanttData,
-    height: '450px',
-    taskFields: {
-        id: 'TaskID',
-        name: 'TaskName',
-        startDate: 'StartDate',
-        duration: 'Duration',
-        progress: 'Progress',
-        parentID: 'ParentID'
-    },
-     columns: [
-            { field: 'TaskID' },
-            { field: 'TaskName', filter: {
-                ui: {
-                    create: (args: { target: Element, column: Object }) => {
-                        let db: Object = new DataManager(gantt.treeGrid.grid.dataSource);
-                        let flValInput: HTMLElement = createElement('input', { className: 'flm-input' });
-                        args.target.appendChild(flValInput);
-                        this.dropInstance = new DropDownList({
-                            dataSource: new DataManager(gantt.treeGrid.grid.dataSource),
-                            fields: { text: 'TaskName', value: 'TaskName' },
-                            placeholder: 'Select a value',
-                            popupHeight: '200px'
-                        });
-                        this.dropInstance.appendTo(flValInput);
-                    },
-                    write: (args: {
-                        column: Object, target: Element, parent: any,
-                        filteredValue: number | string
-                    }) => {
-                        this.dropInstance.value = args.filteredValue;
-                    },
-                    read: (args: { target: Element, column: any, operator: string, fltrObj: Filter }) => {
-                        args.fltrObj.filterByColumn(args.column.field, args.operator, this.dropInstance.value);
-                    }
-                }
-                }
-            },
-            { field: 'StartDate' },
-            { field: 'Duration' }
-        ],
-    allowFiltering: true
+    height: '370px',
+    allowFiltering: true,
+    taskFields: taskFields,
+    splitterSettings: splitterSettings,
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 120 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250, filter: filter },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
 });
 
 gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/js/index.html b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/js/index.html
index 2f8e46498..3a6881318 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-          <div id="Gantt"></div>
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/ts/index.html b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/ts/index.html
index 7b10e1621..1b0deba7f 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs3/ts/index.html
@@ -7,17 +7,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
-    <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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="container">
-        <div id="Gantt"></div>        
+        <div id="Gantt"></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/datasource.ts b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/datasource.ts
index 6d5a0da32..de05133db 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/datasource.ts
@@ -1,10 +1,10 @@
-export let GanttData: Object[]  = [
-    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
-    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
-    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
-    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+export const data: object[] = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/es5-datasource.js b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/es5-datasource.js
index 0ee8ab55d..59c243fa0 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/es5-datasource.js
@@ -1,10 +1,10 @@
-var GanttData = [
-    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
-    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
-    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
-    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+const data = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/index.js b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/index.js
index 278498acd..43b17c282 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/index.js
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/index.js
@@ -1,20 +1,37 @@
-ej.gantt.Gantt.Inject(ej.gantt.Filter);
+var taskFields = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+var splitterSettings = {
+    columnIndex: 3
+};
+
+var filterSettings = {
+    columns: [
+        { field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' },
+        { field: 'TaskID', matchCase: false, operator: 'equal', predicate: 'and', value: 2 }
+    ]
+};
 
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-            duration: 'Duration',
-            progress: 'Progress',
-            parentID: 'ParentID'
-        },
-		filterSettings: {
-            columns: [{ field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' },
-               { field: 'TaskID', matchCase: false, operator: 'equal', predicate: 'and', value: 2 }]
-        },
-		allowFiltering: true
-    });
-ganttChart.appendTo('#Gantt');
\ No newline at end of file
+    dataSource: data,
+    height: '370px',
+    allowFiltering: true,
+    taskFields: taskFields,
+    splitterSettings: splitterSettings,
+    filterSettings: filterSettings,
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
+});
+
+ganttChart.appendTo('#Gantt');
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/index.ts b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/index.ts
index 6b3ee1871..5ff960234 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/index.ts
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/index.ts
@@ -1,24 +1,44 @@
-import { Gantt, Filter } from '@syncfusion/ej2-gantt';
-import { GanttData } from 'datasource.ts';
+import { Gantt, Filter, TaskFieldsModel, SplitterSettingsModel, FilterSettingsModel, ColumnModel } from '@syncfusion/ej2-gantt';
+import { data } from './datasource.ts';
 
 Gantt.Inject(Filter);
 
+let taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+let splitterSettings: SplitterSettingsModel = {
+    columnIndex: 3
+};
+
+let filterSettings: FilterSettingsModel = {
+    columns: [
+        { field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' },
+        { field: 'TaskID', matchCase: false, operator: 'equal', predicate: 'and', value: 2 }
+    ]
+};
+
+let columns: ColumnModel[] = [
+    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+    { field: 'TaskName', headerText: 'Task Name', width: 250 },
+    { field: 'StartDate', headerText: 'Start Date', width: 150 },
+    { field: 'Duration', headerText: 'Duration', width: 150 },
+    { field: 'Progress', headerText: 'Progress', width: 150 }
+];
+
 let gantt: Gantt = new Gantt({
-    dataSource: GanttData,
-    height: '450px',
-    taskFields: {
-        id: 'TaskID',
-        name: 'TaskName',
-        startDate: 'StartDate',
-        duration: 'Duration',
-        progress: 'Progress',
-        parentID: 'ParentID'
-    },
-    filterSettings: {
-        columns: [{ field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' },
-        { field: 'TaskID', matchCase: false, operator: 'equal', predicate: 'and', value: 2 }]
-    },
-    allowFiltering: true
+    dataSource: data,
+    height: '370px',
+    allowFiltering: true,
+    taskFields: taskFields,
+    splitterSettings: splitterSettings,
+    filterSettings: filterSettings,
+    columns: columns
 });
 
 gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/ts/index.html b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/ts/index.html
index 7b10e1621..4f9b709a6 100644
--- a/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/initialLoadFiltering-cs4/ts/index.html
@@ -8,16 +8,16 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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="container">
-        <div id="Gantt"></div>        
+        <div id="Gantt"></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/newrowposition-cs1/index.js b/ej2-javascript/code-snippet/gantt/newrowposition-cs1/index.js
index 81b47bffd..a46243345 100644
--- a/ej2-javascript/code-snippet/gantt/newrowposition-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/newrowposition-cs1/index.js
@@ -1,84 +1,65 @@
-var clickHandler = function(args){
-	if(args.item.id === 'Add'){
-    var contextMenuObj = document.getElementById("contextmenu").ej2_instances[0];
-        contextMenuObj.open(60, 20);
-	}
-};
-ej.gantt.Gantt.Inject(ej.gantt.Toolbar);
-var menuItems = [
-    {
-        text: 'Bottom'
-    },
-    {
-        text: 'Above'
-    },
-    {
-        text: 'Below'
-    },
-    {
-        text: 'Child'
-    },
-    {
-        text: 'Top'
-    }];
-var menuOptions = {
-        items: menuItems,
-        select: select
-    };
-
-var menuObj = new ej.navigations.ContextMenu(menuOptions, '#contextmenu');
-
-function select(args) {
-  let gantt = (document.getElementsByClassName('e-gantt')[0]).ej2_instances[0];
-  if (args.item.text === "Bottom") {
-    gantt.editSettings.newRowPosition = "Bottom";
-    gantt.openAddDialog();
-  } else if (args.item.text === "Above") {
-    if (gantt.selectedRowIndex == -1) {
-      alert("Please select any row");
-    } else {
-      gantt.editSettings.newRowPosition = "Above";
-      gantt.openAddDialog();
-    }
-  } else if (args.item.text === "Below") {
-    if (gantt.selectedRowIndex == -1) {
-      alert("Please select any row");
-    } else {
-      gantt.editSettings.newRowPosition = "Below";
-      gantt.openAddDialog();
-    }
-
-  } else if (args.item.text === "Child") {
-    if (gantt.selectedRowIndex == -1) {
-      alert("Please select any row");
-    } else {
-      gantt.editSettings.newRowPosition = "Child";
-      gantt.openAddDialog();
+var menuObj = new ej.navigations.ContextMenu({
+  items: [
+    { text: 'Bottom' },
+    { text: 'Above' },
+    { text: 'Below' },
+    { text: 'Child' },
+    { text: 'Top' }
+  ],
+  select: function (args) {
+    if (args.item.text === "Bottom") {
+      ganttChart.editSettings.newRowPosition = "Bottom";
+      ganttChart.openAddDialog();
+    } else if (args.item.text === "Above") {
+      if (ganttChart.selectedRowIndex === -1) {
+        alert("Please select any row");
+      } else {
+        ganttChart.editSettings.newRowPosition = "Above";
+        ganttChart.openAddDialog();
+      }
+    } else if (args.item.text === "Below") {
+      if (ganttChart.selectedRowIndex === -1) {
+        alert("Please select any row");
+      } else {
+        ganttChart.editSettings.newRowPosition = "Below";
+        ganttChart.openAddDialog();
+      }
+    } else if (args.item.text === "Child") {
+      if (ganttChart.selectedRowIndex === -1) {
+        alert("Please select any row");
+      } else {
+        ganttChart.editSettings.newRowPosition = "Child";
+        ganttChart.openAddDialog();
+      }
+    } else if (args.item.text === "Top") {
+      ganttChart.editSettings.newRowPosition = "Top";
+      ganttChart.openAddDialog();
     }
-  } else if (args.item.text === "Top") {
-    gantt.editSettings.newRowPosition = "Top";
-    gantt.openAddDialog();
   }
-}
+});
+menuObj.appendTo('#contextmenu');
 
 var ganttChart = new ej.gantt.Gantt({
-    dataSource: GanttData,
-		height:'450px',
-		allowSelection: true,
-		taskFields: {
-        id: 'TaskID',
-        name: 'TaskName',
-        startDate: 'StartDate',
-        duration: 'Duration',
-        progress: 'Progress',
-        parentID: 'ParentID'
-      },
-		editSettings:{
-			allowAdding: true,
-      allowEditing: true
-		},
-    toolbar: ['Edit', { text: 'Add', tooltipText: 'Add', id: 'Add' }],
-    toolbarClick: clickHandler,
-
+  dataSource: GanttData,
+  height: '430px',
+  taskFields: {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+  },
+  editSettings: {
+    allowEditing: true,
+    allowAdding: true,
+    allowDeleting: true
+  },
+  toolbar: ['Edit', { text: 'Add', tooltipText: 'Add', id: 'Add' }],
+  toolbarClick: function (args) {
+    if (args.item.id === 'Add') {
+      menuObj.open(40, 20);
+    }
+  }
 });
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/newrowposition-cs1/index.ts b/ej2-javascript/code-snippet/gantt/newrowposition-cs1/index.ts
index 7ea176ce9..b718359a7 100644
--- a/ej2-javascript/code-snippet/gantt/newrowposition-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/newrowposition-cs1/index.ts
@@ -1,8 +1,5 @@
-
-
-
 import { ContextMenu, MenuItemModel, ContextMenuModel } from '@syncfusion/ej2-navigations';
-import { Gantt, Toolbar, Filter, Edit, Selection} from '@syncfusion/ej2-gantt';
+import { Gantt, Toolbar, Filter, Edit, Selection } from '@syncfusion/ej2-gantt';
 import { EmitType } from '@syncfusion/ej2-base';
 import { ClickEventArgs } from '@syncfusion/ej2-navigations';
 import { GanttData } from './datasource.ts';
@@ -13,33 +10,33 @@ Gantt.Inject(Toolbar, Selection, Filter, Edit);
 enableRipple(true);
 
 let menuItems: MenuItemModel[] = [
-    {
-        text: 'Top'
-    },
-    {
-        text: 'Bottom'
-    },
-    {
-        text: 'Above'
-    },
-    {
-        text: 'Below'
-    },
-    {
-        text: 'Child'
-    },];
+  {
+    text: 'Top'
+  },
+  {
+    text: 'Bottom'
+  },
+  {
+    text: 'Above'
+  },
+  {
+    text: 'Below'
+  },
+  {
+    text: 'Child'
+  }];
 
 let menuOptions: ContextMenuModel = {
-    items: menuItems,
-    select: select
+  items: menuItems,
+  select: select
 };
 
 let menuObj: ContextMenu = new ContextMenu(menuOptions, '#contextmenu');
 
 let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
-    if (args.item.text === 'Add') {
-        menuObj.open(60, 20);
-    }
+  if (args.item.text === 'Add') {
+    menuObj.open(60, 20);
+  }
 };
 
 function select(args: any) {
@@ -76,24 +73,24 @@ function select(args: any) {
 }
 
 let gantt: Gantt = new Gantt({
-    dataSource: GanttData,
-    height: '450px',
-    allowSelection: true,
-    taskFields: {
-        id: 'TaskID',
-        name: 'TaskName',
-        startDate: 'StartDate',
-        duration: 'Duration',
-        progress: 'Progress',
-        parentID: 'ParentID'
-    },
-    editSettings: {
-        allowEditing: true,
-        allowAdding: true,
-        allowDeleting: true
-    },
-    toolbarClick: clickHandler,
-    toolbar: [ 'Edit', { text: 'Add', tooltipText: 'Add', id: 'Add' }],
-    });
+  dataSource: GanttData,
+  height: '450px',
+  allowSelection: true,
+  taskFields: {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+  },
+  editSettings: {
+    allowEditing: true,
+    allowAdding: true,
+    allowDeleting: true
+  },
+  toolbarClick: clickHandler,
+  toolbar: ['Edit', { text: 'Add', tooltipText: 'Add', id: 'Add' }],
+});
 
 gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/newrowposition-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/newrowposition-cs1/ts/index.html
index 460642ddc..14fb7f01e 100644
--- a/ej2-javascript/code-snippet/gantt/newrowposition-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/newrowposition-cs1/ts/index.html
@@ -8,13 +8,13 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
         <div id='Gantt'></div>
diff --git a/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/datasource.ts b/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/datasource.ts
index 04cf6dd52..74bc2d552 100644
--- a/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/datasource.ts
@@ -1,20 +1,66 @@
-export let GanttData: Object[] = [
+export let editingData: Object[] = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
     {
-        TaskID: 1,
-        TaskName: 'Project Initiation',
-        StartDate: new Date('04/02/2019'),
-        EndDate: new Date('04/21/2019'),
+        TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0,
+        ParentID: 1, Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
     },
-    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
     {
-        TaskID: 5,
-        TaskName: 'Project Estimation',
-        StartDate: new Date('04/02/2019'),
-        EndDate: new Date('04/21/2019'),
+        TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Predecessor: '2',
+        resources: [2, 3, 5], info: 'Obtain an engineered soil test of lot where construction is planned.' + 'From an engineer or company specializing in soil testing'
     },
-    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
-    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, ParentID: 1, Predecessor: '3', Progress: 30 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
+    {
+        TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3,
+        ParentID: 5, Predecessor: '4', Progress: 30, resources: 4, info: 'Develop floor plans and obtain a materials list for estimations'
+    },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Predecessor: '6', resources: [4, 8], info: '' },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0, ParentID: 5, Predecessor: '7', resources: [12, 5], info: '' },
+    {
+        TaskID: 9, TaskName: 'Sign Contract', StartDate: new Date('04/04/2019'), Duration: 1, Predecessor: '8', Progress: 30, resources: [12],
+        info: 'If required obtain approval from HOA (homeowners association) or ARC (architectural review committee)'
+    },
+    { TaskID: 10, TaskName: 'Project Approval and kick off', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), Duration: 0, Predecessor: '9' },
+    { TaskID: 11, TaskName: 'Site Work', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019') },
+    {
+        TaskID: 12, TaskName: 'Clear the building site', StartDate: new Date('04/04/2019'), Duration: 2, ParentID: 11, Progress: 30,
+        Predecessor: '9', resources: [6, 7], info: 'Clear the building site (demolition of existing home if necessary)'
+    },
+    { TaskID: 13, TaskName: 'Install temporary power service', StartDate: new Date('04/04/2019'), Duration: 2, ParentID: 11, Predecessor: '12', resources: [6, 7], info: '' },
+    { TaskID: 14, TaskName: 'Foundation', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019') },
+    {
+        TaskID: 15, TaskName: 'Excavate for foundations', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 14, Progress: 30,
+        Predecessor: '13', resources: [2, 8], info: 'Excavate the foundation and dig footers (Scope of work is dependent of foundation designed by engineer)'
+    },
+    {
+        TaskID: 16, TaskName: 'Dig footer', StartDate: new Date('04/04/2019'),
+        Duration: 2, ParentID: 14, Predecessor: '15FF', resources: [8], info: ''
+    },
+    {
+        TaskID: 17, TaskName: 'Install plumbing grounds', StartDate: new Date('04/04/2019'), Duration: 4, ParentID: 14,
+        Progress: 30, Predecessor: '15', resources: [9], info: ''
+    },
+    {
+        TaskID: 18, TaskName: 'Pour a foundation and footer with concrete', StartDate: new Date('04/04/2019'),
+        Duration: 1, ParentID: 14, Predecessor: '17', resources: [8, 9, 10], info: ''
+    },
+    {
+        TaskID: 19, TaskName: 'Cure basement walls', StartDate: new Date('04/04/2019'), Duration: 4, ParentID: 14,
+        Progress: 30, Predecessor: '18', resources: [10], info: ''
+    },
+];
+
+export let editingResources: Object[] = [
+    { resourceId: 1, resourceName: 'Martin Tamer' },
+    { resourceId: 2, resourceName: 'Rose Fuller' },
+    { resourceId: 3, resourceName: 'Margaret Buchanan' },
+    { resourceId: 4, resourceName: 'Fuller King' },
+    { resourceId: 5, resourceName: 'Davolio Fuller' },
+    { resourceId: 6, resourceName: 'Van Jack' },
+    { resourceId: 7, resourceName: 'Fuller Buchanan' },
+    { resourceId: 8, resourceName: 'Jack Davolio' },
+    { resourceId: 9, resourceName: 'Tamer Vinet' },
+    { resourceId: 10, resourceName: 'Vinet Fuller' },
+    { resourceId: 11, resourceName: 'Bergs Anton' },
+    { resourceId: 12, resourceName: 'Construction Supervisor' }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/es5-datasource.js
index 7f269d947..34895a0e8 100644
--- a/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/es5-datasource.js
@@ -1,20 +1,66 @@
-var GanttData = [
+let editingData = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
     {
-        TaskID: 1,
-        TaskName: 'Project Initiation',
-        StartDate: new Date('04/02/2019'),
-        EndDate: new Date('04/21/2019'),
+        TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0,
+        ParentID: 1, Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
     },
-    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
     {
-        TaskID: 5,
-        TaskName: 'Project Estimation',
-        StartDate: new Date('04/02/2019'),
-        EndDate: new Date('04/21/2019'),
+        TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Predecessor: '2',
+        resources: [2, 3, 5], info: 'Obtain an engineered soil test of lot where construction is planned.' + 'From an engineer or company specializing in soil testing'
     },
-    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
-    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, ParentID: 1, Predecessor: '3', Progress: 30 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
+    {
+        TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3,
+        ParentID: 5, Predecessor: '4', Progress: 30, resources: 4, info: 'Develop floor plans and obtain a materials list for estimations'
+    },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Predecessor: '6', resources: [4, 8], info: '' },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0, ParentID: 5, Predecessor: '7', resources: [12, 5], info: '' },
+    {
+        TaskID: 9, TaskName: 'Sign Contract', StartDate: new Date('04/04/2019'), Duration: 1, Predecessor: '8', Progress: 30, resources: [12],
+        info: 'If required obtain approval from HOA (homeowners association) or ARC (architectural review committee)'
+    },
+    { TaskID: 10, TaskName: 'Project Approval and kick off', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), Duration: 0, Predecessor: '9' },
+    { TaskID: 11, TaskName: 'Site Work', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019') },
+    {
+        TaskID: 12, TaskName: 'Clear the building site', StartDate: new Date('04/04/2019'), Duration: 2, ParentID: 11, Progress: 30,
+        Predecessor: '9', resources: [6, 7], info: 'Clear the building site (demolition of existing home if necessary)'
+    },
+    { TaskID: 13, TaskName: 'Install temporary power service', StartDate: new Date('04/04/2019'), Duration: 2, ParentID: 11, Predecessor: '12', resources: [6, 7], info: '' },
+    { TaskID: 14, TaskName: 'Foundation', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019') },
+    {
+        TaskID: 15, TaskName: 'Excavate for foundations', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 14, Progress: 30,
+        Predecessor: '13', resources: [2, 8], info: 'Excavate the foundation and dig footers (Scope of work is dependent of foundation designed by engineer)'
+    },
+    {
+        TaskID: 16, TaskName: 'Dig footer', StartDate: new Date('04/04/2019'),
+        Duration: 2, ParentID: 14, Predecessor: '15FF', resources: [8], info: ''
+    },
+    {
+        TaskID: 17, TaskName: 'Install plumbing grounds', StartDate: new Date('04/04/2019'), Duration: 4, ParentID: 14,
+        Progress: 30, Predecessor: '15', resources: [9], info: ''
+    },
+    {
+        TaskID: 18, TaskName: 'Pour a foundation and footer with concrete', StartDate: new Date('04/04/2019'),
+        Duration: 1, ParentID: 14, Predecessor: '17', resources: [8, 9, 10], info: ''
+    },
+    {
+        TaskID: 19, TaskName: 'Cure basement walls', StartDate: new Date('04/04/2019'), Duration: 4, ParentID: 14,
+        Progress: 30, Predecessor: '18', resources: [10], info: ''
+    },
+];
+
+let editingResources = [
+    { resourceId: 1, resourceName: 'Martin Tamer' },
+    { resourceId: 2, resourceName: 'Rose Fuller' },
+    { resourceId: 3, resourceName: 'Margaret Buchanan' },
+    { resourceId: 4, resourceName: 'Fuller King' },
+    { resourceId: 5, resourceName: 'Davolio Fuller' },
+    { resourceId: 6, resourceName: 'Van Jack' },
+    { resourceId: 7, resourceName: 'Fuller Buchanan' },
+    { resourceId: 8, resourceName: 'Jack Davolio' },
+    { resourceId: 9, resourceName: 'Tamer Vinet' },
+    { resourceId: 10, resourceName: 'Vinet Fuller' },
+    { resourceId: 11, resourceName: 'Bergs Anton' },
+    { resourceId: 12, resourceName: 'Construction Supervisor' }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/index.js b/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/index.js
index c939bd364..19cfd179a 100644
--- a/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/index.js
@@ -1,33 +1,46 @@
-ej.gantt.Gantt.Inject(ej.gantt.Edit);
-
-var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			parentID: 'ParentID'
-        },
-		editSettings: {
-		   allowEditing:true,
-           allowAdding: true
-         }
+var gantt = new ej.gantt.Gantt({
+    dataSource: editingData,
+    height: '430px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        dependency: 'Predecessor',
+        parentID: 'ParentID',
+        notes: 'info',
+        resourceInfo: 'resources'
+    },
+    editDialogFields: [
+        { type: 'General', headerText: 'General' },
+        { type: 'Dependency' },
+        { type: 'Resources' },
+        { type: 'Notes' }
+    ],
+    resourceNameMapping: 'resourceName',
+    resourceIDMapping: 'resourceId',
+    resources: editingResources,
+    editSettings: {
+        allowAdding: true,
+        allowEditing: true,
+        allowTaskbarEditing: true
+    }
 });
-ganttChart.appendTo('#Gantt');
 
-var editBtn= new ej.buttons.Button();
-editBtn.appendTo('#editDialog');
+gantt.appendTo('#Gantt');
 
-var addBtn= new ej.buttons.Button();
-addBtn.appendTo('#addDialog');
+var editBtn = new ej.buttons.Button();
+editBtn.appendTo('#editDialog');
 
-document.getElementById('editDialog').addEventListener('click', () => {
-    ganttChart.editModule.dialogModule.openEditDialog();
+document.getElementById('editDialog').addEventListener('click', function () {
+    gantt.editModule.dialogModule.openEditDialog(gantt.selectedRowIndex + 1);
 });
 
-document.getElementById('addDialog').addEventListener('click', () => {
-    ganttChart.editModule.dialogModule.openAddDialog();
+var addBtn = new ej.buttons.Button();
+addBtn.appendTo('#addDialog');
+
+document.getElementById('addDialog').addEventListener('click', function () {
+    gantt.editModule.dialogModule.openAddDialog();
 });
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/index.ts b/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/index.ts
index 4b43d4bf4..86a414792 100644
--- a/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/openEditAddDialog-cs1/index.ts
@@ -1,24 +1,33 @@
-
-
-
 import { Gantt, Edit, Selection } from '@syncfusion/ej2-gantt';
 import { Button } from '@syncfusion/ej2-buttons';
-import { GanttData } from './datasource.ts';
-import { getValue } from  '@syncfusion/ej2-base';
+import { editingData, editingResources } from './datasource.ts';
 
 Gantt.Inject(Edit, Selection);
 
 let gantt: Gantt = new Gantt({
-    dataSource: GanttData,
-    height: '450px',
+    dataSource: editingData,
+    height: '430px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
         startDate: 'StartDate',
+        endDate: 'EndDate',
         duration: 'Duration',
         progress: 'Progress',
-        parentID: 'ParentID'
+        dependency: 'Predecessor',
+        parentID: 'ParentID',
+        notes: 'info',
+        resourceInfo: 'resources'
     },
+    editDialogFields: [
+        { type: 'General', headerText: 'General' },
+        { type: 'Dependency' },
+        { type: 'Resources' },
+        { type: 'Notes' }
+    ],
+    resourceNameMapping: 'resourceName',
+    resourceIDMapping: 'resourceId',
+    resources: editingResources,
     editSettings: {
         allowAdding: true,
         allowEditing: true,
@@ -31,13 +40,13 @@ gantt.appendTo('#Gantt');
 let editBtn: Button = new Button();
 editBtn.appendTo('#editDialog');
 
+document.getElementById('editDialog')!.addEventListener('click', () => {
+    gantt.editModule.dialogModule.openEditDialog(gantt.selectedRowIndex + 1);
+});
+
 let addBtn: Button = new Button();
 addBtn.appendTo('#addDialog');
 
-document.getElementById('editDialog').addEventListener('click', () => {
-    gantt.editModule.dialogModule.openEditDialog(getValue('TaskID', gantt.selectionModule.getSelectedRecords()[0]));
-});
-
-document.getElementById('addDialog').addEventListener('click', () => {
+document.getElementById('addDialog')!.addEventListener('click', () => {
     gantt.editModule.dialogModule.openAddDialog();
 });
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/datasource.ts b/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/datasource.ts
index 767e6495f..5296dc5d9 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/datasource.ts
@@ -1,28 +1,91 @@
-export let GanttData: Object[]  = [
-  { TaskID: 1, TaskName: 'Product concept', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-  { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30, ParentID: 1, Resources: [2], EmailID: 'RoseFuller@gmail.com', ResourcesImage: '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' },
-  { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3, ParentID: 1, Resources: [3], EmailID: 'MargaretBuchanan@gmail.com', ResourcesImage: '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' },
-  { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 2, Predecessor: '2', Progress: 30, ParentID: 1, Resources: [4], EmailID: 'FullerKing@gmail.com', ResourcesImage: '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' },
-  { TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4', Resources: [1], EmailID: 'MartinTamer@gmail.com', ResourcesImage: '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' },
-  { TaskID: 6, TaskName: 'Market research', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-  { TaskID: 7, TaskName: 'Demand analysis', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentID: 6},
-  { TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', Progress: 30, ParentID: 7, Resources: [5], EmailID: 'DavolioFuller@gmail.com', ResourcesImage: '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' },
-  { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', ParentID: 7, Resources: [6], EmailID: 'VanJack@gmail.com', ResourcesImage: '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' },
-  { TaskID: 10, TaskName: 'Competitor analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '7, 8', Progress: 30, ParentID: 6, Resources: [4], EmailID: 'FullerKing@gmail.com', ResourcesImage: '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' },
-  { TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '9', ParentID: 6, Resources: [8], EmailID: 'JackDavolio@gmail.com', ResourcesImage: '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' },
+export const data = [
+  {
+    TaskID: 1,
+    TaskName: 'Product concept',
+    StartDate: new Date('04/02/2019'),
+    EndDate: new Date('04/21/2019'),
+    EmailId: 'MartinTamer@gmail.com',
+  },
+  {
+    TaskID: 2,
+    TaskName: 'Defining the product and its usage',
+    StartDate: new Date('04/02/2019'),
+    Duration: 3,
+    ParentID: 1,
+    Progress: 30,
+    resources: [2],
+    EmailId: 'RoseFuller@gmail.com',
+    resourcesImage:
+      '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',
+  },
+  {
+    TaskID: 3,
+    TaskName: 'Defining target audience',
+    StartDate: new Date('04/02/2019'),
+    Duration: 3,
+    ParentID: 1,
+    resources: [3],
+    EmailId: 'MargaretBuchanan@gmail.com',
+    resourcesImage:
+      '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',
+  },
+  {
+    TaskID: 4,
+    TaskName: 'Prepare product sketch and notes',
+    StartDate: new Date('04/02/2019'),
+    Duration: 2,
+    ParentID: 1,
+    Predecessor: '2',
+    Progress: 30,
+    resources: [4],
+    EmailId: 'FullerKing@gmail.com',
+    resourcesImage:
+      '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',
+  },
+  {
+    TaskID: 5,
+    TaskName: 'Concept approval',
+    StartDate: new Date('04/02/2019'),
+    Duration: 0,
+    Predecessor: '3,4',
+    resources: [5],
+    EmailId: 'Davoliofuller@gmail.com',
+    resourcesImage:
+      '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',
+  },
+  {
+    TaskID: 6,
+    TaskName: 'Market research',
+    StartDate: new Date('04/02/2019'),
+    EndDate: new Date('04/21/2019'),
+    EmailId: 'Vanjack@gmail.com',
+  },
+  {
+    TaskID: 7,
+    TaskName: 'Demand analysis',
+    StartDate: new Date('04/04/2019'),
+    EndDate: new Date('04/21/2019'),
+    EmailId: 'RoseFuller@gmail.com',
+  },
+  {
+    TaskID: 8,
+    TaskName: 'Customer strength',
+    StartDate: new Date('04/04/2019'),
+    Duration: 4,
+    Predecessor: '5',
+    Progress: 30,
+    resources: [7],
+    EmailId: 'Fullerbuchanan@gmail.com',
+    resourcesImage:
+      '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',
+  }
 ];
-	
-export let editingResources: Object[] = [
-  { ResourceId: 1, ResourceName: 'Martin Tamer' },
-  { ResourceId: 2, ResourceName: 'Rose Fuller' },
-  { ResourceId: 3, ResourceName: 'Margaret Buchanan' },
-  { ResourceId: 4, ResourceName: 'Fuller King' },
-  { ResourceId: 5, ResourceName: 'Davolio Fuller' },
-  { ResourceId: 6, ResourceName: 'Van Jack' },
-  { ResourceId: 7, ResourceName: 'Fuller Buchanan' },
-  { ResourceId: 8, ResourceName: 'Jack Davolio' },
-  { ResourceId: 9, ResourceName: 'Tamer Vinet' },
-  { ResourceId: 10, ResourceName: 'Vinet Fuller' },
-  { ResourceId: 11, ResourceName: 'Bergs Anton' },
-  { ResourceId: 12, ResourceName: 'Construction Supervisor' }
+
+export const resources = [
+  { resourceId: 1, resourceName: 'Martin Tamer' },
+  { resourceId: 2, resourceName: 'Rose Fuller' },
+  { resourceId: 3, resourceName: 'Margaret Buchanan' },
+  { resourceId: 4, resourceName: 'Fuller King' },
+  { resourceId: 5, resourceName: 'Davolio Fuller' },
+  { resourceId: 7, resourceName: 'Fuller Buchanan' }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/es5-datasource.js
index 8b0eec52b..e8e989498 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/es5-datasource.js
@@ -1,28 +1,91 @@
-var GanttData = [
-    { TaskID: 1, TaskName: 'Product concept', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-	{ TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30, ParentID: 1, Resources: [2], EmailID: 'RoseFuller@gmail.com', ResourcesImage: '/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAAQEBAQEBAQEBAQGBgUGBggHBwcHCAwJCQkJCQwTDA4MDA4MExEUEA8QFBEeFxUVFx4iHRsdIiolJSo0MjRERFwBBAQEBAQEBAQEBAYGBQYGCAcHBwcIDAkJCQkJDBMMDgwMDgwTERQQDxAUER4XFRUXHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAbAAADAAMBAQAAAAAAAAAAAAAFBwgEBgkCA//aAAgBAQAAAAC/hQFOvYjnCinKzbmZbGH5zuQtL+rjE/fO5y7I93/rpMhES5qCgxOTPErmqDaDCzVpNoBsPfbf/8QAGgEAAQUBAAAAAAAAAAAAAAAAAAECAwQFBv/aAAgBAhAAAAAoWZjmNLVM6a2Pan//xAAXAQEBAQEAAAAAAAAAAAAAAAAABAUG/9oACAEDEAAAAGjNO7PFxm1FEH//xAA3EAACAgECBAMFBgQHAAAAAAABAgMEBQAGBxESQSExMhATUVKBCBQiYWKhFiNxkTNCU2RygrH/2gAIAQEAAT8A0chavSvWwcaFUYrJdlBMSkeYjA9Z/bW5b209pY98xvncBFf57UrKrP8ACOGL1H8gCdRcfOB8txaopTojeU5p8o9Uq+OuVUv7XzrLE4DIYpvvNduY+Vif2I1Vyk0NiPH5eBYLD+EUqEmCc/BSfJv0n2ZB5MjajwlZ2RCnvbkinkViJ5CMH5n/APNdNajV5L0Q14IyflREUeJ1vDP53jTu65l72QMOMWZ4MbW/yQwBuw+Yj1HW3OAEF1lntZ50iHNRGkHiSe/MtrbEF3ghuPEWkyktvbt2daeQRx4oH8EfkPk1PTr5CrLVtRBom5fkQR3B7EdjrD2Z1exibrdVury/mf6sLeiT+vY6wRV69rJv671mSX4n3anoRfoo1l6pv4rKUAwQ2ak8AY+QMiFef76x2VbacmNrvjnnmjAMiGRU5OW9IB8WOtucRXk2ra3FiMK9panISQGTpCv+ZAJ1ZvZjiJgbr28VBVimjjmj6RYVo2V/DwljQN3BI1Gysqup5hgCNZ2VcbZx2Z7Rl683LzaORSw/syjW3HUYHFfEVkB9m7sNitqby3LVzlFmkhlkmrFVKO6MSY+nXBvN0Zq+YoLQsixLKr9DxosBHkSCxAIXvrFTRzyDCrSjhnM6x9KgCFwT6l5dtIOlFX4Aa3uhG3bCjxYyxfU9WsEfu5v4lvBqlhygPeGY9aH9yPZ9rHEQ0M5tvOo/4sjVnqSoP9uQQw+kuuFMAd0DW4pK5J61lkYsOf8A28DrYaU23dFVqoohgWWdlTyDEcv7nnz9mShTIZGhiTzaNFe1Z5dlAKIPqTrK1bEU8GYx8ZezApSWIec8BPMqP1DzXXEn7Ue2dlT2sNisLfyGZi7TxmrWT+rP+JtY7c03GVty/wAVSKcnNcjsQyJ4CCLoEaJEOypy1tjgruGnuypiZcpXkSWMWVevZVHeH5mTnzGt75ylwWweJkw5jmzlu5FyD94IiGm+jenWy+NG1N60m+4CxHlo4laTGshMhZjyHQw8GBOsZTmrJNaukNftMJJyPJeyxj9KD2cReDu0OJNUnJVBDdH+Hai/C6nW2+AWe4ZbrOTe3VvYKeKSByT0ypzIKkL31tfZ+8It62tx5a37h6+T+/0pY5FKycj0CAgEkRmPw1ujg/n+Ke7XzuRvpTwcaJBVjRg0vuk8T/xJOtmcPtu7EpJVw9VRL0/zJ28XY+z/xAAiEQACAQMEAgMAAAAAAAAAAAABAgMABBEQEhNRISIFQYH/2gAIAQIBAT8AqW/hjk4y/t1ioJ0nTemtyA0pYREOjeT3XxjFufxhcg/ut5aMw5Ez7H6Gas7ZraHa4wzHcdVYjaOjmiSTk6f/xAAiEQACAQIGAwEAAAAAAAAAAAABAgMEEQAFEBITISJBUZH/2gAIAQMBAT8AxFltRJGsvH4H3fFTTvTPsf2LjWlBEChp1aNk8V+YzdVUwDddrH81y6t4xxkjpSLsbdYr6hamfehuoULr91//2Q==' },
-    { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3, ParentID: 1, Resources: [3], EmailID: 'MargaretBuchanan@gmail.com', ResourcesImage: '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' },
-    { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 2, Predecessor: '2', Progress: 30, ParentID: 1, Resources: [4], EmailID: 'FullerKing@gmail.com', ResourcesImage: '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' },
-    { TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4', Resources: [1], EmailID: 'MartinTamer@gmail.com', ResourcesImage: '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' },
-    { TaskID: 6, TaskName: 'Market research', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-	{ TaskID: 7, TaskName: 'Demand analysis', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentID: 6},
-	{ TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', Progress: 30, ParentID: 7, Resources: [5], EmailID: 'DavolioFuller@gmail.com', ResourcesImage: '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' },
-    { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', ParentID: 7, Resources: [6], EmailID: 'VanJack@gmail.com', ResourcesImage: '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' },
-    { TaskID: 10, TaskName: 'Competitor analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '7, 8', Progress: 30, ParentID: 6, Resources: [4], EmailID: 'FullerKing@gmail.com', ResourcesImage: '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' },
-    { TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '9', ParentID: 6, Resources: [8], EmailID: 'JackDavolio@gmail.com', ResourcesImage: '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' },
+const data = [
+    {
+        TaskID: 1,
+        TaskName: 'Product concept',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        EmailId: 'MartinTamer@gmail.com',
+    },
+    {
+        TaskID: 2,
+        TaskName: 'Defining the product and its usage',
+        StartDate: new Date('04/02/2019'),
+        Duration: 3,
+        ParentID: 1,
+        Progress: 30,
+        resources: [2],
+        EmailId: 'RoseFuller@gmail.com',
+        resourcesImage:
+            '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',
+    },
+    {
+        TaskID: 3,
+        TaskName: 'Defining target audience',
+        StartDate: new Date('04/02/2019'),
+        Duration: 3,
+        ParentID: 1,
+        resources: [3],
+        EmailId: 'MargaretBuchanan@gmail.com',
+        resourcesImage:
+            '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',
+    },
+    {
+        TaskID: 4,
+        TaskName: 'Prepare product sketch and notes',
+        StartDate: new Date('04/02/2019'),
+        Duration: 2,
+        ParentID: 1,
+        Predecessor: '2',
+        Progress: 30,
+        resources: [4],
+        EmailId: 'FullerKing@gmail.com',
+        resourcesImage:
+            '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',
+    },
+    {
+        TaskID: 5,
+        TaskName: 'Concept approval',
+        StartDate: new Date('04/02/2019'),
+        Duration: 0,
+        Predecessor: '3,4',
+        resources: [5],
+        EmailId: 'Davoliofuller@gmail.com',
+        resourcesImage:
+            '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',
+    },
+    {
+        TaskID: 6,
+        TaskName: 'Market research',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        EmailId: 'Vanjack@gmail.com',
+    },
+    {
+        TaskID: 7,
+        TaskName: 'Demand analysis',
+        StartDate: new Date('04/04/2019'),
+        EndDate: new Date('04/21/2019'),
+        EmailId: 'RoseFuller@gmail.com',
+    },
+    {
+        TaskID: 8,
+        TaskName: 'Customer strength',
+        StartDate: new Date('04/04/2019'),
+        Duration: 4,
+        Predecessor: '5',
+        Progress: 30,
+        resources: [7],
+        EmailId: 'Fullerbuchanan@gmail.com',
+        resourcesImage:
+            '/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAAQEBAQEBAQEBAQGBgUGBggHBwcHCAwJCQkJCQwTDA4MDA4MExEUEA8QFBEeFxUVFx4iHRsdIiolJSo0MjRERFwBBAQEBAQEBAQEBAYGBQYGCAcHBwcIDAkJCQkJDBMMDgwMDgwTERQQDxAUER4XFRUXHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAdAAACAgIDAQAAAAAAAAAAAAAEBwUIAwYAAQkC/9oACAEBAAAAAL/RKXSL6ch0UrvNI3nqPuPwl9aaldWm688LUdtYd922TOpawDHviJKrZ2W4J00JAp+yjGkf/8QAGgEAAgMBAQAAAAAAAAAAAAAAAAMBBAUCBv/aAAgBAhAAAAAR2yPO2tkxrV8S+P/EABkBAAIDAQAAAAAAAAAAAAAAAAAFAQQGA//aAAgBAxAAAACb9ev01i5AbFIpGC8//8QANBAAAgIBAgMFBgUEAwAAAAAAAQIDBAUABgcREhMhIjFBFDJRYnKBCBAVQqFTYXGRI3Ox/9oACAEBAAE/ANHIW70skGFRCqErJdlHOFCPMRj95/jXEHi/w32HA4zmbl3BmA5Q42pYDujjz60jISID5tVvxT7auTOIOFkIh9Ge6Fcj7Ra4ecUtmb96Ku28xaw+Y6S36bccOj/QGJDj6DqrlJobEePy8CwWH7opUJME5+Ck+TfKfyyDyZG1HhKzsiFO1uSKeRWInkIwfRn/APNceN0vsvhhlxiXNa1cVMZS7LwlDP3Mw/uqAnUXC3dt5Ip6dSSwHTqPQpY6j2LuvFiT23b2TLwqSI46jv8AfuGrWA3ttaLG7nt46xTAkVon6ws0bDxo3h5sp/zrhruJeJfDbb2dycQ7W5Ay2QP68DmIuvwJK8xrD2Z1exibrdVury/5P6sLe5J/n0OsB0tWs5Jh47tmSQep7NT0IPsBr8RWIN/bG1JSoMdbdGMef/rdyh1w8kQ0olji7h5nUzyPA6dIOuL2MsWtp5/2eEuUgEpUeYER6iRr8LmThv8ACbFQiXvp2bUJT4EuX1nZVxtnHZn0jL15uXm0cilh/plGtuOowOK+IrIDrfmHOc2jk6ar41aGwn1VpVmH8rrAVt9YaGfLpmIVhWszmvKhkhceagEKvTrN4e/uGtUavlLtVexR2SvMU5u68+Z5FQwHwOptvLj6EyT2J7HbR9EomIIAI5eQ7tcFtvRbY2ZQxUUaDs1DSunk8rgF21vdCNu2FHexli+56tYI+zm/iW7mqWHKA+sMx60P8kamj7WGaMnkHUr/ALGs5kbuJ2xkaMkDA17TVJH8kVonAKuf2gj11j8hkMpiqlubHSU4Y4lQ8uouXA5c1Ze4aFu1Yov7eJEkUMCsg6SeXkdbf6IsFiliUL1VYj3D4oNZKFMhkaGJPNo0V7Vnl6KAUQfcnWVq2Ip4Mxj4y9mBSksQ854CeZUfMPNdVrte/VSzVk643+xBHmCPQjXGixgsPuPEVhN2VjORTpbjA8DCLpEc31gnlra/tQq169mSvJFCp7Hkh6vCeRKk+Q1JZTK5T9KpsJrTP1OqnmEjT1b4AE6xOQgweMhx83azyIAkCjxPMxPPpX7n7DWMpzVkmtXSGv2mEk5HkvosY+VB+VvDv28l7FWjUuP7/hDRS/Wnx/uNcSeHlzcYpWc7EDLUNns545AwmE/SSPRkKlfDqngt/i3Xw0WYWtiWcq11wkk0UfyovIsx1szaX6NjWqYHHgCWTnNkrsoeawR++QLzJPwXuUaxuGgx7e1TObF4ry7Vx7oPogHuj8v/xAAjEQACAgEDAwUAAAAAAAAAAAABAwIRABAhMQQFYRIyQVFi/9oACAECAQE/AOMHUpn7WA4tsWi4SBHjQ7g4ulxkv1A2Tx5zthK5MT+r1mmKmygRyLGdCqQLZgGtt9Wwi1sJz5oDL+BsPoaf/8QAIhEAAgEDAwUBAAAAAAAAAAAAAQMCAAQREBIhBRMiMWFi/9oACAEDAQE/AIgyIiPZo2D1kdxUqeiSCBIEfDok7WrP6FXEJMYGY2j7XVYhioOzyAI6puZXNpBwwDE811RsT2oGXkSTt+a2l25FuxK8beSMjkZo5lIzkSZH2T70/9k=',
+    }
 ];
 
-var editingResources = [
-    { ResourceId: 1, ResourceName: 'Martin Tamer' },
-    { ResourceId: 2, ResourceName: 'Rose Fuller' },
-    { ResourceId: 3, ResourceName: 'Margaret Buchanan' },
-    { ResourceId: 4, ResourceName: 'Fuller King' },
-    { ResourceId: 5, ResourceName: 'Davolio Fuller' },
-    { ResourceId: 6, ResourceName: 'Van Jack' },
-    { ResourceId: 7, ResourceName: 'Fuller Buchanan' },
-    { ResourceId: 8, ResourceName: 'Jack Davolio' },
-    { ResourceId: 9, ResourceName: 'Tamer Vinet' },
-    { ResourceId: 10, ResourceName: 'Vinet Fuller' },
-    { ResourceId: 11, ResourceName: 'Bergs Anton' },
-    { ResourceId: 12, ResourceName: 'Construction Supervisor' }
+const resources = [
+    { resourceId: 1, resourceName: 'Martin Tamer' },
+    { resourceId: 2, resourceName: 'Rose Fuller' },
+    { resourceId: 3, resourceName: 'Margaret Buchanan' },
+    { resourceId: 4, resourceName: 'Fuller King' },
+    { resourceId: 5, resourceName: 'Davolio Fuller' },
+    { resourceId: 7, resourceName: 'Fuller Buchanan' }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/index.js
index f576ed8c5..b54ab93f9 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/index.js
@@ -1,54 +1,49 @@
-var clickHandler = function(args){
-    if (args.item.id === 'GanttExport_pdfexport') {
-         var exportProperties = {
-             enableFooter: false
-         };
-         ganttChart.pdfExport(exportProperties);
+var ganttChart = new ej.gantt.Gantt({
+    id: 'ganttDefault',
+    dataSource: data,
+    height: '430px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        resourceInfo: 'resources',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    toolbar: ['PdfExport'],
+    allowPdfExport: true,
+    allowResizing: true,
+    splitterSettings: { columnIndex: 4 },
+    resources: resources,
+    resourceFields: { id: 'resourceId', name: 'resourceName' },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'resources', headerText: 'Resources', width: 250 },
+        { field: 'EmailId', headerText: 'Email ID', width: 150 }
+    ],
+    toolbarClick: function (args) {
+        if (args.item.id === 'GanttExport_pdfexport') {
+            ganttChart.pdfExport({ fileName: 'new.pdf' });
+        }
+    },
+    pdfQueryCellInfo: function (args) {
+        if (args.column && args.column.headerText === 'Resources') {
+            args.image = {
+                height: 40,
+                width: 40,
+                base64: args.data && args.data.taskData ? args.data.taskData.resourcesImage : null
+            };
+        }
+        if (args.column && args.column.headerText === 'Email ID') {
+            var email = args.data && args.data.taskData ? args.data.taskData.EmailId : '';
+            args.hyperLink = {
+                target: 'mailto:' + email,
+                displayText: email
+            };
+        }
     }
- };
- function pdfQueryCellInfo(args) {
-     if (args.column.headerText === 'Resources') 
-     {
-         args.image = { height: 40, width: 40, base64: args.data.taskData.ResourcesImage };
-     }
-     if (args.column.headerText === 'Email ID') {
-         args.hyperLink = {
-             target: 'mailto:' + args.data.taskData.EmailID,
-             displayText: args.data.taskData.EmailID
-         };
-     }
- }
- 
- var ganttChart = new ej.gantt.Gantt({
-     dataSource: GanttData,
-     height: '450px',
-     taskFields: {
-         id: 'TaskID',
-         name: 'TaskName',
-         startDate: 'StartDate',
-         endDate: 'EndDate',
-         duration: 'Duration',
-         progress: 'Progress',
-         resourceInfo: 'Resources',
-         dependency: 'Predecessor',
-         parentID: 'ParentID',
-     },
-     allowPdfExport: true,
-     columns: [
-         { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left' },
-         { field: 'TaskName', headerText: 'Task Name', width: '250' },
-         { field: 'Resources', headerText: 'Resources', width: '250', template: '#columnTemplate' },
-         {field: 'EmailID', headerText: 'Email ID', template: '#template2', width: 180 },
-     ],
-     pdfQueryCellInfo: pdfQueryCellInfo,
-     toolbar: ['PdfExport'],
-     toolbarClick: clickHandler,
-     resources: editingResources,
-         resourceFields: {
-             id: 'ResourceId',
-             name: 'ResourceName'
-         },
-         projectStartDate: new Date('03/24/2019'),
-         projectEndDate: new Date('07/06/2019')
- });
- ganttChart.appendTo('#GanttExport');
\ No newline at end of file
+});
+
+ganttChart.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/index.ts
index 9ef507139..db104a2af 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-column-template-cs1/index.ts
@@ -1,63 +1,50 @@
-import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties,PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-gantt';
-import { GanttData,editingResources } from './datasource.ts';
-import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
+import { Gantt, Toolbar, PdfExport, Selection, PdfQueryCellInfoEventArgs, ColumnModel, PdfExportProperties } from '@syncfusion/ej2-gantt';
+import { data, resources } from './datasource.ts';
 
 Gantt.Inject(Toolbar, PdfExport, Selection);
 
-let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
-    if (args.item.id === 'GanttExport_pdfexport') {
-        let exportProperties: PdfExportProperties = {
-            enableFooter: false
-        };
-        gantt.pdfExport(exportProperties);
-    }
-};
-function pdfQueryCellInfo(args: PdfQueryCellInfoEventArgs): any {
-    if (args.column.headerText === 'Resources') {
-        {
-            args.image = { height:40,width:40, base64: (args as any).data.taskData.ResourcesImage };
-        }
-    }
-    console.log(args.column.headerText);
-    if (args.column.headerText === 'Email ID') {
-        console.log(args.data.taskData);
-        args.hyperLink = {
-            target: 'mailto:' + (args as any).data.taskData.EmailID,
-            displayText: (args as any).data.taskData.EmailID
-        };
-    }
-}
-
 let gantt: Gantt = new Gantt({
-    dataSource: GanttData,
-    height: '450px',
+    id: 'ganttDefault',
+    dataSource: data,
+    height: '430px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
+        resourceInfo: 'resources',
         startDate: 'StartDate',
-        endDate: 'EndDate',
         duration: 'Duration',
         progress: 'Progress',
-        resourceInfo: 'Resources',
-        dependency: 'Predecessor',
-        parentID: 'ParentID',
+        parentID: 'ParentID'
     },
+    toolbar: ['PdfExport'],
+    allowPdfExport: true,
+    allowResizing: true,
+    splitterSettings: { columnIndex: 4 },
+    resources: resources,
+    resourceFields: { id: 'resourceId', name: 'resourceName' },
     columns: [
-        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left' },
-        { field: 'TaskName', headerText: 'Task Name', width: '250' },
-        { field: 'Resources', headerText: 'Resources', width: '250', template: '#columnTemplate' },
-        {field: 'EmailID', headerText: 'Email ID', template: '#template2', width: 180 },
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'resources', headerText: 'Resources', width: 250 },
+        { field: 'EmailId', headerText: 'Email ID', width: 150 }
     ],
-    pdfQueryCellInfo: pdfQueryCellInfo,
-    allowPdfExport: true,
-    toolbar: ['PdfExport'],
-    toolbarClick: clickHandler,
-    resources: editingResources,
-    resourceFields: {
-        id: 'ResourceId',
-        name: 'ResourceName'
+    toolbarClick: (args: any) => {
+        if (args.item.id === 'GanttExport_pdfexport') {
+            const exportProps: PdfExportProperties = { fileName: 'new.pdf' };
+            gantt.pdfExport(exportProps);
+        }
     },
-    projectStartDate: new Date('03/24/2019'),
-    projectEndDate: new Date('07/06/2019')
+    pdfQueryCellInfo: (args: PdfQueryCellInfoEventArgs) => {
+        const col = args.column as ColumnModel;
+        if (col && col.headerText === 'Resources') {
+            const base64: string = (args.data as any).taskData.resourcesImage;
+            (args as any).image = { height: 40, width: 40, base64: base64 };
+        }
+        if (col && col.headerText === 'Email ID') {
+            const email: string = (args.data as any).taskData.EmailId;
+            (args as any).hyperLink = { target: 'mailto:' + email, displayText: email };
+        }
+    }
 });
+
 gantt.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs1/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs1/index.js
index b3a5b56d9..3ce83668a 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs1/index.js
@@ -1,10 +1,10 @@
-var clickHandler = function(args){
-   if (args.item.id === 'GanttExport_pdfexport') {
+var clickHandler = function (args) {
+    if (args.item.id === 'GanttExport_pdfexport') {
         var exportProperties = {
-           fileName:"new.pdf"
+            fileName: "new.pdf"
         };
         ganttChart.pdfExport(exportProperties);
-   }
+    }
 };
 
 var ganttChart = new ej.gantt.Gantt({
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs1/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-cs1/index.ts
index 0952a0f4f..fdd179bac 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs1/index.ts
@@ -1,13 +1,13 @@
 import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
-import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
+import { ClickEventArgs } from '@syncfusion/ej2-navigations';
 
 Gantt.Inject(Toolbar, PdfExport, Selection);
 
 let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
     if (args.item.id === 'GanttExport_pdfexport') {
         let exportProperties: PdfExportProperties = {
-           fileName:"new.pdf"
+            fileName: "new.pdf"
         };
         gantt.pdfExport(exportProperties);
     }
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs1/js/index.html
index cb92eda42..8c6fe30d5 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs1/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-          <div id="GanttExport"></div>
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="GanttExport"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs1/ts/index.html
index 47821f5a9..5c521fe8e 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs1/ts/index.html
@@ -8,17 +8,17 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-            <div id='GanttExport'></div>        
-        </div>   
- </script>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='GanttExport'></div>
+    </div>
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs10/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs10/index.js
index 551390ed2..20a1d578b 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs10/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs10/index.js
@@ -1,16 +1,7 @@
-var clickHandler = function(args){
-   if (args.item.id === 'GanttExport_pdfexport') {
-     ganttChart.pdfExport();
-   }
-};
-
-var pdfQueryTimelineCellInfo = function(args){
-    args.timelineCell.backgroundColor = new ej.pdfexport.PdfColor(240, 248, 255);
-};
-
 var ganttChart = new ej.gantt.Gantt({
+    id: 'ganttDefault',
+    height: '430px',
     dataSource: GanttData,
-    height: '450px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -19,9 +10,24 @@ var ganttChart = new ej.gantt.Gantt({
         progress: 'Progress',
         parentID: 'ParentID'
     },
+    treeColumnIndex: 1,
     allowPdfExport: true,
     toolbar: ['PdfExport'],
-    toolbarClick: clickHandler,
-    pdfQueryTimelineCellInfo: pdfQueryTimelineCellInfo
+    toolbarClick: function (args) {
+        if (args.item.id === 'GanttExport_pdfexport') {
+            ganttChart.pdfExport();
+        }
+    },
+    pdfQueryTimelineCellInfo: function (args) {
+        args.timelineCell.backgroundColor = new ej.pdfexport.PdfColor(240, 248, 255);
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150, visible: false },
+        { field: 'StartDate', headerText: 'StartDate', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
 });
+
 ganttChart.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs10/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-cs10/index.ts
index ec4395fe8..c6744b061 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs10/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs10/index.ts
@@ -1,23 +1,13 @@
-import { Gantt, Toolbar, PdfExport, Selection, PdfQueryTimelineCellInfoEventArgs } from '@syncfusion/ej2-gantt';
-import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
+import { Gantt, Toolbar, PdfExport, Selection, TaskFieldsModel, ToolbarClickEventArgs, PdfQueryTimelineCellInfoEventArgs } from '@syncfusion/ej2-gantt';
 import { PdfColor } from '@syncfusion/ej2-pdf-export';
 import { GanttData } from './datasource.ts';
 
 Gantt.Inject(Toolbar, PdfExport, Selection);
 
-let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
-    if (args.item.id === 'GanttExport_pdfexport') {
-        gantt.pdfExport();
-    }
-};
-
-let pdfQueryTimelineCellInfo: EmitType<PdfQueryTimelineCellInfoEventArgs> = (args: PdfQueryTimelineCellInfoEventArgs) => {
-    args.timelineCell.backgroundColor= new PdfColor(240, 248, 255);
-};
-
 let gantt: Gantt = new Gantt({
+    id: 'ganttDefault',
+    height: '430px',
     dataSource: GanttData,
-    height: '450px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -25,10 +15,25 @@ let gantt: Gantt = new Gantt({
         duration: 'Duration',
         progress: 'Progress',
         parentID: 'ParentID'
-    },
+    } as TaskFieldsModel,
+    treeColumnIndex: 1,
     allowPdfExport: true,
     toolbar: ['PdfExport'],
-    toolbarClick: clickHandler,
-    pdfQueryTimelineCellInfo: pdfQueryTimelineCellInfo
+    toolbarClick: (args: ToolbarClickEventArgs) => {
+        if (args.item.id === 'GanttExport_pdfexport') {
+            gantt.pdfExport();
+        }
+    },
+    pdfQueryTimelineCellInfo: (args: PdfQueryTimelineCellInfoEventArgs) => {
+        args.timelineCell.backgroundColor = new PdfColor(240, 248, 255);
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150, visible: false },
+        { field: 'StartDate', headerText: 'StartDate', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
 });
+
 gantt.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs10/js/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs10/js/index.html
index cb92eda42..8c6fe30d5 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs10/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs10/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-          <div id="GanttExport"></div>
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="GanttExport"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs10/systemjs.config.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs10/systemjs.config.js
index f91edce14..8e1726657 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs10/systemjs.config.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs10/systemjs.config.js
@@ -21,25 +21,25 @@ System.config({
         "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
         "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
         "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
-		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
-        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
         "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
         "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
         "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
         "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
         "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
-        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
-		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
         "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
         "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
-		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
         "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
         "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
         "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
         "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
         "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
         "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
-        
+
     }
 });
 
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs10/ts/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs10/ts/index.html
index 47821f5a9..5c521fe8e 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs10/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs10/ts/index.html
@@ -8,17 +8,17 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-            <div id='GanttExport'></div>        
-        </div>   
- </script>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='GanttExport'></div>
+    </div>
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs11/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs11/index.js
index b0a0d3822..a5a3bf491 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs11/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs11/index.js
@@ -1,19 +1,7 @@
-var clickHandler = function(args){
-   if (args.item.id === 'GanttExport_pdfexport') {
-     ganttChart.pdfExport();
-   }
-};
-
-var pdfQueryTaskbarInfo =  function(args){
-   if(args.data.Progress < 50 && !args.data.hasChildRecords) {
-        args.taskbar.progressColor = new ej.pdfexport.PdfColor(205, 92, 92);
-        args.taskbar.taskColor =  args.taskbar.taskBorderColor = new ej.pdfexport.PdfColor(240, 128, 128);
-    }
-};
-
 var ganttChart = new ej.gantt.Gantt({
+    id: 'ganttDefault',
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -22,16 +10,29 @@ var ganttChart = new ej.gantt.Gantt({
         progress: 'Progress',
         parentID: 'ParentID'
     },
-    columns: [
-        { field: 'TaskID'},
-        { field: 'TaskName'},
-        { field: 'StartDate'},
-        { field: 'Duration', visible: false},
-        { field: 'Progress'}
-    ],
+    treeColumnIndex: 1,
     allowPdfExport: true,
     toolbar: ['PdfExport'],
-    toolbarClick: clickHandler,
-    pdfQueryTaskbarInfo: pdfQueryTaskbarInfo
+    toolbarClick: function (args) {
+        if (args.item.id === 'GanttExport_pdfexport') {
+            ganttChart.pdfExport();
+        }
+    },
+    pdfQueryTaskbarInfo: function (args) {
+        var d = args.data;
+        if (d.Progress < 50 && !d.hasChildRecords) {
+            var bar = args.taskbar;
+            bar.progressColor = new ej.pdfexport.PdfColor(205, 92, 92);
+            bar.taskColor = bar.taskBorderColor = new ej.pdfexport.PdfColor(240, 128, 128);
+        }
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150, visible: false },
+        { field: 'StartDate', headerText: 'StartDate', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
 });
+
 ganttChart.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs11/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-cs11/index.ts
index 15110c198..eb16d644f 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs11/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs11/index.ts
@@ -1,26 +1,13 @@
-import { Gantt, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-gantt';
+import { Gantt, Toolbar, PdfExport, Selection, ToolbarClickEventArgs, PdfQueryTaskbarInfoEventArgs } from '@syncfusion/ej2-gantt';
 import { PdfColor } from '@syncfusion/ej2-pdf-export';
-import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
 import { GanttData } from './datasource.ts';
 
 Gantt.Inject(Toolbar, PdfExport, Selection);
 
-let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
-    if (args.item.id === 'GanttExport_pdfexport') {
-        gantt.pdfExport();
-    }
-};
-
-let pdfQueryTaskbarInfo: EmitType<Object> = (args: Object) => {
-    if(args.data.Progress < 50 && !args.data.hasChildRecords) {
-        args.taskbar.progressColor = new PdfColor(205, 92, 92);
-        args.taskbar.taskColor =  args.taskbar.taskBorderColor = new PdfColor(240, 128, 128);
-    }
-};
-
 let gantt: Gantt = new Gantt({
+    id: 'ganttDefault',
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -29,16 +16,29 @@ let gantt: Gantt = new Gantt({
         progress: 'Progress',
         parentID: 'ParentID'
     },
-    columns: [
-        { field: 'TaskID'},
-        { field: 'TaskName', visible: false},
-        { field: 'StartDate'},
-        { field: 'Duration'},
-        { field: 'Progress'}
-    ],
+    treeColumnIndex: 1,
     allowPdfExport: true,
     toolbar: ['PdfExport'],
-    toolbarClick: clickHandler,
-    pdfQueryTaskbarInfo: pdfQueryTaskbarInfo
+    toolbarClick: (args: ToolbarClickEventArgs) => {
+        if (args.item.id === 'GanttExport_pdfexport') {
+            gantt.pdfExport();
+        }
+    },
+    pdfQueryTaskbarInfo: (args: PdfQueryTaskbarInfoEventArgs) => {
+        const d: any = args.data;
+        if (d.Progress < 50 && !d.hasChildRecords) {
+            const bar = args.taskbar;
+            bar.progressColor = new PdfColor(205, 92, 92);
+            bar.taskColor = bar.taskBorderColor = new PdfColor(240, 128, 128);
+        }
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150, visible: false },
+        { field: 'StartDate', headerText: 'StartDate', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
 });
+
 gantt.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs11/js/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs11/js/index.html
index cb92eda42..8c6fe30d5 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs11/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs11/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-          <div id="GanttExport"></div>
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="GanttExport"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs11/ts/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs11/ts/index.html
index 47821f5a9..5c521fe8e 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs11/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs11/ts/index.html
@@ -8,17 +8,17 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-            <div id='GanttExport'></div>        
-        </div>   
- </script>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='GanttExport'></div>
+    </div>
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs12/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs12/index.js
index 1b033f6ef..d402670c7 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs12/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs12/index.js
@@ -1,10 +1,10 @@
-var clickHandler = function(args){
-   if (args.item.id === 'GanttExport_pdfexport') {
+var clickHandler = function (args) {
+    if (args.item.id === 'GanttExport_pdfexport') {
         var exportProperties = {
-           theme:"Fabric"
+            theme: "Fabric"
         };
         ganttChart.pdfExport(exportProperties);
-   }
+    }
 };
 
 var ganttChart = new ej.gantt.Gantt({
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs12/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-cs12/index.ts
index 11521da94..3cee0268d 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs12/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs12/index.ts
@@ -7,7 +7,7 @@ Gantt.Inject(Toolbar, PdfExport, Selection);
 let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
     if (args.item.id === 'GanttExport_pdfexport') {
         let exportProperties: PdfExportProperties = {
-           theme:"Fabric"
+            theme: "Fabric"
         };
         gantt.pdfExport(exportProperties);
     }
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs13/datasource.ts b/ej2-javascript/code-snippet/gantt/pdf-export-cs13/datasource.ts
index 6d5a0da32..0fe666bb2 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs13/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs13/datasource.ts
@@ -1,10 +1,10 @@
-export let GanttData: Object[]  = [
+export let GanttData: Object[] = [
     { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
     { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 10, ParentID: 1 },
     { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
     { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: "6SS", Progress: 70, ParentID: 5 }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs13/es5-datasource.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs13/es5-datasource.js
index 0ee8ab55d..3bc0410ca 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs13/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs13/es5-datasource.js
@@ -2,9 +2,9 @@ var GanttData = [
     { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
     { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 10, ParentID: 1 },
     { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
     { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: "6SS", Progress: 70, ParentID: 5 }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs13/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs13/index.js
index d47efb93d..81a1dd1a0 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs13/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs13/index.js
@@ -1,111 +1,105 @@
-var clickHandler = function(args){
-   if (args.item.id === 'GanttExport_pdfexport') {
-    const stringFormat = new ej.pdfexport.PdfStringFormat();
-      stringFormat.alignment = ej.pdfexport.PdfTextAlignment.Center;
-
-      const vertical = new ej.pdfexport.PdfStringFormat();
-      vertical.alignment = ej.pdfexport.PdfTextAlignment.Center;
-
-      const penColor = new ej.pdfexport.PdfColor(105, 105, 105);
-      const penWidth = 1;
-      const pen = new ej.pdfexport.PdfPen(penColor, penWidth);
-      pen.dashStyle = ej.pdfexport.PdfDashStyle.Dash; 
-
-      const borderWidth = 1;
-      const borderColor = new ej.pdfexport.PdfColor(192, 192, 192); 
-      let pdfpen = new ej.pdfexport.PdfPen(borderColor, borderWidth);
-      let pdfborders = new ej.pdfexport.PdfBorders();
-      pdfborders.all = pdfpen;
-        var exportProperties = {
-            ganttStyle: {
-                fontFamily: 1,
-                columnHeader: {
-                    backgroundColor: new ej.pdfexport.PdfColor(179, 219, 255)
-                },
-                taskbar: {
-                   taskColor: new ej.pdfexport.PdfColor(240, 128, 128),
-                   taskBorderColor: new ej.pdfexport.PdfColor(240, 128, 128),
-                   progressColor: new ej.pdfexport.PdfColor(205, 92, 92),
-                },
-                connectorLineColor: new ej.pdfexport.PdfColor(128,0,0),
-                footer: {
-                    backgroundColor: new ej.pdfexport.PdfColor(205, 92, 92)
-                },
-                timeline: {
-                    backgroundColor: new ej.pdfexport.PdfColor(179, 219, 255),
-                    fontStyle: 1
-                },
-                label: {
-                    fontColor: new ej.pdfexport.PdfColor(128, 0, 0),
-                },
-                cell: {
-                    backgroundColor: new ej.pdfexport.PdfColor(240, 248, 255),
-                    fontColor: new ej.pdfexport.PdfColor(0, 0, 0),
-                    borderColor:new ej.pdfexport.PdfColor(179, 219, 255),
-                }, 
-                eventMarker: {
-                    label: {
-                      backgroundColor: new ej.pdfexport.PdfColor(255, 239, 213), 
-                      fontFamily: ej.pdfexport.PdfFontFamily.TimesRoman,
-                      fontColor: new ej.pdfexport.PdfColor(139, 69, 19), 
-                      fontSize: 9,
-                      format: stringFormat,
-                      fontStyle: ej.pdfexport.PdfFontStyle.Bold,
-                      borderColor: new ej.pdfexport.PdfColor(160, 82, 45), 
-                      borders: pdfborders,
-                    },
-                    lineStyle: pen,
-                  },
-                  holiday: {
-                    fontFamily: ej.pdfexport.PdfFontFamily.TimesRoman,
-                    fontSize: 10,
-                    fontStyle: ej.pdfexport.PdfFontStyle.Bold,
-                    borderColor: new ej.pdfexport.PdfColor(211, 211, 211), 
-                    backgroundColor: new ej.pdfexport.PdfColor(255, 248, 220), 
-                    fontColor: new ej.pdfexport.PdfColor(105, 105, 105),
-                    format: vertical,
-                    borders: pdfborders,
-                  }, 
-            }    
-        };
-        ganttChart.pdfExport(exportProperties);
-   }
-};
-
 var ganttChart = new ej.gantt.Gantt({
+    id: 'ganttDefault',
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
         startDate: 'StartDate',
+        endDate: 'EndDate',
         duration: 'Duration',
+        predecessor: 'Predecessor',
         progress: 'Progress',
         parentID: 'ParentID'
     },
+    treeColumnIndex: 1,
     allowPdfExport: true,
     toolbar: ['PdfExport'],
-    toolbarClick: clickHandler,
     eventMarkers: [
-        {
-            day: '04/10/2019',
-            cssClass: 'e-custom-event-marker',
-            label: 'Project approval and kick-off'
-        }
+        { day: '04/10/2019', cssClass: 'e-custom-event-marker', label: 'Project approval and kick-off' }
+    ],
+    holidays: [
+        { from: '04/04/2019', to: '04/04/2019', label: ' Public holidays', cssClass: 'e-custom-holiday' },
+        { from: '04/12/2019', to: '04/12/2019', label: ' Public holiday', cssClass: 'e-custom-holiday' }
     ],
-    holidays:  [{
-        from: "04/04/2019",
-        to: "04/04/2019",
-        label: " Public holidays",
-        cssClass: "e-custom-holiday"
-    
+    toolbarClick: function (args) {
+        if (args.item.id === 'GanttExport_pdfexport') {
+
+            var stringFormat = new ej.pdfexport.PdfStringFormat();
+            stringFormat.alignment = ej.pdfexport.PdfTextAlignment.Center;
+
+            var vertical = new ej.pdfexport.PdfStringFormat();
+            vertical.alignment = ej.pdfexport.PdfTextAlignment.Center;
+
+            var pen = new ej.pdfexport.PdfPen(new ej.pdfexport.PdfColor(105, 105, 105), 1);
+            pen.dashStyle = ej.pdfexport.PdfDashStyle.Dash;
+
+            var borderPen = new ej.pdfexport.PdfPen(new ej.pdfexport.PdfColor(192, 192, 192), 1);
+            var borders = new ej.pdfexport.PdfBorders();
+            borders.all = borderPen;
+
+            ganttChart.pdfExport({
+                ganttStyle: {
+                    connectorLineColor: new ej.pdfexport.PdfColor(128, 0, 0),
+                    taskbar: {
+                        taskColor: new ej.pdfexport.PdfColor(240, 128, 128),
+                        taskBorderColor: new ej.pdfexport.PdfColor(255, 0, 0),
+                        progressColor: new ej.pdfexport.PdfColor(205, 92, 92)
+                    },
+                    columnHeader: {
+                        backgroundColor: new ej.pdfexport.PdfColor(179, 219, 255)
+                    },
+                    timeline: {
+                        backgroundColor: new ej.pdfexport.PdfColor(179, 219, 255),
+                        padding: new ej.pdfexport.PdfPaddings(5, 2, 0, 0)
+                    },
+                    footer: {
+                        backgroundColor: new ej.pdfexport.PdfColor(205, 92, 92)
+                    },
+                    label: {
+                        fontColor: new ej.pdfexport.PdfColor(128, 0, 0)
+                    },
+                    cell: {
+                        backgroundColor: new ej.pdfexport.PdfColor(240, 248, 255),
+                        fontColor: new ej.pdfexport.PdfColor(0, 0, 0),
+                        borderColor: new ej.pdfexport.PdfColor(179, 219, 255)
+                    },
+                    fontFamily: 1,
+                    eventMarker: {
+                        label: {
+                            backgroundColor: new ej.pdfexport.PdfColor(255, 239, 213),
+                            fontFamily: ej.pdfexport.PdfFontFamily.TimesRoman,
+                            fontColor: new ej.pdfexport.PdfColor(139, 69, 19),
+                            fontSize: 9,
+                            format: stringFormat,
+                            fontStyle: ej.pdfexport.PdfFontStyle.Bold,
+                            borderColor: new ej.pdfexport.PdfColor(160, 82, 45),
+                            borders: borders
+                        },
+                        lineStyle: pen
+                    },
+                    holiday: {
+                        fontFamily: ej.pdfexport.PdfFontFamily.TimesRoman,
+                        fontSize: 10,
+                        fontStyle: ej.pdfexport.PdfFontStyle.Bold,
+                        borderColor: new ej.pdfexport.PdfColor(211, 211, 211),
+                        backgroundColor: new ej.pdfexport.PdfColor(255, 248, 220),
+                        fontColor: new ej.pdfexport.PdfColor(105, 105, 105),
+                        format: vertical,
+                        borders: borders
+                    }
+                }
+            });
+        }
     },
-    {
-        from: "04/12/2019",
-        to: "04/12/2019",
-        label: " Public holiday",
-        cssClass: "e-custom-holiday"
-    
-    }],
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'EndDate', headerText: 'End Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
 });
+
 ganttChart.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs13/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-cs13/index.ts
index f1daea41b..8e480938f 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs13/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs13/index.ts
@@ -1,128 +1,130 @@
-import { Gantt, Toolbar, PdfExport, Selection,PdfBorders, PdfExportProperties, DayMarkers } from '@syncfusion/ej2-gantt';
-import { GanttData } from 'datasource.ts';
-import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
-import { PdfColor } from '@syncfusion/ej2-pdf-export';
-import { PdfPaddings } from '@syncfusion/ej2-gantt/src/export/pdf-base/pdf-borders';
-import {   PdfDashStyle, PdfFontFamily, PdfFontStyle, PdfPen, PdfStringFormat, PdfTextAlignment, PdfVerticalAlignment} from '@syncfusion/ej2-pdf-export';
+import {
+    Gantt,
+    Toolbar,
+    PdfExport,
+    Selection,
+    DayMarkers,
+    PdfExportProperties
+} from '@syncfusion/ej2-gantt';
+import {
+    PdfColor,
+    PdfDashStyle,
+    PdfPaddings,
+    PdfBorders,
+    PdfFontFamily,
+    PdfFontStyle,
+    PdfPen,
+    PdfStringFormat,
+    PdfTextAlignment
+} from '@syncfusion/ej2-pdf-export';
+import { GanttData } from './datasource.ts';
 
 Gantt.Inject(Toolbar, PdfExport, Selection, DayMarkers);
 
-let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
-    if (args.item.id === 'GanttExport_pdfexport') {
-        const stringFormat = new PdfStringFormat();
-      stringFormat.alignment = PdfTextAlignment.Center;
-
-      const vertical = new PdfStringFormat();
-      vertical.alignment = PdfTextAlignment.Center;
-
-      const penColor = new PdfColor(105, 105, 105);
-      const penWidth = 1;
-      const pen = new PdfPen(penColor, penWidth);
-      pen.dashStyle = PdfDashStyle.Dash; 
-
-      const borderWidth = 1;
-      const borderColor = new PdfColor(192, 192, 192); 
-      let pdfpen: PdfPen = new PdfPen(borderColor, borderWidth);
-      let pdfborders: PdfBorders = new PdfBorders();
-      pdfborders.all = pdfpen;
-        let exportProperties: PdfExportProperties = {
-            ganttStyle: {
-                fontFamily: 1,
-                columnHeader: {
-                    backgroundColor: new PdfColor(179, 219, 255)
-                },
-                taskbar: {
-                    taskColor: new PdfColor(240, 128, 128),
-                    taskBorderColor: new PdfColor(240, 128, 128),
-                    progressColor: new PdfColor(205, 92, 92)
-                },
-                connectorLineColor: new PdfColor(128, 0, 0),
-                footer: {
-                    backgroundColor: new PdfColor(205, 92, 92)
-                },
-                timeline: {
-                    backgroundColor: new PdfColor(179, 219, 255),
-                    fontStyle: 1
-                },
-                label: {
-                    fontColor: new PdfColor(128, 0, 0)
-                },
-                cell: {
-                    backgroundColor: new PdfColor(240, 248, 255),
-                    fontColor: new PdfColor(0, 0, 0),
-                    borderColor: new PdfColor(179, 219, 255)
-                },
-                eventMarker: {
-                    label: {
-                      backgroundColor: new PdfColor(255, 239, 213), 
-                      fontFamily: PdfFontFamily.TimesRoman,
-                      fontColor: new PdfColor(139, 69, 19), 
-                      fontSize: 9,
-                      format: stringFormat,
-                      fontStyle: PdfFontStyle.Bold,
-                      borderColor: new PdfColor(160, 82, 45), 
-                      borders: pdfborders,
-                    },
-                    lineStyle: pen,
-                  },
-                  holiday: {
-                    fontFamily: PdfFontFamily.TimesRoman,
-                    fontSize: 10,
-                    fontStyle: PdfFontStyle.Bold,
-                    borderColor: new PdfColor(211, 211, 211), 
-                    backgroundColor: new PdfColor(255, 248, 220), 
-                    fontColor: new PdfColor(105, 105, 105),
-                    format: vertical,
-                    borders: pdfborders,
-                  },  
-            }
-        };
-        gantt.pdfExport(exportProperties);
-    }
-};
-
 let gantt: Gantt = new Gantt({
+    id: 'ganttDefault',
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
         startDate: 'StartDate',
+        endDate: 'EndDate',
         duration: 'Duration',
+        predecessor: 'Predecessor',
         progress: 'Progress',
-        dependency: 'Predecessor',
         parentID: 'ParentID'
     },
-    columns: [
-        { field: 'TaskID'},
-        { field: 'TaskName', visible: false},
-        { field: 'StartDate'},
-        { field: 'Duration'},
-        { field: 'Progress'}
-    ],
+    treeColumnIndex: 1,
     allowPdfExport: true,
     toolbar: ['PdfExport'],
-    toolbarClick: clickHandler,
     eventMarkers: [
-        {
-            day: '04/10/2019',
-            cssClass: 'e-custom-event-marker',
-            label: 'Project approval and kick-off'
-        }
+        { day: '04/10/2019', cssClass: 'e-custom-event-marker', label: 'Project approval and kick-off' }
     ],
-    holidays:  [{
-        from: "04/04/2019",
-        to: "04/04/2019",
-        label: " Public holidays",
-        cssClass: "e-custom-holiday"
-    
+    holidays: [
+        { from: '04/04/2019', to: '04/04/2019', label: ' Public holidays', cssClass: 'e-custom-holiday' },
+        { from: '04/12/2019', to: '04/12/2019', label: ' Public holiday', cssClass: 'e-custom-holiday' }
+    ],
+    toolbarClick: (args: any) => {
+        if (args.item.id === 'GanttExport_pdfexport') {
+
+            const stringFormat = new PdfStringFormat();
+            stringFormat.alignment = PdfTextAlignment.Center;
+
+            const vertical = new PdfStringFormat();
+            vertical.alignment = PdfTextAlignment.Center;
+
+            const pen = new PdfPen(new PdfColor(105, 105, 105), 1);
+            pen.dashStyle = PdfDashStyle.Dash;
+
+            const borderPen = new PdfPen(new PdfColor(192, 192, 192), 1);
+            const borders = new PdfBorders();
+            borders.all = borderPen;
+
+            const exportProperties: PdfExportProperties = {
+                ganttStyle: {
+                    connectorLineColor: new PdfColor(128, 0, 0),
+                    taskbar: {
+                        taskColor: new PdfColor(240, 128, 128),
+                        taskBorderColor: new PdfColor(255, 0, 0),
+                        progressColor: new PdfColor(205, 92, 92)
+                    },
+                    columnHeader: {
+                        backgroundColor: new PdfColor(179, 219, 255)
+                    },
+                    timeline: {
+                        backgroundColor: new PdfColor(179, 219, 255),
+                        padding: new PdfPaddings(5, 2, 0, 0)
+                    },
+                    footer: {
+                        backgroundColor: new PdfColor(205, 92, 92)
+                    },
+                    label: {
+                        fontColor: new PdfColor(128, 0, 0)
+                    },
+                    cell: {
+                        backgroundColor: new PdfColor(240, 248, 255),
+                        fontColor: new PdfColor(0, 0, 0),
+                        borderColor: new PdfColor(179, 219, 255)
+                    },
+                    fontFamily: 1,
+                    eventMarker: {
+                        label: {
+                            backgroundColor: new PdfColor(255, 239, 213),
+                            fontFamily: PdfFontFamily.TimesRoman,
+                            fontColor: new PdfColor(139, 69, 19),
+                            fontSize: 9,
+                            format: stringFormat,
+                            fontStyle: PdfFontStyle.Bold,
+                            borderColor: new PdfColor(160, 82, 45),
+                            borders: borders
+                        },
+                        lineStyle: pen
+                    },
+                    holiday: {
+                        fontFamily: PdfFontFamily.TimesRoman,
+                        fontSize: 10,
+                        fontStyle: PdfFontStyle.Bold,
+                        borderColor: new PdfColor(211, 211, 211),
+                        backgroundColor: new PdfColor(255, 248, 220),
+                        fontColor: new PdfColor(105, 105, 105),
+                        format: vertical,
+                        borders: borders
+                    }
+                }
+            };
+
+            gantt.pdfExport(exportProperties);
+        }
     },
-    {
-        from: "04/12/2019",
-        to: "04/12/2019",
-        label: " Public holiday",
-        cssClass: "e-custom-holiday"
-    
-    }],
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'EndDate', headerText: 'End Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
 });
+
 gantt.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs13/js/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs13/js/index.html
index cb92eda42..8c6fe30d5 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs13/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs13/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-          <div id="GanttExport"></div>
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="GanttExport"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs13/systemjs.config.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs13/systemjs.config.js
index f91edce14..8e1726657 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs13/systemjs.config.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs13/systemjs.config.js
@@ -21,25 +21,25 @@ System.config({
         "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
         "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
         "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
-		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
-        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
         "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
         "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
         "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
         "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
         "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
-        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
-		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
         "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
         "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
-		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
         "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
         "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
         "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
         "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
         "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
         "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
-        
+
     }
 });
 
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs13/ts/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs13/ts/index.html
index 47821f5a9..5c521fe8e 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs13/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs13/ts/index.html
@@ -8,17 +8,17 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-            <div id='GanttExport'></div>        
-        </div>   
- </script>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='GanttExport'></div>
+    </div>
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs17/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs17/index.js
index b944ff9fe..5803db581 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs17/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs17/index.js
@@ -1,17 +1,17 @@
-
 var ganttChart = new ej.gantt.Gantt({
+    id: 'ganttDefault',
     dataSource: GanttData,
+    height: '450px',
     taskFields: {
-        id: "TaskID",
-        name: "TaskName",
-        startDate: "StartDate",
-        endDate: "EndDate",
-        duration: "Duration",
-        progress: "Progress",
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
         parentID: 'ParentID',
-        segments: "Segments"
+        segments: 'Segments'
     },
-
     editSettings: {
         allowEditing: true,
         allowDeleting: true,
@@ -19,39 +19,41 @@ var ganttChart = new ej.gantt.Gantt({
         showDeleteConfirmDialog: true
     },
     toolbar: ['PdfExport'],
-
-    toolbarClick: (args) => {
-        if (args.item.id === 'GanttExport_pdfexport') {
-            ganttChart.pdfExport();
-        }
-    },
+    gridLines: 'Both',
+    allowPdfExport: true,
     columns: [
         { field: 'TaskID', headerText: 'Task ID' },
         { field: 'TaskName', headerText: 'Task Name' },
         { field: 'StartDate', headerText: 'Start Date' },
-        { field: 'EndDate', headerText: 'End Date' },
+        { field: 'EndDate', headerText: 'End Date' }
     ],
-    allowPdfExport: true,
-    gridLines: "Both",
-    showColumnMenu: false,
-    queryTaskbarInfo: (args) => {
-        if (args.data.taskData.Segments) {
-            var segmentIndex = args.taskbarElement.dataset.segmentIndex;
+    toolbarClick: function (args) {
+        if (args.item.id === 'GanttExport_pdfexport') {
+            ganttChart.pdfExport();
+        }
+    },
+    queryTaskbarInfo: function (args) {
+        var taskData = args.data && args.data.taskData ? args.data.taskData : null;
+        if (taskData && taskData.Segments) {
+            var segmentIndex = args.taskbarElement && args.taskbarElement.dataset
+                ? args.taskbarElement.dataset.segmentIndex
+                : null;
+
             if (Number(segmentIndex) === 1) {
                 args.taskbarBgColor = 'red';
                 args.taskbarBorderColor = 'black';
-                args.progressBarBgColor = "green";
+                args.progressBarBgColor = 'green';
             }
         }
     },
-    height: "450px",
-    pdfQueryTaskbarInfo: (args) => {
-        if (args.taskbar.taskSegmentStyles) {
-            args.taskbar.taskSegmentStyles[1].taskColor = new ej.pdfexport.PdfColor(255, 0, 0);
-            args.taskbar.taskSegmentStyles[1].progressColor = new ej.pdfexport.PdfColor(0, 128, 0);
-            args.taskbar.taskSegmentStyles[1].taskBorderColor = new ej.pdfexport.PdfColor(0, 0, 0);
+    pdfQueryTaskbarInfo: function (args) {
+        var taskbar = args.taskbar;
+        if (taskbar && taskbar.taskSegmentStyles && taskbar.taskSegmentStyles.length > 1) {
+            taskbar.taskSegmentStyles[1].taskColor = new ej.pdfexport.PdfColor(255, 0, 0);
+            taskbar.taskSegmentStyles[1].progressColor = new ej.pdfexport.PdfColor(0, 128, 0);
+            taskbar.taskSegmentStyles[1].taskBorderColor = new ej.pdfexport.PdfColor(0, 0, 0);
         }
-    },
+    }
 });
-ganttChart.appendTo('#GanttExport');
 
+ganttChart.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs17/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-cs17/index.ts
index 0124420aa..e17b90692 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs17/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs17/index.ts
@@ -1,61 +1,76 @@
-import { Gantt, Selection, Toolbar, Edit, PdfExport } from '@syncfusion/ej2-gantt';
-Gantt.Inject(Selection, Toolbar, Edit, PdfExport);
-import { GanttData } from './datasource.ts';
+import {
+    Gantt,
+    Selection,
+    Toolbar,
+    Edit,
+    PdfExport,
+    IQueryTaskbarInfoEventArgs,
+    PdfQueryTaskbarInfoEventArgs,
+    EditSettingsModel,
+    TaskFieldsModel
+} from '@syncfusion/ej2-gantt';
 import { PdfColor } from '@syncfusion/ej2-pdf-export';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Selection, Toolbar, Edit, PdfExport);
+
+const taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    endDate: 'EndDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID',
+    segments: 'Segments'
+};
 
+const editSettings: EditSettingsModel = {
+    allowEditing: true,
+    allowDeleting: true,
+    allowTaskbarEditing: true,
+    showDeleteConfirmDialog: true
+};
 
 let gantt: Gantt = new Gantt({
+    id: 'ganttDefault',
     dataSource: GanttData,
-    taskFields: {
-        id: "TaskID",
-        name: "TaskName",
-        startDate: "StartDate",
-        endDate: "EndDate",
-        duration: "Duration",
-        progress: "Progress",
-        parentID: 'ParentID',
-        segments: "Segments"
-    },
-
-    editSettings: {
-        allowEditing: true,
-        allowDeleting: true,
-        allowTaskbarEditing: true,
-        showDeleteConfirmDialog: true
-    },
+    height: '450px',
+    taskFields: taskFields,
+    editSettings: editSettings,
     toolbar: ['PdfExport'],
-
-    toolbarClick: (args?: any) => {
-        if (args.item.id === 'GanttExport_pdfexport') {
-            gantt.pdfExport();
-        }
-    },
+    gridLines: 'Both',
+    allowPdfExport: true,
     columns: [
         { field: 'TaskID', headerText: 'Task ID' },
         { field: 'TaskName', headerText: 'Task Name' },
         { field: 'StartDate', headerText: 'Start Date' },
-        { field: 'EndDate', headerText: 'End Date' },
+        { field: 'EndDate', headerText: 'End Date' }
     ],
-    allowPdfExport: true,
-    gridLines: "Both",
-    showColumnMenu: false,
-    queryTaskbarInfo: (args: any) => {
-        if (args.data.taskData.Segments) {
-            const segmentIndex = args.taskbarElement.dataset.segmentIndex;
+    toolbarClick: (args: any) => {
+        if (args.item.id === 'GanttExport_pdfexport') {
+            gantt.pdfExport();
+        }
+    },
+    queryTaskbarInfo: (args: IQueryTaskbarInfoEventArgs) => {
+        const taskData: any = (args.data as any).taskData;
+        if (taskData.Segments) {
+            const segmentIndex = (args.taskbarElement as HTMLElement | null).dataset.segmentIndex;
             if (Number(segmentIndex) === 1) {
-                args.taskbarBgColor = 'red';
-                args.taskbarBorderColor = 'black';
-                args.progressBarBgColor = "green";
+                (args as any).taskbarBgColor = 'red';
+                (args as any).taskbarBorderColor = 'black';
+                (args as any).progressBarBgColor = 'green';
             }
         }
     },
-    height: "450px",
-    pdfQueryTaskbarInfo: (args: any) => {
-        if (args.taskbar.taskSegmentStyles) {
-            args.taskbar.taskSegmentStyles[1].taskColor = new PdfColor(255, 0, 0);
-            args.taskbar.taskSegmentStyles[1].progressColor = new PdfColor(0, 128, 0);
-            args.taskbar.taskSegmentStyles[1].taskBorderColor = new PdfColor(0, 0, 0);
+    pdfQueryTaskbarInfo: (args: PdfQueryTaskbarInfoEventArgs) => {
+        const taskbar: any = args.taskbar as any;
+        if (taskbar.taskSegmentStyles && taskbar.taskSegmentStyles.length > 1) {
+            taskbar.taskSegmentStyles[1].taskColor = new PdfColor(255, 0, 0);
+            taskbar.taskSegmentStyles[1].progressColor = new PdfColor(0, 128, 0);
+            taskbar.taskSegmentStyles[1].taskBorderColor = new PdfColor(0, 0, 0);
         }
-    },
+    }
 });
+
 gantt.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs2/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs2/index.js
index 7fc6219a9..959ee74fe 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs2/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs2/index.js
@@ -1,15 +1,7 @@
-var clickHandler = function(args){
-   if (args.item.id === 'GanttExport_pdfexport') {
-        var exportProperties = {
-           pageOrientation: 'Portrait'
-        };
-        ganttChart.pdfExport(exportProperties);
-   }
-};
-
-var ganttChart = new ej.gantt.Gantt({
+var gantt = new ej.gantt.Gantt({
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
+    id: 'ganttDefault',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -18,8 +10,23 @@ var ganttChart = new ej.gantt.Gantt({
         progress: 'Progress',
         parentID: 'ParentID'
     },
-    allowPdfExport: true,
     toolbar: ['PdfExport'],
-    toolbarClick: clickHandler
+    allowPdfExport: true,
+    treeColumnIndex: 1,
+    columns: [
+        { field: 'TaskID', headerText: 'ID', width: 100, textAlign: 'Left' },
+        { field: 'TaskName', headerText: 'Task Name', width: 250 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ],
+    toolbarClick: function (args) {
+        if (args.item.id === 'GanttExport_pdfexport') {
+            gantt.pdfExport({
+                pageOrientation: 'Portrait'
+            });
+        }
+    }
 });
-ganttChart.appendTo('#GanttExport');
\ No newline at end of file
+
+gantt.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs2/js/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs2/js/index.html
index cb92eda42..8c6fe30d5 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs2/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs2/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-          <div id="GanttExport"></div>
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="GanttExport"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs2/ts/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs2/ts/index.html
index 47821f5a9..5c521fe8e 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs2/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs2/ts/index.html
@@ -8,17 +8,17 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-            <div id='GanttExport'></div>        
-        </div>   
- </script>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='GanttExport'></div>
+    </div>
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs3/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs3/index.js
index 8a89e9c29..deec728dd 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs3/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs3/index.js
@@ -1,10 +1,10 @@
-var clickHandler = function(args){
-   if (args.item.id === 'GanttExport_pdfexport') {
+var clickHandler = function (args) {
+    if (args.item.id === 'GanttExport_pdfexport') {
         var exportProperties = {
             pageSize: 'A0'
         };
         ganttChart.pdfExport(exportProperties);
-   }
+    }
 };
 
 var ganttChart = new ej.gantt.Gantt({
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs3/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-cs3/index.ts
index 01a33cd47..923b741bf 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs3/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs3/index.ts
@@ -7,7 +7,7 @@ Gantt.Inject(Toolbar, PdfExport, Selection);
 let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
     if (args.item.id === 'GanttExport_pdfexport') {
         let exportProperties: PdfExportProperties = {
-           pageSize: 'A0'
+            pageSize: 'A0'
         };
         gantt.pdfExport(exportProperties);
     }
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs5/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs5/index.js
index 9fedc4e74..cd18d67d3 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs5/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs5/index.js
@@ -1,10 +1,10 @@
-var clickHandler = function(args){
-   if (args.item.id === 'GanttExport_pdfexport') {
+var clickHandler = function (args) {
+    if (args.item.id === 'GanttExport_pdfexport') {
         var exportProperties = {
             enableFooter: false
         };
         ganttChart.pdfExport(exportProperties);
-   }
+    }
 };
 
 var ganttChart = new ej.gantt.Gantt({
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs5/js/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs5/js/index.html
index cb92eda42..8c6fe30d5 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs5/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs5/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-          <div id="GanttExport"></div>
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="GanttExport"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs5/ts/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs5/ts/index.html
index 47821f5a9..5c521fe8e 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs5/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs5/ts/index.html
@@ -8,17 +8,17 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-            <div id='GanttExport'></div>        
-        </div>   
- </script>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='GanttExport'></div>
+    </div>
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs6/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs6/index.js
index d21a6fbb0..6fde7f767 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs6/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs6/index.js
@@ -1,15 +1,7 @@
-var clickHandler = function(args){
-   if (args.item.id === 'GanttExport_pdfexport') {
-        var exportProperties = {
-            includeHiddenColumn: true
-        };
-        ganttChart.pdfExport(exportProperties);
-   }
-};
-
 var ganttChart = new ej.gantt.Gantt({
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
+    treeColumnIndex: 1,
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -19,14 +11,21 @@ var ganttChart = new ej.gantt.Gantt({
         parentID: 'ParentID'
     },
     columns: [
-        { field: 'TaskID'},
-        { field: 'TaskName', visible: false},
-        { field: 'StartDate'},
-        { field: 'Duration'},
-        { field: 'Progress'}
+        { field: 'TaskID', headerText: 'Task ID', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150, visible: false },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
     ],
-    allowPdfExport: true,
     toolbar: ['PdfExport'],
-    toolbarClick: clickHandler
+    allowPdfExport: true,
+    toolbarClick: function (args) {
+        if (args.item.id === 'Gantt_pdfexport') {
+            ganttChart.pdfExport({
+                includeHiddenColumn: true
+            });
+        }
+    }
 });
-ganttChart.appendTo('#GanttExport');
\ No newline at end of file
+
+ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs6/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-cs6/index.ts
index 5eb6b1b21..7f6dbee83 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs6/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs6/index.ts
@@ -1,21 +1,12 @@
-import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties } from '@syncfusion/ej2-gantt';
+import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties, ClickEventArgs } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
-import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
 
 Gantt.Inject(Toolbar, PdfExport, Selection);
 
-let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
-    if (args.item.id === 'GanttExport_pdfexport') {
-        let exportProperties: PdfExportProperties = {
-            includeHiddenColumn: true
-        };
-        gantt.pdfExport(exportProperties);
-    }
-};
-
 let gantt: Gantt = new Gantt({
     dataSource: GanttData,
-    height: '450px',
+    height: '430px',
+    treeColumnIndex: 1,
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -25,14 +16,22 @@ let gantt: Gantt = new Gantt({
         parentID: 'ParentID'
     },
     columns: [
-        { field: 'TaskID'},
-        { field: 'TaskName', visible: false},
-        { field: 'StartDate'},
-        { field: 'Duration'},
-        { field: 'Progress'}
+        { field: 'TaskID', headerText: 'Task ID', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 150, visible: false },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
     ],
-    allowPdfExport: true,
     toolbar: ['PdfExport'],
-    toolbarClick: clickHandler
+    allowPdfExport: true,
+    toolbarClick: (args: ClickEventArgs): void => {
+        if (args.item.id === 'Gantt_pdfexport') {
+            let exportProps: PdfExportProperties = {
+                includeHiddenColumn: true
+            };
+            gantt.pdfExport(exportProps);
+        }
+    }
 });
-gantt.appendTo('#GanttExport');
\ No newline at end of file
+
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs6/js/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs6/js/index.html
index cb92eda42..492a48005 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs6/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs6/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-          <div id="GanttExport"></div>
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs6/ts/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs6/ts/index.html
index 47821f5a9..559ac95aa 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs6/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs6/ts/index.html
@@ -16,7 +16,7 @@
 <body>
         <div id='loader'>Loading....</div>
         <div id='container'>
-            <div id='GanttExport'></div>        
+            <div id='Gantt'></div>        
         </div>   
  </script>
 </body>
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs7/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs7/index.js
index 3801a2f83..a868ad22c 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs7/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs7/index.js
@@ -1,10 +1,10 @@
-var clickHandler = function(args){
-   if (args.item.id === 'GanttExport_pdfexport') {
+var clickHandler = function (args) {
+    if (args.item.id === 'GanttExport_pdfexport') {
         var exportProperties = {
             showPredecessorLines: true
         };
         ganttChart.pdfExport(exportProperties);
-   }
+    }
 };
 
 var ganttChart = new ej.gantt.Gantt({
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs8/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs8/index.js
index 31b990101..5983c0511 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs8/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs8/index.js
@@ -1,10 +1,10 @@
-var clickHandler = function(args){
-   if (args.item.id === 'GanttExport_pdfexport') {
-       ganttChart.pdfExport();
-   }
+var clickHandler = function (args) {
+    if (args.item.id === 'GanttExport_pdfexport') {
+        ganttChart.pdfExport();
+    }
 };
 
-var beforePdfExport = function(args){
+var beforePdfExport = function (args) {
     ganttChart.treeGrid.columns[2].visible = false;
     ganttChart.treeGrid.columns[3].visible = true;
 };
@@ -19,14 +19,14 @@ var ganttChart = new ej.gantt.Gantt({
         duration: 'Duration',
         progress: 'Progress',
         dependency: 'Predecessor',
-        parentID:'ParentID',
+        parentID: 'ParentID',
     },
     columns: [
-        { field: 'TaskID'},
-        { field: 'TaskName'},
-        { field: 'StartDate'},
-        { field: 'Duration', visible: false},
-        { field: 'Progress'}
+        { field: 'TaskID' },
+        { field: 'TaskName' },
+        { field: 'StartDate' },
+        { field: 'Duration', visible: false },
+        { field: 'Progress' }
     ],
     allowPdfExport: true,
     toolbar: ['PdfExport'],
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs8/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-cs8/index.ts
index 481bc2f6a..50a7b7312 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs8/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs8/index.ts
@@ -5,7 +5,7 @@ import { GanttData } from './datasource.ts';
 Gantt.Inject(Toolbar, PdfExport, Selection);
 
 let clickHandler = (args: ClickEventArgs) => {
-    if (args.item.id === 'GanttExport_pdfexport') {    
+    if (args.item.id === 'GanttExport_pdfexport') {
         gantt.pdfExport();
     }
 };
@@ -25,14 +25,14 @@ let gantt: Gantt = new Gantt({
         duration: 'Duration',
         progress: 'Progress',
         dependency: 'Predecessor',
-        parentID:'ParentID',
+        parentID: 'ParentID',
     },
     columns: [
-        { field: 'TaskID'},
-        { field: 'TaskName'},
-        { field: 'StartDate'},
-        { field: 'Duration', visible: false},
-        { field: 'Progress'}
+        { field: 'TaskID' },
+        { field: 'TaskName' },
+        { field: 'StartDate' },
+        { field: 'Duration', visible: false },
+        { field: 'Progress' }
     ],
     allowPdfExport: true,
     toolbar: ['PdfExport'],
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs8/js/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs8/js/index.html
index cb92eda42..8c6fe30d5 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs8/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs8/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-          <div id="GanttExport"></div>
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="GanttExport"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs8/systemjs.config.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs8/systemjs.config.js
index f91edce14..8e1726657 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs8/systemjs.config.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs8/systemjs.config.js
@@ -21,25 +21,25 @@ System.config({
         "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
         "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
         "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
-		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
-        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
         "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
         "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
         "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
         "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
         "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
-        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
-		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
         "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
         "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
-		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
         "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
         "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
         "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
         "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
         "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
         "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
-        
+
     }
 });
 
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs8/ts/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-cs8/ts/index.html
index 47821f5a9..5c521fe8e 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs8/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs8/ts/index.html
@@ -8,17 +8,17 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-            <div id='GanttExport'></div>        
-        </div>   
- </script>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='GanttExport'></div>
+    </div>
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs9/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-cs9/index.js
index 879dfd091..e23b14756 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs9/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs9/index.js
@@ -1,12 +1,12 @@
-var clickHandler = function(args){
-   if (args.item.id === 'GanttExport_pdfexport') {
-     ganttChart.pdfExport();
-   }
+var clickHandler = function (args) {
+    if (args.item.id === 'GanttExport_pdfexport') {
+        ganttChart.pdfExport();
+    }
 };
 
-var pdfQueryCellInfo = function(args){
-    if(args.column.field == 'Progress'){
-        if(args.value < 50) {
+var pdfQueryCellInfo = function (args) {
+    if (args.column.field == 'Progress') {
+        if (args.value < 50) {
             args.style.backgroundColor = new ej.pdfexport.PdfColor(240, 128, 128);
         } else {
             args.style.backgroundColor = new ej.pdfexport.PdfColor(165, 105, 189);
@@ -23,7 +23,7 @@ var ganttChart = new ej.gantt.Gantt({
         startDate: 'StartDate',
         duration: 'Duration',
         progress: 'Progress',
-        parentID:'ParentID'
+        parentID: 'ParentID'
     },
     allowPdfExport: true,
     toolbar: ['PdfExport'],
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-cs9/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-cs9/index.ts
index 5d263e190..def382993 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-cs9/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-cs9/index.ts
@@ -3,21 +3,21 @@ import { GanttData } from './datasource.ts';
 import { PdfColor } from '@syncfusion/ej2-pdf-export';
 Gantt.Inject(Toolbar, PdfExport, Selection);
 
-var clickHandler = function(args){
+var clickHandler = function (args: any) {
     if (args.item.id === 'GanttExport_pdfexport') {
         gantt.pdfExport();
     }
- };
+};
 
- var pdfQueryCellInfo = function(args){
-    if(args.column.field == 'Progress'){
-     if(args.value < 50) {
-         args.style.backgroundColor = new PdfColor(240, 128, 128);
-       } else {
-         args.style.backgroundColor = new PdfColor(165, 105, 189);
-       }
-     }
- };
+var pdfQueryCellInfo = function (args: any) {
+    if (args.column.field == 'Progress') {
+        if (args.value < 50) {
+            args.style.backgroundColor = new PdfColor(240, 128, 128);
+        } else {
+            args.style.backgroundColor = new PdfColor(165, 105, 189);
+        }
+    }
+};
 
 let gantt: Gantt = new Gantt({
     dataSource: GanttData,
@@ -28,7 +28,7 @@ let gantt: Gantt = new Gantt({
         startDate: 'StartDate',
         duration: 'Duration',
         progress: 'Progress',
-        parentID:'ParentID'
+        parentID: 'ParentID'
     },
     allowPdfExport: true,
     toolbar: ['PdfExport'],
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-customization-cs1/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-customization-cs1/index.js
index d8137b39c..7f32f57e9 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-customization-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-customization-cs1/index.js
@@ -1,7 +1,7 @@
 var image = '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';
 
-var clickHandler = function(args){
-   if (args.item.id === 'GanttExport_pdfexport') {
+var clickHandler = function (args) {
+    if (args.item.id === 'GanttExport_pdfexport') {
         var exportProperties = {
             header: {
                 fromTop: 0,
@@ -43,7 +43,7 @@ var clickHandler = function(args){
             }
         };
         ganttChart.pdfExport(exportProperties);
-   }
+    }
 };
 
 var ganttChart = new ej.gantt.Gantt({
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-customization-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-customization-cs1/js/index.html
index cb92eda42..8c6fe30d5 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-customization-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-customization-cs1/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-          <div id="GanttExport"></div>
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="GanttExport"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-header-template-cs1/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-header-template-cs1/index.js
index ec3ea0dea..5deb982d5 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-header-template-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-header-template-cs1/index.js
@@ -8,17 +8,17 @@ var clickHandler = function (args) {
 };
 var i = 0;
 var pdfColumnHeaderQueryCellInfo = function (args) {
-var base64Array = [
-    { 'TaskName': '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABgAAQEBAQEAAAAAAAAAAAAAAAYIAAcF/8QALBAAAQQCAgEDAwIHAAAAAAAAAQIDBAUGBxESAAgTIRQVQRYxFzhXdpa01f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwB7gessOlaiw2zpdS4Ld2cqngOyl2rLbHcqjpLiy6IzylL7/gp/J+RxwQQt68w6mewu7XrfEKC+azXGuiqiO2r2ybqKnhD3stLVy2TyOg/cj5A5IXr4G8Cf9+aD0XT6K2Nb1GlsEgz4OJW8mLKjY5DaeYdRDdUhxC0thSVJUAQoEEEAjwNW2XoFprGLb1E/QEGdBeRJiyoztK08w6hQUhxC0kFKkqAIUCCCAR4CDD9sbV2RWSso19r3BrDGza2NfWWEnOH21T2Yst2MJKUs1ryAhwslSeHFfBHyRwSHnW26tv12qpO5Ier8GtMdYoVZI2qJm01L0iCGPfC0IeqEcKLfyErKT+DwfjwFvqO/l62h/Zl3/oveB0TwJTe2FRYxX5RqrLrj065HUuZRdzXIOQ7GRHc6yLV+YlmVDcgPJS6044AQVHhTY/I58Ao3lmJUeibfRWBZH6bKCFbUL1K7PTtRpTrzjsQRlzJCWqxoPyFISkqWepUQOfj48Ctdj4j/ABA15lGB/cPoP1JSzaj6v2vd+n+oYW17nTsnv1789ew5445H7+Ad+x+oX+qGu/8AA53/AGPA5drHb+D4rru/xSy3nrPG86i5hkwnOXDjbTIkG9lrU4qCqY271W0R0BfJSFI5UvqQQKWW5cOT6NMhxTZO+9d5Fl72ByIYjQrmM9LMo1oQll0iXIMuSH+3Z9BSlaiFBCeOSH//2Q=='},
-    { 'StartDate' : '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABcAAQEBAQAAAAAAAAAAAAAAAAcABgX/xAAzEAAABAQDBwEGBwAAAAAAAAABAgMEBQYHEQgSEwAUFRYYITI0IiQxMzVCN0NRVWaCg//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAGBEBAQEBAQAAAAAAAAAAAAAAABEBIUH/2gAMAwEAAhEDEQA/AG2t2PafKP4qHFI3sLlRGR4bE4QlEIi4Yu1XqLJdBsq5UAU1spjEKqoJQBIfEoZTD8QCJcxxTdhwp3JlI6RxCQ5yYQmGOVYjEVYbE8oPVoi8VFNMVRanEoInbjcUvIxwAw27BTHjim7EfTuc6R1ciEhyawi0MbKw6IpQ2J5ReoxFmqCagpC6OBRRI4G4JeRSAJgv3B3ojj2nysGKhvSNlC5UWkeJROLpQ+It2LtJ6syQQcqtlBFRbKUxypJiYBSDyMGUo/AOtP7GoFVcRtTZRkWjGHiLcm8F3qKTvLi68Qd72wIoTMslm1MmmcgXAtigmAXsO1lSwYwJKqEwV0mLD8yw54TiTFLMNJFXblWUHAMjpHK2MAJnC5xNZ2n2EgB2N37BdCqOpVQl+uku4fnuHPCceYpmhp4q0cpSg4FkRIhXJhBQ42OBrNFOwEEO5e/cbIUnSAxqBSrEbTKUZ6oxh4hPOXGt1ikkS4uhEGm6MDqHyrK5dPPqEINgNcoqANrhskLWameB0/jWL2uPPWIuYaV6PLO68Jm5CB8SvCy58+qA62nYlreOqN/INmGiCT5cpetjBnmEvcV00w2XUIAio0ndKem6L2Jq5GN2ykQEMixQEygaYBcN3KH5Y7PTxThLlL0cYMjQlliummJS6vAFlHc7qz03WewxXI+s2TiABkRKIlTDTELjvBg/MDZ6eF+WIHT+C4vaHci4i5hqprczb1xabkI5w20LNkyaQBo6lz3v5aQW8R2aYz1VOkrq9rP1Sfx3gX1P9rJvPof8PP8Ar92zDQxLHQ71NzbzJ+EHBkuAfV/X5Gefw968t8+Z7P6fZs4dUz9DvU3KXLf4QcGV4/8AV/X5HmTz968tz+X7P6/fs4dM9K+krq9ox0t/yLjv1P8Aaz7t67/fw/t9uzTH/9k='}
-];
+    var base64Array = [
+        { 'TaskName': '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABgAAQEBAQEAAAAAAAAAAAAAAAYIAAcF/8QALBAAAQQCAgEDAwIHAAAAAAAAAQIDBAUGBxESAAgTIRQVQRYxFzhXdpa01f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwB7gessOlaiw2zpdS4Ld2cqngOyl2rLbHcqjpLiy6IzylL7/gp/J+RxwQQt68w6mewu7XrfEKC+azXGuiqiO2r2ybqKnhD3stLVy2TyOg/cj5A5IXr4G8Cf9+aD0XT6K2Nb1GlsEgz4OJW8mLKjY5DaeYdRDdUhxC0thSVJUAQoEEEAjwNW2XoFprGLb1E/QEGdBeRJiyoztK08w6hQUhxC0kFKkqAIUCCCAR4CDD9sbV2RWSso19r3BrDGza2NfWWEnOH21T2Yst2MJKUs1ryAhwslSeHFfBHyRwSHnW26tv12qpO5Ier8GtMdYoVZI2qJm01L0iCGPfC0IeqEcKLfyErKT+DwfjwFvqO/l62h/Zl3/oveB0TwJTe2FRYxX5RqrLrj065HUuZRdzXIOQ7GRHc6yLV+YlmVDcgPJS6044AQVHhTY/I58Ao3lmJUeibfRWBZH6bKCFbUL1K7PTtRpTrzjsQRlzJCWqxoPyFISkqWepUQOfj48Ctdj4j/ABA15lGB/cPoP1JSzaj6v2vd+n+oYW17nTsnv1789ew5445H7+Ad+x+oX+qGu/8AA53/AGPA5drHb+D4rru/xSy3nrPG86i5hkwnOXDjbTIkG9lrU4qCqY271W0R0BfJSFI5UvqQQKWW5cOT6NMhxTZO+9d5Fl72ByIYjQrmM9LMo1oQll0iXIMuSH+3Z9BSlaiFBCeOSH//2Q==' },
+        { 'StartDate': '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABcAAQEBAQAAAAAAAAAAAAAAAAcABgX/xAAzEAAABAQDBwEGBwAAAAAAAAABAgMEBQYHEQgSEwAUFRYYITI0IiQxMzVCN0NRVWaCg//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAGBEBAQEBAQAAAAAAAAAAAAAAABEBIUH/2gAMAwEAAhEDEQA/AG2t2PafKP4qHFI3sLlRGR4bE4QlEIi4Yu1XqLJdBsq5UAU1spjEKqoJQBIfEoZTD8QCJcxxTdhwp3JlI6RxCQ5yYQmGOVYjEVYbE8oPVoi8VFNMVRanEoInbjcUvIxwAw27BTHjim7EfTuc6R1ciEhyawi0MbKw6IpQ2J5ReoxFmqCagpC6OBRRI4G4JeRSAJgv3B3ojj2nysGKhvSNlC5UWkeJROLpQ+It2LtJ6syQQcqtlBFRbKUxypJiYBSDyMGUo/AOtP7GoFVcRtTZRkWjGHiLcm8F3qKTvLi68Qd72wIoTMslm1MmmcgXAtigmAXsO1lSwYwJKqEwV0mLD8yw54TiTFLMNJFXblWUHAMjpHK2MAJnC5xNZ2n2EgB2N37BdCqOpVQl+uku4fnuHPCceYpmhp4q0cpSg4FkRIhXJhBQ42OBrNFOwEEO5e/cbIUnSAxqBSrEbTKUZ6oxh4hPOXGt1ikkS4uhEGm6MDqHyrK5dPPqEINgNcoqANrhskLWameB0/jWL2uPPWIuYaV6PLO68Jm5CB8SvCy58+qA62nYlreOqN/INmGiCT5cpetjBnmEvcV00w2XUIAio0ndKem6L2Jq5GN2ykQEMixQEygaYBcN3KH5Y7PTxThLlL0cYMjQlliummJS6vAFlHc7qz03WewxXI+s2TiABkRKIlTDTELjvBg/MDZ6eF+WIHT+C4vaHci4i5hqprczb1xabkI5w20LNkyaQBo6lz3v5aQW8R2aYz1VOkrq9rP1Sfx3gX1P9rJvPof8PP8Ar92zDQxLHQ71NzbzJ+EHBkuAfV/X5Gefw968t8+Z7P6fZs4dUz9DvU3KXLf4QcGV4/8AV/X5HmTz968tz+X7P6/fs4dM9K+krq9ox0t/yLjv1P8Aaz7t67/fw/t9uzTH/9k=' }
+    ];
     while (i < base64Array.length) {
         var key = Object.keys(base64Array[i])[0];
         var value = base64Array[i][key];
         if (key === args.column.field) {
             args.headerTemplate.image = [{
-                    base64: value, width: 20, height: 20
-                }];
+                base64: value, width: 20, height: 20
+            }];
             args.headerTemplate.value = args.column.field;
             break;
         }
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-header-template-cs1/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-header-template-cs1/index.ts
index f629bb1d3..066040b41 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-header-template-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-header-template-cs1/index.ts
@@ -1,6 +1,5 @@
-import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties,PdfColumnHeaderQueryCellInfoEventArgs,pdfQueryTaskbarInfo,PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-gantt';
-import { GanttData,editingResources } from './datasource.ts';
-import { PdfColor } from '@syncfusion/ej2-pdf-export';
+import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties, PdfColumnHeaderQueryCellInfoEventArgs, pdfQueryTaskbarInfo, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-gantt';
+import { GanttData, editingResources } from './datasource.ts';
 import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
 
 Gantt.Inject(Toolbar, PdfExport, Selection);
@@ -13,12 +12,12 @@ let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
         gantt.pdfExport(exportProperties);
     }
 };
-let i : number = 0;
+let i: number = 0;
 let pdfColumnHeaderQueryCellInfo = (args: PdfColumnHeaderQueryCellInfoEventArgs) => {
     let base64Array: Object[] = [
-        { 'TaskName': '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABgAAQEBAQEAAAAAAAAAAAAAAAYIAAcF/8QALBAAAQQCAgEDAwIHAAAAAAAAAQIDBAUGBxESAAgTIRQVQRYxFzhXdpa01f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwB7gessOlaiw2zpdS4Ld2cqngOyl2rLbHcqjpLiy6IzylL7/gp/J+RxwQQt68w6mewu7XrfEKC+azXGuiqiO2r2ybqKnhD3stLVy2TyOg/cj5A5IXr4G8Cf9+aD0XT6K2Nb1GlsEgz4OJW8mLKjY5DaeYdRDdUhxC0thSVJUAQoEEEAjwNW2XoFprGLb1E/QEGdBeRJiyoztK08w6hQUhxC0kFKkqAIUCCCAR4CDD9sbV2RWSso19r3BrDGza2NfWWEnOH21T2Yst2MJKUs1ryAhwslSeHFfBHyRwSHnW26tv12qpO5Ier8GtMdYoVZI2qJm01L0iCGPfC0IeqEcKLfyErKT+DwfjwFvqO/l62h/Zl3/oveB0TwJTe2FRYxX5RqrLrj065HUuZRdzXIOQ7GRHc6yLV+YlmVDcgPJS6044AQVHhTY/I58Ao3lmJUeibfRWBZH6bKCFbUL1K7PTtRpTrzjsQRlzJCWqxoPyFISkqWepUQOfj48Ctdj4j/ABA15lGB/cPoP1JSzaj6v2vd+n+oYW17nTsnv1789ew5445H7+Ad+x+oX+qGu/8AA53/AGPA5drHb+D4rru/xSy3nrPG86i5hkwnOXDjbTIkG9lrU4qCqY271W0R0BfJSFI5UvqQQKWW5cOT6NMhxTZO+9d5Fl72ByIYjQrmM9LMo1oQll0iXIMuSH+3Z9BSlaiFBCeOSH//2Q=='},
-        { 'StartDate' : '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABcAAQEBAQAAAAAAAAAAAAAAAAcABgX/xAAzEAAABAQDBwEGBwAAAAAAAAABAgMEBQYHEQgSEwAUFRYYITI0IiQxMzVCN0NRVWaCg//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAGBEBAQEBAQAAAAAAAAAAAAAAABEBIUH/2gAMAwEAAhEDEQA/AG2t2PafKP4qHFI3sLlRGR4bE4QlEIi4Yu1XqLJdBsq5UAU1spjEKqoJQBIfEoZTD8QCJcxxTdhwp3JlI6RxCQ5yYQmGOVYjEVYbE8oPVoi8VFNMVRanEoInbjcUvIxwAw27BTHjim7EfTuc6R1ciEhyawi0MbKw6IpQ2J5ReoxFmqCagpC6OBRRI4G4JeRSAJgv3B3ojj2nysGKhvSNlC5UWkeJROLpQ+It2LtJ6syQQcqtlBFRbKUxypJiYBSDyMGUo/AOtP7GoFVcRtTZRkWjGHiLcm8F3qKTvLi68Qd72wIoTMslm1MmmcgXAtigmAXsO1lSwYwJKqEwV0mLD8yw54TiTFLMNJFXblWUHAMjpHK2MAJnC5xNZ2n2EgB2N37BdCqOpVQl+uku4fnuHPCceYpmhp4q0cpSg4FkRIhXJhBQ42OBrNFOwEEO5e/cbIUnSAxqBSrEbTKUZ6oxh4hPOXGt1ikkS4uhEGm6MDqHyrK5dPPqEINgNcoqANrhskLWameB0/jWL2uPPWIuYaV6PLO68Jm5CB8SvCy58+qA62nYlreOqN/INmGiCT5cpetjBnmEvcV00w2XUIAio0ndKem6L2Jq5GN2ykQEMixQEygaYBcN3KH5Y7PTxThLlL0cYMjQlliummJS6vAFlHc7qz03WewxXI+s2TiABkRKIlTDTELjvBg/MDZ6eF+WIHT+C4vaHci4i5hqprczb1xabkI5w20LNkyaQBo6lz3v5aQW8R2aYz1VOkrq9rP1Sfx3gX1P9rJvPof8PP8Ar92zDQxLHQ71NzbzJ+EHBkuAfV/X5Gefw968t8+Z7P6fZs4dUz9DvU3KXLf4QcGV4/8AV/X5HmTz968tz+X7P6/fs4dM9K+krq9ox0t/yLjv1P8Aaz7t67/fw/t9uzTH/9k='},
-        ]
+        { 'TaskName': '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABgAAQEBAQEAAAAAAAAAAAAAAAYIAAcF/8QALBAAAQQCAgEDAwIHAAAAAAAAAQIDBAUGBxESAAgTIRQVQRYxFzhXdpa01f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwB7gessOlaiw2zpdS4Ld2cqngOyl2rLbHcqjpLiy6IzylL7/gp/J+RxwQQt68w6mewu7XrfEKC+azXGuiqiO2r2ybqKnhD3stLVy2TyOg/cj5A5IXr4G8Cf9+aD0XT6K2Nb1GlsEgz4OJW8mLKjY5DaeYdRDdUhxC0thSVJUAQoEEEAjwNW2XoFprGLb1E/QEGdBeRJiyoztK08w6hQUhxC0kFKkqAIUCCCAR4CDD9sbV2RWSso19r3BrDGza2NfWWEnOH21T2Yst2MJKUs1ryAhwslSeHFfBHyRwSHnW26tv12qpO5Ier8GtMdYoVZI2qJm01L0iCGPfC0IeqEcKLfyErKT+DwfjwFvqO/l62h/Zl3/oveB0TwJTe2FRYxX5RqrLrj065HUuZRdzXIOQ7GRHc6yLV+YlmVDcgPJS6044AQVHhTY/I58Ao3lmJUeibfRWBZH6bKCFbUL1K7PTtRpTrzjsQRlzJCWqxoPyFISkqWepUQOfj48Ctdj4j/ABA15lGB/cPoP1JSzaj6v2vd+n+oYW17nTsnv1789ew5445H7+Ad+x+oX+qGu/8AA53/AGPA5drHb+D4rru/xSy3nrPG86i5hkwnOXDjbTIkG9lrU4qCqY271W0R0BfJSFI5UvqQQKWW5cOT6NMhxTZO+9d5Fl72ByIYjQrmM9LMo1oQll0iXIMuSH+3Z9BSlaiFBCeOSH//2Q==' },
+        { 'StartDate': '/9j/4AAQSkZJRgABAQIAHAAcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAMAAAITAAMAAAABAAEAAAAAAAAAAAAcAAAAAQAAABwAAAAB/9sAQwADAgICAgIDAgICAwMDAwQGBAQEBAQIBgYFBgkICgoJCAkJCgwPDAoLDgsJCQ0RDQ4PEBAREAoMEhMSEBMPEBAQ/9sAQwEDAwMEAwQIBAQIEAsJCxAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIAAgAwERAAIRAQMRAf/EABcAAQEBAQAAAAAAAAAAAAAAAAcABgX/xAAzEAAABAQDBwEGBwAAAAAAAAABAgMEBQYHEQgSEwAUFRYYITI0IiQxMzVCN0NRVWaCg//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAGBEBAQEBAQAAAAAAAAAAAAAAABEBIUH/2gAMAwEAAhEDEQA/AG2t2PafKP4qHFI3sLlRGR4bE4QlEIi4Yu1XqLJdBsq5UAU1spjEKqoJQBIfEoZTD8QCJcxxTdhwp3JlI6RxCQ5yYQmGOVYjEVYbE8oPVoi8VFNMVRanEoInbjcUvIxwAw27BTHjim7EfTuc6R1ciEhyawi0MbKw6IpQ2J5ReoxFmqCagpC6OBRRI4G4JeRSAJgv3B3ojj2nysGKhvSNlC5UWkeJROLpQ+It2LtJ6syQQcqtlBFRbKUxypJiYBSDyMGUo/AOtP7GoFVcRtTZRkWjGHiLcm8F3qKTvLi68Qd72wIoTMslm1MmmcgXAtigmAXsO1lSwYwJKqEwV0mLD8yw54TiTFLMNJFXblWUHAMjpHK2MAJnC5xNZ2n2EgB2N37BdCqOpVQl+uku4fnuHPCceYpmhp4q0cpSg4FkRIhXJhBQ42OBrNFOwEEO5e/cbIUnSAxqBSrEbTKUZ6oxh4hPOXGt1ikkS4uhEGm6MDqHyrK5dPPqEINgNcoqANrhskLWameB0/jWL2uPPWIuYaV6PLO68Jm5CB8SvCy58+qA62nYlreOqN/INmGiCT5cpetjBnmEvcV00w2XUIAio0ndKem6L2Jq5GN2ykQEMixQEygaYBcN3KH5Y7PTxThLlL0cYMjQlliummJS6vAFlHc7qz03WewxXI+s2TiABkRKIlTDTELjvBg/MDZ6eF+WIHT+C4vaHci4i5hqprczb1xabkI5w20LNkyaQBo6lz3v5aQW8R2aYz1VOkrq9rP1Sfx3gX1P9rJvPof8PP8Ar92zDQxLHQ71NzbzJ+EHBkuAfV/X5Gefw968t8+Z7P6fZs4dUz9DvU3KXLf4QcGV4/8AV/X5HmTz968tz+X7P6/fs4dM9K+krq9ox0t/yLjv1P8Aaz7t67/fw/t9uzTH/9k=' },
+    ]
     while (i < base64Array.length) {
         const key = Object.keys(base64Array[i])[0];
         const value = base64Array[i][key];
@@ -53,7 +52,7 @@ let gantt: Gantt = new Gantt({
         { field: 'TaskName', headerTemplate: '#projectName', width: 250 },
         { field: 'StartDate', headerTemplate: '#dateTemplate' }
     ],
-    pdfColumnHeaderQueryCellInfo :pdfColumnHeaderQueryCellInfo,
+    pdfColumnHeaderQueryCellInfo: pdfColumnHeaderQueryCellInfo,
     allowPdfExport: true,
     toolbar: ['PdfExport'],
     toolbarClick: clickHandler,
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/datasource.ts b/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/datasource.ts
index 0ca8b9e4a..849a5cb07 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/datasource.ts
@@ -1,28 +1,102 @@
-export let GanttData: Object[]  = [
-    { TaskID: 1, TaskName: 'Product concept', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-	{ TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30, ParentID: 1, Resources: [2], EmailID: 'RoseFuller@gmail.com', ResourcesImage: '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' },
-    { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3, ParentID: 1, Resources: [3], EmailID: 'MargaretBuchanan@gmail.com', ResourcesImage: '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' },
-    { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 2, Predecessor: '2', Progress: 30, ParentID: 1, Resources: [4], EmailID: 'FullerKing@gmail.com', ResourcesImage: '/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAAQEBAQEBAQEBAQGBgUGBggHBwcHCAwJCQkJCQwTDA4MDA4MExEUEA8QFBEeFxUVFx4iHRsdIiolJSo0MjRERFwBBAQEBAQEBAQEBAYGBQYGCAcHBwcIDAkJCQkJDBMMDgwMDgwTERQQDxAUER4XFRUXHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAFBwQGCAMCCf/aAAgBAQAAAADfwhV0x/EZ4hW5npVo+hcTlnMn4TW6ofZUBIXDSIEnOzwAaDYEyICYV79vc+aEqNLsbBM//8QAGAEAAwEBAAAAAAAAAAAAAAAAAgQFAwD/2gAIAQIQAAAABNvRaHSpjAqO9hof/8QAGQEAAgMBAAAAAAAAAAAAAAAAAgUDBAYA/9oACAEDEAAAADbLIbutRIi2OdXdagD/xAAfEAACAwEBAQADAQAAAAAAAAAEBQIDBgEHABITFBX/2gAIAQEAAQgA+/0izrLKEuj9O81zxtwL2r3Pze87lUFwwDEEVrlQ21sL617X47th5VaUf2TSlZ/O0Z9IT468vpqspb+dtFYNhQ3jnpLfFP6lzAoQY4aY5acm+MyFJqOf5jlMu+12WWaxaJBjugEFv8cG+5kMlobU70irSIgntauc+rF0rHtsVpK5z9nZ/ihVc56fmiTmueaDmJMvJkTeVxnnCKIgcJUrma0oRaHRwYYYeO3h3mdIjxF3+fp6mRlA5dMxyHyyqbZuDVFcbTyFFuAVdpIlKz5lTBgxAU9aikV30OALtIDMbnQ9akbk12vEoL7YmE1i9xrWtZKdU6tYkvF7IVYHcNC4o35zmhjLJmCfqbZwqBJeqGzphcDs2mzjIsTN8WJ84Ak7K2H3/8QAMxAAAgEDAgMECQMFAAAAAAAAAQIDAAQREjETIVEFQWGhEBQjMkJicXKBBiIzUlOCkbH/2gAIAQEACT8ApE0IxWS9l5xKRuEHxnyrt687Wv4v5o4Q7oh8Fj0pX6PuY7HIBunjjDjqdCk12xItvOgkhZJDPbspH9D58iDUKw3D8opUJMEx6KTs3yn0SMqlOLeyqcFYicCNT1f/AJXsZryMxkxjBSHbC/dUS3XEjDSaSoYN/kRVndZikKSppJKMOoHcakkXseadI7mCbKhdZwZUB2K0gaKTGANwe4g9xFNqu7XHtP7sLe5J9e40My31zJL1IjU6EH4UUTxNFsR0KvIVxVnLPPGig5dIkzjnguQTiuxxi4bHtpAgBHzYNWcEc9rexJrt51nDRzciCQBUgaQ20RYg55ledbRl7ebG7RyKWH+mUVv6sgPhgUoYiWO3lDclVUbiqSfrUEMlyrH4QWOfOpFdopjmAxMMN0C489qgRtckMiRON3WQPjyonTFEqDPRRiubGWL8nVXJrS4coOsMx1ofMiow6HcVcvBLLMdMyAFlO/xCnLXnMLcNAMdNVScd7ePEkxULqZ+/C4A9GWjRXurnHcoBRB+Saj13MAKSxDeeA8yo+YbrUmt2HMEEafr4ipHkljYm4Qe+veGHUVLFpZsamWpGnyWSd1HvTIobC/aDtUrTTNgJbqhEruTyUCiGv7phJPjZcDCxj5UHok9WvH95gMxyfevXxFW4MWzNFIGR1+hwaaW2u5c8UJEBFkjGcMVw3iKs/Ubaxt7mOX1iZZuJLOysZMpgs37eg3ocW9fOudhjGdwg7h6P/8QAIREBAAIBBAEFAAAAAAAAAAAAAQIDAAQQETESBSJBYYH/2gAIAQIBAT8AnMhFk4a2Euph+ZXYWG2rOaX6yTxEDr5z015jMD2m0kB5yyLXKzkAVTND4RoiHart3llNdkGE48mRhGIeMToNv//EACIRAQACAQMEAwEAAAAAAAAAAAECAxEAEBIEBTFhFSEiNP/aAAgBAwEBPwCuuVs4wj5dfFTBzFUPGdXUyplxdu3/ANURQyOq6xCUs5cYdd7hwnUyRk7R5cjj510t5OqGP2kQfSa7k2T6qyUj6MB62FETVHU3U2RsrniXh96nZOaspLlV2//Z' },
-    { TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4', Resources: [1], EmailID: 'MartinTamer@gmail.com', ResourcesImage: '/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAAQEBAQEBAQEBAQGBgUGBggHBwcHCAwJCQkJCQwTDA4MDA4MExEUEA8QFBEeFxUVFx4iHRsdIiolJSo0MjRERFwBBAQEBAQEBAQEBAYGBQYGCAcHBwcIDAkJCQkJDBMMDgwMDgwTERQQDxAUER4XFRUXHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAaAAACAwEBAAAAAAAAAAAAAAAHCAQFBgID/9oACAEBAAAAAH+qsdiSrczqiUBMb22cXitDeKqHJh+9YFRxtGA87Oevw2Kx1qZOdFq/gVwmsmjsTDfKu9sf/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAQFBgED/9oACAECEAAAAORaDfjmqNozlhsZWP/EABkBAAIDAQAAAAAAAAAAAAAAAAAGAwQFAf/aAAgBAxAAAADu/l0535dXB6VKBDMf/8QANRAAAgIBAgQDBgUCBwAAAAAAAQIDBAUABhESIUEHIjEQEzJhgZEIFFJicRYjQkNRU6Gx0f/aAAgBAQABPwDRyFq9K9bBxoVRisl2UExKR6iMD4z/AMa3ZuPaO0ljG6stav3JFLpVVizn5iKMqqL821S8WPC675v6duQR8SDK9VOA+fkYnWJfE5eimT2jnZFhPoFcywhv0vHJ1U/Y6qZSeGePHZeAQWHPCKVOsE5/0Un0b9p9mRle9ZTDV5GSMoJLkingViJ4CNT+p/8ArWSsLicRZkpQKErQkRRjopb0UfxqvtKDJy5DI5ZFnuW3LyyP1PA/4RrM7OxVPnaJCir5Qo462Bck2luuCerZc46+Vgnic9FPz/j1GrVWtfrSVbKB42HXsQexB7Eaw9mdXsYm63Nbq8P7n+7C3wSfz2OsEVkr2snJ1e9ZklHc+7Q8kY+gGt3OYMRzMQqvNGp+p1l/ELD7fdaj15ZmLBCyPGoB+QZgW+g1u/etWq8cEVI2PeRrM3K4HlZebsCTrbmWpZqJrEdaeKeOVeEfu3kC9QOYlAeH11i7iXMXRlSVZCY1DFTxBZeh+x1nZVxtnHZntGXrzcPVo5FLD7Mo1txlGCxRHxCsgOt2442sM3lDGJxMVb0IH/gPHVuth1s1oI4meRuMrhVBVFXuen21ubKYo7gi9yvvVSFIDGkbIyIo9OLDh/A1tCCNoMpdqM0R/J2EjUgcyMqgq3A62nhzg8BjMbJIXkih4yv+qWQl3I+XMTw1vdCNu2FHVjLF9TzawZ/Lm/iWPBqdhygPeGY86EfcjUsayK6OoZWUqQfQg6yuCWPMGvYkmikqWRMhjdk94i9VDcpHMpHqNbrxUty4VmhgEDyBnMMUkbso7czSPw9O2vDivEk/AgK5aOMD08yedvtzBfZkoUyGRoYk8WjRXtWeHZQCiD6k6ytWxFPBmMfGXswKUliHrPATxKj9w9V1mfETY23KkV3Oblp1VdOdYGYtYI9OkKcX1Z3zQ8Q6ljO7TpzitjbUlMTyoEaduRX4qvZRx6cdbq3Nu5bDKFPkPUiuUCBevEknhrJ+J+6bNqEUMrNDFWsCdJUYq7zIxYScfkTxGvCn8S2e3ZNits39ny5LKjyWr9SURx8naVoyvRtYynNWSa1dIa/aYSTkei9ljH7UHs8QPCTa+/4C1+uIbw+CzF5XGsNsbdXhdtnI4PEClfju5SSy1qySAsRijjCKilSX8vxa8RU35ubBxbdwWBrQGy5F65+ZQNLGT0iHE8VX9etl/hN3LlpIbe5MrWq0+6Vn53OtheGe1vDvHpSwNBEk/wAyc9Xdu5JPs//EACMRAAIBAwMEAwAAAAAAAAAAAAECAwAREgQQMQUTIUEiM3L/2gAIAQIBAT8AJABJ4FSdWChmwOPANaPVJq4s15HO0/0y/k1IUKhcSUHqulKEzwSysLnzvPBJFM0CDk3Xx6NaOJooQrizHfJTAD2o8wbCS3ytv//EACMRAAEDAwQCAwAAAAAAAAAAAAECAxEABBIFECExFCJBUXH/2gAIAQMBAT8AAJIA7JimNELsAujOORV7Zrs3i0v9B2tY8liTHuO6t7Vcyk4qUJyNa8BnC3cnEKCRA7ESd9OvG3rYXD6uQnE8/IrUXkv3K1oVkn73BcDpSHlhCuSifUnf/9k='  },
-    { TaskID: 6, TaskName: 'Market research', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-	{ TaskID: 7, TaskName: 'Demand analysis', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentID: 6},
-	{ TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', Progress: 30, ParentID: 7, Resources: [5], EmailID: 'DavolioFuller@gmail.com', ResourcesImage: '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' },
-    { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', ParentID: 7, Resources: [6], EmailID: 'VanJack@gmail.com', ResourcesImage: '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' },
-    { TaskID: 10, TaskName: 'Competitor analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '7, 8', Progress: 30, ParentID: 6, Resources: [4], EmailID: 'FullerKing@gmail.com', ResourcesImage: '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' },
-    { TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '9', ParentID: 6, Resources: [8], EmailID: 'JackDavolio@gmail.com', ResourcesImage: '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' },
-];
-	
 export let editingResources: Object[] = [
-    { ResourceId: 1, ResourceName: 'Martin Tamer' },
-    { ResourceId: 2, ResourceName: 'Rose Fuller' },
-    { ResourceId: 3, ResourceName: 'Margaret Buchanan' },
-    { ResourceId: 4, ResourceName: 'Fuller King' },
-    { ResourceId: 5, ResourceName: 'Davolio Fuller' },
-    { ResourceId: 6, ResourceName: 'Van Jack' },
-    { ResourceId: 7, ResourceName: 'Fuller Buchanan' },
-    { ResourceId: 8, ResourceName: 'Jack Davolio' },
-    { ResourceId: 9, ResourceName: 'Tamer Vinet' },
-    { ResourceId: 10, ResourceName: 'Vinet Fuller' },
-    { ResourceId: 11, ResourceName: 'Bergs Anton' },
-    { ResourceId: 12, ResourceName: 'Construction Supervisor' }
+    { resourceId: 1, resourceName: 'Martin Tamer' },
+    { resourceId: 2, resourceName: 'Rose Fuller' },
+    { resourceId: 3, resourceName: 'Margaret Buchanan' },
+    { resourceId: 4, resourceName: 'Fuller King' },
+    { resourceId: 5, resourceName: 'Davolio Fuller' },
+    { resourceId: 6, resourceName: 'Van Jack' },
+    { resourceId: 7, resourceName: 'Fuller Buchanan' },
+    { resourceId: 8, resourceName: 'Jack Davolio' },
+    { resourceId: 9, resourceName: 'Tamer Vinet' },
+    { resourceId: 10, resourceName: 'Vinet Fuller' },
+    { resourceId: 11, resourceName: 'Bergs Anton' },
+    { resourceId: 12, resourceName: 'Construction Supervisor' }
+];
+
+
+export let base64Data: Object[] = [
+    {
+        TaskID: 1,
+        TaskName: 'Product concept',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        EmailId: 'MartinTamer@gmail.com',
+        subtasks: [
+            {
+                TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'),
+                Duration: 3, Progress: 30, resources: [2], EmailId: 'RoseFuller@gmail.com', resourcesImage: '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'
+            },
+            {
+                TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'),
+                Duration: 3, resources: [3], EmailId: 'MargaretBuchanan@gmail.com', resourcesImage: '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'
+            },
+            {
+                TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'),
+                Duration: 2, Predecessor: '2', Progress: 30, resources: [4], EmailId: 'FullerKing@gmail.com', resourcesImage: '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'
+            }
+        ]
+    },
+    {
+        TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4', resources: [5], EmailId: 'Davoliofuller@gmail.com', resourcesImage: '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'
+    },
+    {
+        TaskID: 6,
+        TaskName: 'Market research',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        EmailId: 'Vanjack@gmail.com',
+        subtasks: [
+            {
+                TaskID: 7,
+                TaskName: 'Demand analysis',
+                StartDate: new Date('04/04/2019'),
+                EndDate: new Date('04/21/2019'),
+                EmailId: 'RoseFuller@gmail.com',
+                subtasks: [
+                    {
+                        TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'),
+                        Duration: 4, Predecessor: '5', Progress: 30, resources: [7], EmailId: 'Fullerbuchanan@gmail.com', resourcesImage: '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'
+                    },
+                ]
+            }
+        ]
+    }
+];
+
+export let editingData: Object[] = [
+    {
+        TaskID: 1,
+        TaskName: 'Project initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        subtasks: [
+            {
+                TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('04/02/2019'), Duration: 0,
+                Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
+            },
+            {
+                TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',
+                resources: [2, 3, 5], info: 'Obtain an engineered soil test of lot where construction is planned.' +
+                    'From an engineer or company specializing in soil testing'
+            },
+            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 30 },
+        ]
+    },
+    {
+        TaskID: 5,
+        TaskName: 'Project estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        subtasks: [
+            {
+                TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'),
+                Duration: 3, Predecessor: '4', Progress: 30, resources: 4,
+                info: 'Develop floor plans and obtain a materials list for estimations'
+            },
+            {
+                TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
+                Duration: 3, Predecessor: '6', resources: [4, 8], info: ''
+            },
+        ]
+    }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/es5-datasource.js
index 8b0eec52b..99eed36eb 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/es5-datasource.js
@@ -1,28 +1,102 @@
-var GanttData = [
-    { TaskID: 1, TaskName: 'Product concept', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-	{ TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30, ParentID: 1, Resources: [2], EmailID: 'RoseFuller@gmail.com', ResourcesImage: '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' },
-    { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3, ParentID: 1, Resources: [3], EmailID: 'MargaretBuchanan@gmail.com', ResourcesImage: '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' },
-    { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 2, Predecessor: '2', Progress: 30, ParentID: 1, Resources: [4], EmailID: 'FullerKing@gmail.com', ResourcesImage: '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' },
-    { TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4', Resources: [1], EmailID: 'MartinTamer@gmail.com', ResourcesImage: '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' },
-    { TaskID: 6, TaskName: 'Market research', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-	{ TaskID: 7, TaskName: 'Demand analysis', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentID: 6},
-	{ TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', Progress: 30, ParentID: 7, Resources: [5], EmailID: 'DavolioFuller@gmail.com', ResourcesImage: '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' },
-    { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', ParentID: 7, Resources: [6], EmailID: 'VanJack@gmail.com', ResourcesImage: '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' },
-    { TaskID: 10, TaskName: 'Competitor analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '7, 8', Progress: 30, ParentID: 6, Resources: [4], EmailID: 'FullerKing@gmail.com', ResourcesImage: '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' },
-    { TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '9', ParentID: 6, Resources: [8], EmailID: 'JackDavolio@gmail.com', ResourcesImage: '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' },
+let editingResources = [
+    { resourceId: 1, resourceName: 'Martin Tamer' },
+    { resourceId: 2, resourceName: 'Rose Fuller' },
+    { resourceId: 3, resourceName: 'Margaret Buchanan' },
+    { resourceId: 4, resourceName: 'Fuller King' },
+    { resourceId: 5, resourceName: 'Davolio Fuller' },
+    { resourceId: 6, resourceName: 'Van Jack' },
+    { resourceId: 7, resourceName: 'Fuller Buchanan' },
+    { resourceId: 8, resourceName: 'Jack Davolio' },
+    { resourceId: 9, resourceName: 'Tamer Vinet' },
+    { resourceId: 10, resourceName: 'Vinet Fuller' },
+    { resourceId: 11, resourceName: 'Bergs Anton' },
+    { resourceId: 12, resourceName: 'Construction Supervisor' }
 ];
 
-var editingResources = [
-    { ResourceId: 1, ResourceName: 'Martin Tamer' },
-    { ResourceId: 2, ResourceName: 'Rose Fuller' },
-    { ResourceId: 3, ResourceName: 'Margaret Buchanan' },
-    { ResourceId: 4, ResourceName: 'Fuller King' },
-    { ResourceId: 5, ResourceName: 'Davolio Fuller' },
-    { ResourceId: 6, ResourceName: 'Van Jack' },
-    { ResourceId: 7, ResourceName: 'Fuller Buchanan' },
-    { ResourceId: 8, ResourceName: 'Jack Davolio' },
-    { ResourceId: 9, ResourceName: 'Tamer Vinet' },
-    { ResourceId: 10, ResourceName: 'Vinet Fuller' },
-    { ResourceId: 11, ResourceName: 'Bergs Anton' },
-    { ResourceId: 12, ResourceName: 'Construction Supervisor' }
+
+let base64Data = [
+    {
+        TaskID: 1,
+        TaskName: 'Product concept',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        EmailId: 'MartinTamer@gmail.com',
+        subtasks: [
+            {
+                TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'),
+                Duration: 3, Progress: 30, resources: [2], EmailId: 'RoseFuller@gmail.com', resourcesImage: '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'
+            },
+            {
+                TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'),
+                Duration: 3, resources: [3], EmailId: 'MargaretBuchanan@gmail.com', resourcesImage: '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'
+            },
+            {
+                TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'),
+                Duration: 2, Predecessor: '2', Progress: 30, resources: [4], EmailId: 'FullerKing@gmail.com', resourcesImage: '/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAAQEBAQEBAQEBAQGBgUGBggHBwcHCAwJCQkJCQwTDA4MDA4MExEUEA8QFBEeFxUVFx4iHRsdIiolJSo0MjRERFwBBAQEBAQEBAQEBAYGBQYGCAcHBwcIDAkJCQkJDBMMDgwMDgwTERQQDxAUER4XFRUXHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAFBwQGCAMCCf/aAAgBAQAAAADfwhV0x/EZ4hW5npVo+hcTlnMn4TW6ofZUBIXDSIEnOzwAaDYEyICYV79vc+aEqNLsbBM//8QAGAEAAwEBAAAAAAAAAAAAAAAAAgQFAwD/2gAIAQIQAAAABNvRaHSpjAqO9hof/8QAGQEAAgMBAAAAAAAAAAAAAAAAAgUDBAYA/9oACAEDEAAAADbLIbutRIi2OdXdagD/xAAfEAACAwEBAQADAQAAAAAAAAAEBQIDBgEHABITFBX/2gAIAQEAAQgA+/0izrLKEuj9O81zxtwL2r3Pze87lUFwwDEEVrlQ21sL617X47th5VaUf2TSlZ/O0Z9IT468vpqspb+dtFYNhQ3jnpLfFP6lzAoQY4aY5acm+MyFJqOf5jlMu+12WWaxaJBjugEFv8cG+5kMlobU70irSIgntauc+rF0rHtsVpK5z9nZ/ihVc56fmiTmueaDmJMvJkTeVxnnCKIgcJUrma0oRaHRwYYYeO3h3mdIjxF3+fp6mRlA5dMxyHyyqbZuDVFcbTyFFuAVdpIlKz5lTBgxAU9aikV30OALtIDMbnQ9akbk12vEoL7YmE1i9xrWtZKdU6tYkvF7IVYHcNC4o35zmhjLJmCfqbZwqBJeqGzphcDs2mzjIsTN8WJ84Ak7K2H3/8QAMxAAAgEDAgMECQMFAAAAAAAAAQIDAAQREjETIVEFQWGhEBQjMkJicXKBBiIzUlOCkbH/2gAIAQEACT8ApE0IxWS9l5xKRuEHxnyrt687Wv4v5o4Q7oh8Fj0pX6PuY7HIBunjjDjqdCk12xItvOgkhZJDPbspH9D58iDUKw3D8opUJMEx6KTs3yn0SMqlOLeyqcFYicCNT1f/AJXsZryMxkxjBSHbC/dUS3XEjDSaSoYN/kRVndZikKSppJKMOoHcakkXseadI7mCbKhdZwZUB2K0gaKTGANwe4g9xFNqu7XHtP7sLe5J9e40My31zJL1IjU6EH4UUTxNFsR0KvIVxVnLPPGig5dIkzjnguQTiuxxi4bHtpAgBHzYNWcEc9rexJrt51nDRzciCQBUgaQ20RYg55ledbRl7ebG7RyKWH+mUVv6sgPhgUoYiWO3lDclVUbiqSfrUEMlyrH4QWOfOpFdopjmAxMMN0C489qgRtckMiRON3WQPjyonTFEqDPRRiubGWL8nVXJrS4coOsMx1ofMiow6HcVcvBLLMdMyAFlO/xCnLXnMLcNAMdNVScd7ePEkxULqZ+/C4A9GWjRXurnHcoBRB+Saj13MAKSxDeeA8yo+YbrUmt2HMEEafr4ipHkljYm4Qe+veGHUVLFpZsamWpGnyWSd1HvTIobC/aDtUrTTNgJbqhEruTyUCiGv7phJPjZcDCxj5UHok9WvH95gMxyfevXxFW4MWzNFIGR1+hwaaW2u5c8UJEBFkjGcMVw3iKs/Ubaxt7mOX1iZZuJLOysZMpgs37eg3ocW9fOudhjGdwg7h6P/8QAIREBAAIBBAEFAAAAAAAAAAAAAQIDAAQQETESBSJBYYH/2gAIAQIBAT8AnMhFk4a2Euph+ZXYWG2rOaX6yTxEDr5z015jMD2m0kB5yyLXKzkAVTND4RoiHart3llNdkGE48mRhGIeMToNv//EACIRAQACAQMEAwEAAAAAAAAAAAECAxEAEBIEBTFhFSEiNP/aAAgBAwEBPwCuuVs4wj5dfFTBzFUPGdXUyplxdu3/ANURQyOq6xCUs5cYdd7hwnUyRk7R5cjj510t5OqGP2kQfSa7k2T6qyUj6MB62FETVHU3U2RsrniXh96nZOaspLlV2//Z'
+            }
+        ]
+    },
+    {
+        TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4', resources: [5], EmailId: 'Davoliofuller@gmail.com', resourcesImage: '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'
+    },
+    {
+        TaskID: 6,
+        TaskName: 'Market research',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        EmailId: 'Vanjack@gmail.com',
+        subtasks: [
+            {
+                TaskID: 7,
+                TaskName: 'Demand analysis',
+                StartDate: new Date('04/04/2019'),
+                EndDate: new Date('04/21/2019'),
+                EmailId: 'RoseFuller@gmail.com',
+                subtasks: [
+                    {
+                        TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'),
+                        Duration: 4, Predecessor: '5', Progress: 30, resources: [7], EmailId: 'Fullerbuchanan@gmail.com', resourcesImage: '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'
+                    },
+                ]
+            }
+        ]
+    }
+];
+
+let editingData = [
+    {
+        TaskID: 1,
+        TaskName: 'Project initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        subtasks: [
+            {
+                TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('04/02/2019'), Duration: 0,
+                Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
+            },
+            {
+                TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',
+                resources: [2, 3, 5], info: 'Obtain an engineered soil test of lot where construction is planned.' +
+                    'From an engineer or company specializing in soil testing'
+            },
+            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 30 },
+        ]
+    },
+    {
+        TaskID: 5,
+        TaskName: 'Project estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        subtasks: [
+            {
+                TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'),
+                Duration: 3, Predecessor: '4', Progress: 30, resources: 4,
+                info: 'Develop floor plans and obtain a materials list for estimations'
+            },
+            {
+                TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
+                Duration: 3, Predecessor: '6', resources: [4, 8], info: ''
+            },
+        ]
+    }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/index.js
index 65fa5f8b9..51f5a36b2 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/index.js
@@ -1,71 +1,46 @@
-var clickHandler = function (args) {
-    if (args.item.id === 'GanttExport_pdfexport') {
-        var exportProperties = {
-            enableFooter: false
-        };
-        ganttChart.pdfExport(exportProperties);
-    }
-};
-var pdfQueryTaskbarInfo =  function(args){
-    if (!args.data.hasChildRecords) {
-        if (args.data.ganttProperties.resourceNames) {
-            args.taskbarTemplate.image = [{
-                width: 20, base64: (args).data.taskData.ResourcesImage, height: 20
-            }]
-        }
-        args.taskbarTemplate.value = args.data.TaskName;
-    }
-    if (args.data.hasChildRecords) {
-        if (args.data.ganttProperties.resourceNames) {
-            args.taskbarTemplate.image = [{
-                width: 20, base64: (args).data.taskData.ResourcesImage, height: 20
-            }]
-        }
-        args.taskbarTemplate.value = args.data.TaskName;
-    }
-    if (args.data.ganttProperties.duration === 0) {
-        if (args.data.ganttProperties.resourceNames) {
-            args.taskbarTemplate.image = [{
-                width: 20, base64: (args).data.taskData.ResourcesImage, height: 20,
-            }]
-        }
-        args.taskbarTemplate.value = args.data.TaskName
-    }
-};
-
 var ganttChart = new ej.gantt.Gantt({
-    dataSource: GanttData,
+    id: 'Gantt',
+    dataSource: base64Data,
     height: '450px',
-    rowHeight: 55,
-    taskbarHeight: 45,
+    rowHeight: 45,
     taskFields: {
         id: 'TaskID',
-         name: 'TaskName',
-         startDate: 'StartDate',
-         endDate: 'EndDate',
-         duration: 'Duration',
-         progress: 'Progress',
-         resourceInfo: 'Resources',
-         dependency: 'Predecessor',
-         parentID: 'ParentID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        child: 'subtasks',
+        resourceInfo: 'resources'
+    },
+    resources: editingResources,
+    resourceFields: {
+        id: 'resourceId',
+        name: 'resourceName'
+    },
+    splitterSettings: {
+        columnIndex: 2
     },
+    toolbar: ['PdfExport'],
     allowPdfExport: true,
     columns: [
-        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left' },
-        { field: 'TaskName', headerText: 'Task Name', width: '250' },
+        { field: 'TaskID' },
+        { field: 'TaskName' }
     ],
-    pdfQueryTaskbarInfo: pdfQueryTaskbarInfo,
-    toolbar: ['PdfExport'],
-    toolbarClick: clickHandler,
-    resources: editingResources,
-    resourceFields: {
-        id: 'ResourceId',
-        name: 'ResourceName'
+    toolbarClick: function (args) {
+        if (args.item.text === 'PDF export') {
+            ganttChart.pdfExport({ enableFooter: false });
+        }
     },
-    milestoneTemplate: '#MilestoneTemplate',
-    parentTaskbarTemplate: '#ParentTaskbarTemplate',
-    taskbarTemplate: '#TaskbarTemplate',
-    projectStartDate: new Date('03/24/2019'),
-    projectEndDate: new Date('04/30/2019'),
+    pdfQueryTaskbarInfo: function (args) {
+        var data = args.data;
+        if (data && data.ganttProperties && data.ganttProperties.resourceNames) {
+            args.taskbarTemplate.image = [{
+                width: 20,
+                height: 20,
+                base64: data.taskData.resourcesImage
+            }];
+            args.taskbarTemplate.value = data.TaskName;
+        }
+    }
 });
+
 ganttChart.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/index.ts
index 814fa9cbb..1616fe1b6 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/index.ts
@@ -1,78 +1,61 @@
-import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties } from '@syncfusion/ej2-gantt';
-import { GanttData,editingResources } from './datasource.ts';
-import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
+import {
+    Gantt,
+    Toolbar,
+    PdfExport,
+    Selection,
+    PdfQueryTaskbarInfoEventArgs,
+    PdfExportProperties
+} from '@syncfusion/ej2-gantt';
+import { base64Data, editingResources } from './datasource.ts';
 
 Gantt.Inject(Toolbar, PdfExport, Selection);
 
-let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
-    if (args.item.id === 'GanttExport_pdfexport') {
-        let exportProperties: PdfExportProperties = {
-            enableFooter: false
-        };
-        gantt.pdfExport(exportProperties);
-    }
-};
-let pdfQueryTaskbarInfo: EmitType<Object> = (args: Object) => {
-    if(!args.data.hasChildRecords){
-        console.log(args.data.ganttProperties.resourceNames);
-        if (args.data.ganttProperties.resourceNames) {
-            debugger;
-            args.taskbarTemplate.image = [{
-                width: 20, base64: (args as any).data.taskData.ResourcesImage, height: 20
-            }]
-        }
-        args.taskbarTemplate.value =  args.data.TaskName;
-    }
-    if(args.data.hasChildRecords){
-        if (args.data.ganttProperties.resourceNames) {
-            args.taskbarTemplate.image = [{
-                width: 20, base64: (args as any).data.taskData.ResourcesImage, height: 20
-            }]
-        }
-        args.taskbarTemplate.value= args.data.TaskName;
-    }
-    if(args.data.ganttProperties.duration === 0){
-        if (args.data.ganttProperties.resourceNames) {
-            args.taskbarTemplate.image = [{
-                width: 20, base64: (args as any).data.taskData.ResourcesImage, height: 20,
-            }]
-        }
-        args.taskbarTemplate.value = args.data.TaskName
-    }
-}
-
 let gantt: Gantt = new Gantt({
-    dataSource: GanttData,
+    id: 'Gantt',
+    dataSource: base64Data,
     height: '450px',
-    rowHeight: 55,
-    taskbarHeight: 45,
+    rowHeight: 45,
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
         startDate: 'StartDate',
-        endDate: 'EndDate',
         duration: 'Duration',
-        resourceInfo: 'Resources',
-        dependency: 'Predecessor',
-        parentID: 'ParentID',
+        child: 'subtasks',
+        resourceInfo: 'resources'
     },
-    columns: [
-        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left' },
-        { field: 'TaskName', headerText: 'Task Name', width: '250' },
-    ],
-    pdfQueryTaskbarInfo: pdfQueryTaskbarInfo,
-    milestoneTemplate: '#MilestoneTemplate',
-    parentTaskbarTemplate: '#ParentTaskbarTemplate',
-    taskbarTemplate: '#TaskbarTemplate',
-    allowPdfExport: true,
-    toolbar: ['PdfExport'],
-    toolbarClick: clickHandler,
     resources: editingResources,
     resourceFields: {
-        id: 'ResourceId',
-        name: 'ResourceName'
+        id: 'resourceId',
+        name: 'resourceName'
     },
-    projectStartDate: new Date('03/24/2019'),
-    projectEndDate: new Date('04/30/2019'),
+    splitterSettings: {
+        columnIndex: 2
+    },
+    toolbar: ['PdfExport'],
+    allowPdfExport: true,
+    columns: [
+        { field: 'TaskID' },
+        { field: 'TaskName' }
+    ],
+    toolbarClick: (args: any) => {
+        if (args.item.text === 'PDF export') {
+            const exportProps: PdfExportProperties = {
+                enableFooter: false
+            };
+            gantt.pdfExport(exportProps);
+        }
+    },
+    pdfQueryTaskbarInfo: (args: PdfQueryTaskbarInfoEventArgs) => {
+        const data: any = args.data;
+        if (data.ganttProperties.resourceNames) {
+            args.taskbarTemplate.image = [{
+                width: 20,
+                height: 20,
+                base64: data.taskData.resourcesImage
+            }];
+            args.taskbarTemplate.value = data.TaskName;
+        }
+    }
 });
+
 gantt.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/ts/index.html
index 68b102f4b..8fabf3b63 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-taskbar-template-cs1/ts/index.html
@@ -13,9 +13,9 @@
     <script src="systemjs.config.js"></script>
     <style>
         .e-gantt .e-gantt-chart .e-gantt-milestone {
-        position: absolute;
-        transform: rotate(0deg)!important;
-    }
+            position: absolute;
+            transform: rotate(0deg) !important;
+        }
     </style>
 </head>
 
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/datasource.ts b/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/datasource.ts
index 0ca8b9e4a..2d38623a3 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/datasource.ts
@@ -1,28 +1,100 @@
-export let GanttData: Object[]  = [
-    { TaskID: 1, TaskName: 'Product concept', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-	{ TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30, ParentID: 1, Resources: [2], EmailID: 'RoseFuller@gmail.com', ResourcesImage: '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' },
-    { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3, ParentID: 1, Resources: [3], EmailID: 'MargaretBuchanan@gmail.com', ResourcesImage: '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' },
-    { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 2, Predecessor: '2', Progress: 30, ParentID: 1, Resources: [4], EmailID: 'FullerKing@gmail.com', ResourcesImage: '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' },
-    { TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4', Resources: [1], EmailID: 'MartinTamer@gmail.com', ResourcesImage: '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'  },
-    { TaskID: 6, TaskName: 'Market research', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-	{ TaskID: 7, TaskName: 'Demand analysis', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentID: 6},
-	{ TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', Progress: 30, ParentID: 7, Resources: [5], EmailID: 'DavolioFuller@gmail.com', ResourcesImage: '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' },
-    { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', ParentID: 7, Resources: [6], EmailID: 'VanJack@gmail.com', ResourcesImage: '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' },
-    { TaskID: 10, TaskName: 'Competitor analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '7, 8', Progress: 30, ParentID: 6, Resources: [4], EmailID: 'FullerKing@gmail.com', ResourcesImage: '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' },
-    { TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '9', ParentID: 6, Resources: [8], EmailID: 'JackDavolio@gmail.com', ResourcesImage: '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' },
-];
-	
 export let editingResources: Object[] = [
-    { ResourceId: 1, ResourceName: 'Martin Tamer' },
-    { ResourceId: 2, ResourceName: 'Rose Fuller' },
-    { ResourceId: 3, ResourceName: 'Margaret Buchanan' },
-    { ResourceId: 4, ResourceName: 'Fuller King' },
-    { ResourceId: 5, ResourceName: 'Davolio Fuller' },
-    { ResourceId: 6, ResourceName: 'Van Jack' },
-    { ResourceId: 7, ResourceName: 'Fuller Buchanan' },
-    { ResourceId: 8, ResourceName: 'Jack Davolio' },
-    { ResourceId: 9, ResourceName: 'Tamer Vinet' },
-    { ResourceId: 10, ResourceName: 'Vinet Fuller' },
-    { ResourceId: 11, ResourceName: 'Bergs Anton' },
-    { ResourceId: 12, ResourceName: 'Construction Supervisor' }
+    { resourceId: 1, resourceName: 'Martin Tamer' },
+    { resourceId: 2, resourceName: 'Rose Fuller' },
+    { resourceId: 3, resourceName: 'Margaret Buchanan' },
+    { resourceId: 4, resourceName: 'Fuller King' },
+    { resourceId: 5, resourceName: 'Davolio Fuller' },
+    { resourceId: 6, resourceName: 'Van Jack' },
+    { resourceId: 7, resourceName: 'Fuller Buchanan' },
+    { resourceId: 8, resourceName: 'Jack Davolio' },
+    { resourceId: 9, resourceName: 'Tamer Vinet' },
+    { resourceId: 10, resourceName: 'Vinet Fuller' },
+    { resourceId: 11, resourceName: 'Bergs Anton' },
+    { resourceId: 12, resourceName: 'Construction Supervisor' }
+];
+export let base64Data: Object[] = [
+    {
+        TaskID: 1,
+        TaskName: 'Product concept',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        EmailId: 'MartinTamer@gmail.com',
+        subtasks: [
+            {
+                TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'),
+                Duration: 3, Progress: 30, resources: [2], EmailId: 'RoseFuller@gmail.com', resourcesImage: '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'
+            },
+            {
+                TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'),
+                Duration: 3, resources: [3], EmailId: 'MargaretBuchanan@gmail.com', resourcesImage: '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'
+            },
+            {
+                TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'),
+                Duration: 2, Predecessor: '2', Progress: 30, resources: [4], EmailId: 'FullerKing@gmail.com', resourcesImage: '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'
+            }
+        ]
+    },
+    {
+        TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4', resources: [5], EmailId: 'Davoliofuller@gmail.com', resourcesImage: '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'
+    },
+    {
+        TaskID: 6,
+        TaskName: 'Market research',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        EmailId: 'Vanjack@gmail.com',
+        subtasks: [
+            {
+                TaskID: 7,
+                TaskName: 'Demand analysis',
+                StartDate: new Date('04/04/2019'),
+                EndDate: new Date('04/21/2019'),
+                EmailId: 'RoseFuller@gmail.com',
+                subtasks: [
+                    {
+                        TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'),
+                        Duration: 4, Predecessor: '5', Progress: 30, resources: [7], EmailId: 'Fullerbuchanan@gmail.com', resourcesImage: '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'
+                    },
+                ]
+            }
+        ]
+    }
+];
+
+export let editingData: Object[] = [
+    {
+        TaskID: 1,
+        TaskName: 'Project initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        subtasks: [
+            {
+                TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('04/02/2019'), Duration: 0,
+                Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
+            },
+            {
+                TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',
+                resources: [2, 3, 5], info: 'Obtain an engineered soil test of lot where construction is planned.' +
+                    'From an engineer or company specializing in soil testing'
+            },
+            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 30 },
+        ]
+    },
+    {
+        TaskID: 5,
+        TaskName: 'Project estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        subtasks: [
+            {
+                TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'),
+                Duration: 3, Predecessor: '4', Progress: 30, resources: 4,
+                info: 'Develop floor plans and obtain a materials list for estimations'
+            },
+            {
+                TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
+                Duration: 3, Predecessor: '6', resources: [4, 8], info: ''
+            },
+        ]
+    }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/es5-datasource.js
index 8b0eec52b..d36952349 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/es5-datasource.js
@@ -1,28 +1,99 @@
-var GanttData = [
-    { TaskID: 1, TaskName: 'Product concept', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-	{ TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30, ParentID: 1, Resources: [2], EmailID: 'RoseFuller@gmail.com', ResourcesImage: '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' },
-    { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3, ParentID: 1, Resources: [3], EmailID: 'MargaretBuchanan@gmail.com', ResourcesImage: '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' },
-    { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 2, Predecessor: '2', Progress: 30, ParentID: 1, Resources: [4], EmailID: 'FullerKing@gmail.com', ResourcesImage: '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' },
-    { TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4', Resources: [1], EmailID: 'MartinTamer@gmail.com', ResourcesImage: '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' },
-    { TaskID: 6, TaskName: 'Market research', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-	{ TaskID: 7, TaskName: 'Demand analysis', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentID: 6},
-	{ TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', Progress: 30, ParentID: 7, Resources: [5], EmailID: 'DavolioFuller@gmail.com', ResourcesImage: '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' },
-    { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', ParentID: 7, Resources: [6], EmailID: 'VanJack@gmail.com', ResourcesImage: '/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAAQEBAQEBAQEBAQGBgUGBggHBwcHCAwJCQkJCQwTDA4MDA4MExEUEA8QFBEeFxUVFx4iHRsdIiolJSo0MjRERFwBBAQEBAQEBAQEBAYGBQYGCAcHBwcIDAkJCQkJDBMMDgwMDgwTERQQDxAUER4XFRUXHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAHBAUGCAkDAP/aAAgBAQAAAAC/zUBwvbqWrmiF1b8JtR0XATx1qp9qKq6oxwORrdHzm4ByL1b0QUqVoxErfUzWJSgrRN+kynP/xAAaAQADAAMBAAAAAAAAAAAAAAAAAQUCAwQG/9oACAECEAAAAFLpZ6/MWqJCq9Axf//EABkBAAIDAQAAAAAAAAAAAAAAAAAFAQMGBP/aAAgBAxAAAACW6uu3YoFBo03KET//xAAhEAACAgMBAQACAwAAAAAAAAAEBQMGAQIHAAgRFBMVI//aAAgBAQABCAD2WJR0m46TqXbOdc0KypepvrqhkG6RP6o7q1yU6u+fitJoSI17fzKWQ4nRMN2C1E0LnppaAL54rR+m579txOkBAyQDcyOM5J3CthglhDHDSCEpyZ9dyFJqX/Uclln6Cii3owGksNn2CJDXnW5ztIVKlTdFUNBd1771JscllqaF5O9l1WkrnPq9JrqhVfi3qIGlePCIiwLkLQiRrHCLagXO3XFH96yry5XSkUtXqqZBPd9M4rpGuEWf18nqdvW0Yda32FNt2izdV/KycdM/esa1zHR7ogv1cAsldZQ6MGICnLUUiKeBwvDMHPHjKF6rOlJFTVcsygIileNJ7bRK7ROaWWwbfO1p6Kiu0QVGUATDaTFneNSybSzGKBOdXtF1NbfLaqfgQWQyCTotFZddXLEkNC5pU+cL9QK77//EADAQAAIBAwEGAwgCAwAAAAAAAAECAwAEEQUSEyExQVEiMoEGEBQjQmFicZGhB1Ox/9oACAEBAAk/AKRCiErJfSjMKkcxGPrP9Ve6j7Ra/sbb2Nq42IM8t7gqkdf4xnsLMnG/tZ0uXH3KlIq9qTJanmqSNIiMfolhl8SGoFguH4RSoSYJz2Unk34n3OyIUEl5IhwViJwIwe7/APKjRNRklt9O09cZRJrhtkOR+Ay1XeoX2o3DGS5unnwZHNaXglcbxppHc/yavHGj6xdRafdw58LpcndrtfdHIIqPajb0II5EHoRTbV3a4+Z/thbySfvoa899cyS9zu1OxGPRRROH9oNMAYclzLsEmrBFE5YL8wlwFGQSqqcHHGrfNxFbLcSEwtKzRnogBUFqlk+ITUIty80W5kjkVx2JyvY1Csc95aq8qLnZWQcGxnpmuUZe3mxzaORSw/hlFeYWyA1CZVdMbI557ivlyODtqRgh1GPF9xUMy2S2wiuWcE5PE8AOIIplAvL61ttuTIRTdPiMmp1meyh2C65wxyT1rixli9TtVwa0uHKDvDMdtD/ZHuDxQXswnt5UYr83OWGf3zFTSG0hw7eRQQvHx4AOK06W6sNN1W0v5IoeDPHZMCiAngC1XQmtJ0wykjeQyjzxSr0day0aK91c46KAUQepNRl7mBSksQ5zwE5Kj8hzWpNqNvQgjmCOhFIJL7UppZLZVOHRbWMySSfocqkvp5JBh1mnLAYqwRJINOfcIefxE+Io3fPZmqH4yG8ZRf2c5b4UxZ8748rjoaIa/um25iDkL0WNfso9141jeyA7bKoaOQnq6Hhkd69oV1qwjhuYd6+BIiSQuiqkYwAuWrSroaSpY2tzJLG4LjH0DxYJ8ufWryTTtBW6M98/g3tzsDCIuC2AMknIqwRJMfNnPF3buSfd/8QAIxEAAgEDAwQDAAAAAAAAAAAAAQIDABARBBIxBSJSYSEycf/aAAgBAgEBPwAkAEmm6vAvCOR+VHIsqLIvDDNpsiKTHiaOBjsGBzXT3dox4jN9XEIZWAZgH7vgVo4tkAO3aCcgHnHu7Kku0yIrFfr6osTb/8QAJxEAAgECBQEJAAAAAAAAAAAAAQIDABEFEBIiMQQhIzIzQlJhgZH/2gAIAQMBAT8AALEAcmkwad/Wg+6miaGR4n8Sm2UHnRX9wqIarnWQTxWKpEshIPeEj8tnh/UyPCtlUlNvbXXSiSe2oMwG4ji+avJECI3ZQ53fNAAZf//Z' },
-    { TaskID: 10, TaskName: 'Competitor analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '7, 8', Progress: 30, ParentID: 6, Resources: [4], EmailID: 'FullerKing@gmail.com', ResourcesImage: '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' },
-    { TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '9', ParentID: 6, Resources: [8], EmailID: 'JackDavolio@gmail.com', ResourcesImage: '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' },
+let editingResources = [
+    { resourceId: 1, resourceName: 'Martin Tamer' },
+    { resourceId: 2, resourceName: 'Rose Fuller' },
+    { resourceId: 3, resourceName: 'Margaret Buchanan' },
+    { resourceId: 4, resourceName: 'Fuller King' },
+    { resourceId: 5, resourceName: 'Davolio Fuller' },
+    { resourceId: 6, resourceName: 'Van Jack' },
+    { resourceId: 7, resourceName: 'Fuller Buchanan' },
+    { resourceId: 8, resourceName: 'Jack Davolio' },
+    { resourceId: 9, resourceName: 'Tamer Vinet' },
+    { resourceId: 10, resourceName: 'Vinet Fuller' },
+    { resourceId: 11, resourceName: 'Bergs Anton' },
+    { resourceId: 12, resourceName: 'Construction Supervisor' }
+];
+let base64Data = [
+    {
+        TaskID: 1,
+        TaskName: 'Product concept',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        EmailId: 'MartinTamer@gmail.com',
+        subtasks: [
+            {
+                TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'),
+                Duration: 3, Progress: 30, resources: [2], EmailId: 'RoseFuller@gmail.com', resourcesImage: '/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAAQEBAQEBAQEBAQGBgUGBggHBwcHCAwJCQkJCQwTDA4MDA4MExEUEA8QFBEeFxUVFx4iHRsdIiolJSo0MjRERFwBBAQEBAQEBAQEBAYGBQYGCAcHBwcIDAkJCQkJDBMMDgwMDgwTERQQDxAUER4XFRUXHiIdGx0iKiUlKjQyNEREXP/CABEIADcANwMBIgACEQEDEQH/xAAbAAADAAMBAQAAAAAAAAAAAAAFBwgEBgkCA//aAAgBAQAAAAC/hQFOvYjnCinKzbmZbGH5zuQtL+rjE/fO5y7I93/rpMhES5qCgxOTPErmqDaDCzVpNoBsPfbf/8QAGgEAAQUBAAAAAAAAAAAAAAAAAAECAwQFBv/aAAgBAhAAAAAoWZjmNLVM6a2Pan//xAAXAQEBAQEAAAAAAAAAAAAAAAAABAUG/9oACAEDEAAAAGjNO7PFxm1FEH//xAA3EAACAgECBAMFBgQHAAAAAAABAgMEBQAGBxESQSExMhATUVKBCBQiYWKhFiNxkTNCU2RygrH/2gAIAQEAAT8A0chavSvWwcaFUYrJdlBMSkeYjA9Z/bW5b209pY98xvncBFf57UrKrP8ACOGL1H8gCdRcfOB8txaopTojeU5p8o9Uq+OuVUv7XzrLE4DIYpvvNduY+Vif2I1Vyk0NiPH5eBYLD+EUqEmCc/BSfJv0n2ZB5MjajwlZ2RCnvbkinkViJ5CMH5n/APNdNajV5L0Q14IyflREUeJ1vDP53jTu65l72QMOMWZ4MbW/yQwBuw+Yj1HW3OAEF1lntZ50iHNRGkHiSe/MtrbEF3ghuPEWkyktvbt2daeQRx4oH8EfkPk1PTr5CrLVtRBom5fkQR3B7EdjrD2Z1exibrdVury/mf6sLeiT+vY6wRV69rJv671mSX4n3anoRfoo1l6pv4rKUAwQ2ak8AY+QMiFef76x2VbacmNrvjnnmjAMiGRU5OW9IB8WOtucRXk2ra3FiMK9panISQGTpCv+ZAJ1ZvZjiJgbr28VBVimjjmj6RYVo2V/DwljQN3BI1Gysqup5hgCNZ2VcbZx2Z7Rl683LzaORSw/syjW3HUYHFfEVkB9m7sNitqby3LVzlFmkhlkmrFVKO6MSY+nXBvN0Zq+YoLQsixLKr9DxosBHkSCxAIXvrFTRzyDCrSjhnM6x9KgCFwT6l5dtIOlFX4Aa3uhG3bCjxYyxfU9WsEfu5v4lvBqlhygPeGY9aH9yPZ9rHEQ0M5tvOo/4sjVnqSoP9uQQw+kuuFMAd0DW4pK5J61lkYsOf8A28DrYaU23dFVqoohgWWdlTyDEcv7nnz9mShTIZGhiTzaNFe1Z5dlAKIPqTrK1bEU8GYx8ZezApSWIec8BPMqP1DzXXEn7Ue2dlT2sNisLfyGZi7TxmrWT+rP+JtY7c03GVty/wAVSKcnNcjsQyJ4CCLoEaJEOypy1tjgruGnuypiZcpXkSWMWVevZVHeH5mTnzGt75ylwWweJkw5jmzlu5FyD94IiGm+jenWy+NG1N60m+4CxHlo4laTGshMhZjyHQw8GBOsZTmrJNaukNftMJJyPJeyxj9KD2cReDu0OJNUnJVBDdH+Hai/C6nW2+AWe4ZbrOTe3VvYKeKSByT0ypzIKkL31tfZ+8It62tx5a37h6+T+/0pY5FKycj0CAgEkRmPw1ujg/n+Ke7XzuRvpTwcaJBVjRg0vuk8T/xJOtmcPtu7EpJVw9VRL0/zJ28XY+z/xAAiEQACAQMEAgMAAAAAAAAAAAABAgMABBEQEhNRISIFQYH/2gAIAQIBAT8AqW/hjk4y/t1ioJ0nTemtyA0pYREOjeT3XxjFufxhcg/ut5aMw5Ez7H6Gas7ZraHa4wzHcdVYjaOjmiSTk6f/xAAiEQACAQIGAwEAAAAAAAAAAAABAgMEEQAFEBITISJBUZH/2gAIAQMBAT8AxFltRJGsvH4H3fFTTvTPsf2LjWlBEChp1aNk8V+YzdVUwDddrH81y6t4xxkjpSLsbdYr6hamfehuoULr91//2Q=='
+            },
+            {
+                TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'),
+                Duration: 3, resources: [3], EmailId: 'MargaretBuchanan@gmail.com', resourcesImage: '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'
+            },
+            {
+                TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'),
+                Duration: 2, Predecessor: '2', Progress: 30, resources: [4], EmailId: 'FullerKing@gmail.com', resourcesImage: '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'
+            }
+        ]
+    },
+    {
+        TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4', resources: [5], EmailId: 'Davoliofuller@gmail.com', resourcesImage: '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'
+    },
+    {
+        TaskID: 6,
+        TaskName: 'Market research',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        EmailId: 'Vanjack@gmail.com',
+        subtasks: [
+            {
+                TaskID: 7,
+                TaskName: 'Demand analysis',
+                StartDate: new Date('04/04/2019'),
+                EndDate: new Date('04/21/2019'),
+                EmailId: 'RoseFuller@gmail.com',
+                subtasks: [
+                    {
+                        TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'),
+                        Duration: 4, Predecessor: '5', Progress: 30, resources: [7], EmailId: 'Fullerbuchanan@gmail.com', resourcesImage: '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'
+                    },
+                ]
+            }
+        ]
+    }
+];
+let editingData = [
+    {
+        TaskID: 1,
+        TaskName: 'Project initiation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        subtasks: [
+            {
+                TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('04/02/2019'), Duration: 0,
+                Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
+            },
+            {
+                TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',
+                resources: [2, 3, 5], info: 'Obtain an engineered soil test of lot where construction is planned.' +
+                    'From an engineer or company specializing in soil testing'
+            },
+            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 30 },
+        ]
+    },
+    {
+        TaskID: 5,
+        TaskName: 'Project estimation',
+        StartDate: new Date('04/02/2019'),
+        EndDate: new Date('04/21/2019'),
+        subtasks: [
+            {
+                TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'),
+                Duration: 3, Predecessor: '4', Progress: 30, resources: 4,
+                info: 'Develop floor plans and obtain a materials list for estimations'
+            },
+            {
+                TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
+                Duration: 3, Predecessor: '6', resources: [4, 8], info: ''
+            },
+        ]
+    }
 ];
-
-var editingResources = [
-    { ResourceId: 1, ResourceName: 'Martin Tamer' },
-    { ResourceId: 2, ResourceName: 'Rose Fuller' },
-    { ResourceId: 3, ResourceName: 'Margaret Buchanan' },
-    { ResourceId: 4, ResourceName: 'Fuller King' },
-    { ResourceId: 5, ResourceName: 'Davolio Fuller' },
-    { ResourceId: 6, ResourceName: 'Van Jack' },
-    { ResourceId: 7, ResourceName: 'Fuller Buchanan' },
-    { ResourceId: 8, ResourceName: 'Jack Davolio' },
-    { ResourceId: 9, ResourceName: 'Tamer Vinet' },
-    { ResourceId: 10, ResourceName: 'Vinet Fuller' },
-    { ResourceId: 11, ResourceName: 'Bergs Anton' },
-    { ResourceId: 12, ResourceName: 'Construction Supervisor' }
-];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/index.js
index b4e2505e0..7263c5f0b 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/index.js
@@ -1,71 +1,61 @@
-var clickHandler = function (args) {
-    if (args.item.id === 'GanttExport_pdfexport') {
-        var exportProperties = {
-            enableFooter: false
-        };
-        ganttChart.pdfExport(exportProperties);
-    }
-};
-var pdfQueryTaskbarInfo =  function(args){
-    args.labelSettings.leftLabel.value = args.data.ganttProperties.taskName + '[' + args.data.ganttProperties.progress + ']';
-    if (args.data.ganttProperties.resourceNames) {
-        args.labelSettings.rightLabel.value = args.data.ganttProperties.resourceNames;
-        args.labelSettings.rightLabel.image = [{
-            base64: args.data.taskData.resourcesImage, width: 20, height: 20
-        }];
-    }
-    args.labelSettings.taskLabel.value = args.data.ganttProperties.progress + '%';
-}
-window.getResourceElements = function (value) {
-    var out = "";
-    var img = document.createElement('img');
-    img.height = 20;
-    var span = document.createElement('span');
-    span.style.marginLeft = "5px";
-    span.style.marginRight = "5px";
-    for (var index = 0; index < value.length; index++) {
-        img.src = 'https://ej2.syncfusion.com/demos/src/gantt/images/' + value[index].resourceName + '.png';
-        span.innerHTML = value[index].resourceName;
-        out = out + img.outerHTML + span.outerHTML;
-    }
-    return out;
-};
 var ganttChart = new ej.gantt.Gantt({
-    dataSource: GanttData,
+    id: 'Gantt',
+    dataSource: base64Data,
     height: '450px',
-    rowHeight: 55,
-    taskbarHeight: 45,
+    rowHeight: 60,
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
         startDate: 'StartDate',
-        endDate: 'EndDate',
         duration: 'Duration',
         progress: 'Progress',
-        resourceInfo: 'resources',
-        dependency: 'Predecessor',
-        child: 'subtasks'
+        child: 'subtasks',
+        resourceInfo: 'resources'
     },
-    allowPdfExport: true,
-    columns: [
-        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left' },
-        { field: 'TaskName', headerText: 'Task Name', width: '250' },
-    ],
-    pdfQueryTaskbarInfo: pdfQueryTaskbarInfo,
-    toolbar: ['PdfExport'],
-    toolbarClick: clickHandler,
     resources: editingResources,
     resourceFields: {
         id: 'resourceId',
         name: 'resourceName'
     },
+    projectStartDate: new Date('03/24/2019'),
+    projectEndDate: new Date('04/30/2019'),
+    splitterSettings: {
+        columnIndex: 2
+    },
     labelSettings: {
-        leftLabel: '#leftLabel',
-        rightLabel: '#rightLabel',
+        leftLabel: '${TaskName} [ ${Progress}% ]',
+        rightLabel: '${resourceNames}',
         taskLabel: '${Progress}%'
     },
-    projectStartDate: new Date('03/24/2019'),
-    projectEndDate: new Date('04/30/2019'),
+    toolbar: ['PdfExport'],
+    allowPdfExport: true,
+    columns: [
+        { field: 'TaskID' },
+        { field: 'TaskName' }
+    ],
+    toolbarClick: function (args) {
+        if (args.item && args.item.id === 'GanttExport_pdfexport') {
+            ganttChart.pdfExport({ enableFooter: false });
+        }
+    },
+    pdfQueryTaskbarInfo: function (args) {
+        var gp = args.data && args.data.ganttProperties ? args.data.ganttProperties : null;
+
+        if (args.labelSettings && gp) {
+            args.labelSettings.leftLabel.value = gp.taskName + '[' + gp.progress + ']';
+
+            if (gp.resourceNames) {
+                args.labelSettings.rightLabel.value = gp.resourceNames;
+                args.labelSettings.rightLabel.image = [{
+                    base64: args.data.taskData.resourcesImage,
+                    width: 20,
+                    height: 20
+                }];
+            }
+
+            args.labelSettings.taskLabel.value = gp.progress + '%';
+        }
+    }
 });
-ganttChart.appendTo('#GanttExport');
 
+ganttChart.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/index.ts
index 399473321..20cf943ee 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/index.ts
@@ -1,78 +1,74 @@
-import { Gantt, Toolbar, PdfExport, Selection, PdfExportProperties } from '@syncfusion/ej2-gantt';
-import { GanttData,editingResources } from './datasource.ts';
-import { PdfColor } from '@syncfusion/ej2-pdf-export';
-import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
+import {
+    Gantt,
+    Toolbar,
+    PdfExport,
+    Selection,
+    PdfExportProperties,
+    PdfQueryTaskbarInfoEventArgs
+} from '@syncfusion/ej2-gantt';
+import { base64Data, editingResources } from './datasource.ts';
 
 Gantt.Inject(Toolbar, PdfExport, Selection);
 
-let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
-    if (args.item.id === 'GanttExport_pdfexport') {
-        let exportProperties: PdfExportProperties = {
-            enableFooter: false
-        };
-        gantt.pdfExport(exportProperties);
-    }
-};
-let pdfQueryTaskbarInfo: EmitType<Object> = (args: Object) => {
-    args.labelSettings.leftLabel.value = args.data.ganttProperties.taskName + '[' + args.data.ganttProperties.progress + ']';
-        if (args.data.ganttProperties.resourceNames) {
-            args.labelSettings.rightLabel.value = args.data.ganttProperties.resourceNames;
-            args.labelSettings.rightLabel.image = [{
-                    base64: args.data.taskData.ResourcesImage, width: 20, height: 20
-                }];
-        }
-        args.labelSettings.taskLabel.value = args.data.ganttProperties.progress + '%';
-}
-(<{ getResourceElements?: Function }>window).getResourceElements = (value: any) => {
-    let out: string = '';
-    let img: HTMLImageElement = document.createElement('img');
-    img.height = 20;
-    let span: HTMLElement = document.createElement('span');
-    span.style.marginLeft = '5px';
-    span.style.marginRight = '5px';
-    for (let index: number = 0; index < value.length; index++) {
-        img.src = 'https://ej2.syncfusion.com/demos/src/gantt/images/' + value[index].ResourceName + '.png';
-        span.innerHTML = value[index].ResourceName;
-        out = out + img.outerHTML + span.outerHTML;
-    }
-    return out;
-};
-
 let gantt: Gantt = new Gantt({
-    dataSource: GanttData,
+    id: 'Gantt',
+    dataSource: base64Data,
     height: '450px',
-    rowHeight: 55,
-    taskbarHeight: 45,
+    rowHeight: 60,
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
         startDate: 'StartDate',
-        endDate: 'EndDate',
-        progress: 'Progress',
         duration: 'Duration',
-        resourceInfo: 'Resources',
-        dependency: 'Predecessor',
-        parentID: 'ParentID',
-    },
-    columns: [
-        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left' },
-        { field: 'TaskName', headerText: 'Task Name', width: '250' },
-    ],
-    pdfQueryTaskbarInfo: pdfQueryTaskbarInfo,
-    allowPdfExport: true,
-    toolbar: ['PdfExport'],
-    labelSettings: {
-        leftLabel: '#leftLabel',
-        rightLabel: '#rightLabel',
-        taskLabel: '${Progress}%'
+        progress: 'Progress',
+        child: 'subtasks',
+        resourceInfo: 'resources'
     },
-    toolbarClick: clickHandler,
     resources: editingResources,
     resourceFields: {
-        id: 'ResourceId',
-        name: 'ResourceName'
+        id: 'resourceId',
+        name: 'resourceName'
     },
     projectStartDate: new Date('03/24/2019'),
     projectEndDate: new Date('04/30/2019'),
+    splitterSettings: {
+        columnIndex: 2
+    },
+    labelSettings: {
+        leftLabel: '${TaskName} [ ${Progress}% ]',
+        rightLabel: '${resourceNames}',
+        taskLabel: '${Progress}%'
+    },
+    toolbar: ['PdfExport'],
+    allowPdfExport: true,
+    columns: [
+        { field: 'TaskID' },
+        { field: 'TaskName' }
+    ],
+    toolbarClick: (args: any) => {
+        if (args.item.id === 'GanttExport_pdfexport') {
+            const exportProps: PdfExportProperties = { enableFooter: false };
+            gantt.pdfExport(exportProps);
+        }
+    },
+    pdfQueryTaskbarInfo: (args: PdfQueryTaskbarInfoEventArgs) => {
+        const gp: any = (args.data as any).ganttProperties;
+
+        if (args.labelSettings && gp) {
+            args.labelSettings.leftLabel.value = `${gp.taskName}[${gp.progress}]`;
+
+            if (gp.resourceNames) {
+                args.labelSettings.rightLabel.value = gp.resourceNames;
+                args.labelSettings.rightLabel.image = [{
+                    base64: (args.data as any).taskData.resourcesImage,
+                    width: 20,
+                    height: 20
+                }];
+            }
+
+            args.labelSettings.taskLabel.value = `${gp.progress}%`;
+        }
+    }
 });
+
 gantt.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/js/index.html
index d9961624e..1d8bbfb8b 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-export-tasklabel-template-cs1/js/index.html
@@ -23,7 +23,7 @@
     </div>
 </script>
 
-<script type="text/x-template" id="rightLabel">
+  <script type="text/x-template" id="rightLabel">
     <div style="margin-top=-7px;">
     ${if(ganttProperties.resourceInfo)}
     <div id = "rightLabel">
diff --git a/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/datasource.ts b/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/datasource.ts
index 91a683efb..dafccb588 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/datasource.ts
@@ -1,12 +1,12 @@
-export let FirstGanttData: Object[]  = [
+export let FirstGanttData: Object[] = [
     { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
     { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 10, ParentID: 1 },
     { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
     { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: "6SS", Progress: 70, ParentID: 5 }
 ];
 
 export let SecondGanttData: object[] = [
diff --git a/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/es5-datasource.js
index 67c24ef18..7ebd46130 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/es5-datasource.js
@@ -2,11 +2,11 @@ var FirstGanttData = [
     { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
     { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 10, ParentID: 1 },
     { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
     { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
     { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: "6SS", Progress: 70, ParentID: 5 }
 ];
 
 var SecondGanttData = [
diff --git a/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/index.js b/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/index.js
index 15e26b9be..4d72d3f00 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/index.js
@@ -13,7 +13,7 @@ var firstGantt = new ej.gantt.Gantt({
     toolbar: ['PdfExport'],
     projectStartDate: new Date('03/31/2019'),
     projectEndDate: new Date('04/14/2019'),
-    height:280,	
+    height: 280,
 });
 firstGantt.appendTo('#GanttExport1');
 
@@ -29,16 +29,16 @@ var secondGantt = new ej.gantt.Gantt({
     },
     treeColumnIndex: 1,
     allowPdfExport: true,
-    height:250,
+    height: 250,
 });
 secondGantt.appendTo('#GanttExport2');
 
-firstGantt.toolbarClick = function(args) {
+firstGantt.toolbarClick = function (args) {
     if (args.item.id === 'GanttExport1_pdfexport') {
-        
-        var firstGanttPdfExport= firstGantt.pdfExport({}, true);
-        firstGanttPdfExport.then(function(pdfData){
-              secondGantt.pdfExport({}, false, pdfData);
+
+        var firstGanttPdfExport = firstGantt.pdfExport({}, true);
+        firstGanttPdfExport.then(function (pdfData) {
+            secondGantt.pdfExport({}, false, pdfData);
         });
     }
 }
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/index.ts b/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/index.ts
index 828276c73..52d01692a 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/index.ts
@@ -1,4 +1,4 @@
-import { Gantt, Toolbar,PdfExport, Selection } from '@syncfusion/ej2-gantt';
+import { Gantt, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-gantt';
 import { FirstGanttData, SecondGanttData } from './datasource.ts';
 
 Gantt.Inject(Toolbar, PdfExport, Selection);
@@ -23,7 +23,7 @@ let firstGantt: Gantt = new Gantt({
 firstGantt.appendTo('#GanttExport1');
 
 let secondGantt: Gantt = new Gantt({
-    dataSource: SecondGanttData,  
+    dataSource: SecondGanttData,
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
@@ -41,7 +41,7 @@ secondGantt.appendTo('#GanttExport2');
 firstGantt.toolbarClick = (args: Object) => {
     if (args.item.id === 'GanttExport1_pdfexport') {
         let firstGanttPdfExport: Promise<Object> = firstGantt.pdfExport({}, true);
-        firstGanttPdfExport.then(function(pdfData){
+        firstGanttPdfExport.then(function (pdfData) {
             secondGantt.pdfExport({}, false, pdfData);
         });
     }
diff --git a/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/js/index.html
index 2d85bd154..746988a27 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/js/index.html
@@ -1,28 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-            <div id="GanttExport1"></div>     
-            <div id="GanttExport2" style="margin-top:10px"></div>		
-        </div>	
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="GanttExport1"></div>
+        <div id="GanttExport2" style="margin-top:10px"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/systemjs.config.js b/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/systemjs.config.js
index f91edce14..8e1726657 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/systemjs.config.js
+++ b/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/systemjs.config.js
@@ -21,25 +21,25 @@ System.config({
         "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
         "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
         "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
-		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
-        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
         "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
         "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
         "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
         "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
         "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
-        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
-		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
         "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
         "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
-		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
         "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
         "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
         "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
         "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
         "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
         "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
-        
+
     }
 });
 
diff --git a/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/ts/index.html
index b156fb2fb..dcf200912 100644
--- a/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/pdf-multiple-export-cs1/ts/index.html
@@ -8,7 +8,7 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
@@ -16,9 +16,9 @@
 <body>
     <div id='loader'>Loading....</div>
     <div id='container'>
-        <div id='GanttExport1'></div>     
-        <div id='GanttExport2' style='margin-top:10px'></div>		
-    </div>	
+        <div id='GanttExport1'></div>
+        <div id='GanttExport2' style='margin-top:10px'></div>
+    </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/row-show-hide/index.ts b/ej2-javascript/code-snippet/gantt/row-show-hide/index.ts
index da4c99967..063cd7bfd 100644
--- a/ej2-javascript/code-snippet/gantt/row-show-hide/index.ts
+++ b/ej2-javascript/code-snippet/gantt/row-show-hide/index.ts
@@ -40,7 +40,7 @@ let hiddenRowIndexes: number[] = [];
 let checkbox: CheckBox = new CheckBox({ label: 'Small', cssClass: 'e-small', change: onCheckBoxChange });
 checkbox.appendTo('#toggleRows');
 
-function onCheckBoxChange(args: CheckBoxChangeEventArgs): void {debugger
+function onCheckBoxChange(args: CheckBoxChangeEventArgs): void {
   if (!gantt || !gantt.treeGrid || !gantt.treeGrid.grid) return;
 
   const rowsObj = gantt.treeGrid.grid.getRowsObject();
diff --git a/ej2-javascript/code-snippet/gantt/scroll-top-cs1/datasource.ts b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/datasource.ts
new file mode 100644
index 000000000..584f49f18
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/datasource.ts
@@ -0,0 +1,30 @@
+export let GanttData: Object[] = [
+    { TaskID: 1, TaskName: 'Project initiation', StartDate: new Date('03/29/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('03/29/2019'), Duration: 2, Progress: 30, work: 10, resources: [1], ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('03/29/2019'), Duration: 4, Progress: 30, work: 20, resources: [{resourceId: 2, resourceUnit: 70}, {resourceId: 1, resourceUnit: 70}], ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('03/29/2019'), Duration: 1, Progress: 30, work: 10, resources: [{resourceId: 3, resourceUnit: 25}, {resourceId: 1, resourceUnit: 75}], ParentID: 1 },
+
+    { TaskID: 5, TaskName: 'Project estimation', StartDate: new Date('03/29/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('03/29/2019'), Duration: 3, Progress: 30, work: 30, resources: [{resourceId: 4, resourceUnit: 50}, {resourceId: 2, resourceUnit: 70}], ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/01/2019'), Duration: 3, Progress: 30, work: 40, resources: [{resourceId: 6, resourceUnit: 40}], ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/01/2019'), Duration: 2, Progress: 30, work: 60, resources: [{resourceId: 5, resourceUnit: 75}], ParentID: 5 },
+
+    { TaskID: 9, TaskName: 'Sign contract', StartDate: new Date('04/01/2019'), Duration: 1, Progress: 30 },
+
+    { TaskID: 10, TaskName: 'Develop floor plan for estimation', StartDate: new Date('03/29/2019'), Duration: 3, Progress: 30, work: 30, resources: [{resourceId: 4, resourceUnit: 50}, {resourceId: 2, resourceUnit: 70}] },
+    { TaskID: 11, TaskName: 'List materials', StartDate: new Date('04/01/2019'), Duration: 3, Progress: 30, work: 40, resources: [{resourceId: 6, resourceUnit: 40}] },
+    { TaskID: 12, TaskName: 'Estimation approval', StartDate: new Date('04/01/2019'), Duration: 2, Progress: 30, work: 60, resources: [{resourceId: 5, resourceUnit: 75}] },
+
+    { TaskID: 13, TaskName: 'Develop floor plan for estimation', StartDate: new Date('03/29/2019'), Duration: 3, Progress: 30, work: 30, resources: [{resourceId: 4, resourceUnit: 50}, {resourceId: 2, resourceUnit: 70}] },
+    { TaskID: 14, TaskName: 'List materials', StartDate: new Date('04/01/2019'), Duration: 3, Progress: 30, work: 40, resources: [{resourceId: 6, resourceUnit: 40}] },
+    { TaskID: 15, TaskName: 'Estimation approval', StartDate: new Date('04/01/2019'), Duration: 2, Progress: 30, work: 60, resources: [{resourceId: 5, resourceUnit: 75}] }
+];
+
+export let ProjectResources: object[] =  [
+    { resourceId: 1, resourceName: 'Martin Tamer', resourceGroup: 'Planning Team', resourceUnit: 50},
+    { resourceId: 2, resourceName: 'Rose Fuller', resourceGroup: 'Testing Team', resourceUnit: 70 },
+    { resourceId: 3, resourceName: 'Margaret Buchanan', resourceGroup: 'Approval Team' },
+    { resourceId: 4, resourceName: 'Fuller King', resourceGroup: 'Development Team' },
+    { resourceId: 5, resourceName: 'Davolio Fuller', resourceGroup: 'Approval Team' },
+    { resourceId: 6, resourceName: 'Van Jack', resourceGroup: 'Development Team', resourceUnit: 40  },
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/scroll-top-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/es5-datasource.js
new file mode 100644
index 000000000..84cec3d91
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/es5-datasource.js
@@ -0,0 +1,30 @@
+var GanttData = [
+    { TaskID: 1, TaskName: 'Project initiation', StartDate: new Date('03/29/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('03/29/2019'), Duration: 2, Progress: 30, work: 10, resources: [1], ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('03/29/2019'), Duration: 4, Progress: 30, work: 20, resources: [{resourceId: 2, resourceUnit: 70}, {resourceId: 1, resourceUnit: 70}], ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('03/29/2019'), Duration: 1, Progress: 30, work: 10, resources: [{resourceId: 3, resourceUnit: 25}, {resourceId: 1, resourceUnit: 75}], ParentID: 1 },
+
+    { TaskID: 5, TaskName: 'Project estimation', StartDate: new Date('03/29/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('03/29/2019'), Duration: 3, Progress: 30, work: 30, resources: [{resourceId: 4, resourceUnit: 50}, {resourceId: 2, resourceUnit: 70}], ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/01/2019'), Duration: 3, Progress: 30, work: 40, resources: [{resourceId: 6, resourceUnit: 40}], ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/01/2019'), Duration: 2, Progress: 30, work: 60, resources: [{resourceId: 5, resourceUnit: 75}], ParentID: 5 },
+
+    { TaskID: 9, TaskName: 'Sign contract', StartDate: new Date('04/01/2019'), Duration: 1, Progress: 30 },
+
+    { TaskID: 10, TaskName: 'Develop floor plan for estimation', StartDate: new Date('03/29/2019'), Duration: 3, Progress: 30, work: 30, resources: [{resourceId: 4, resourceUnit: 50}, {resourceId: 2, resourceUnit: 70}] },
+    { TaskID: 11, TaskName: 'List materials', StartDate: new Date('04/01/2019'), Duration: 3, Progress: 30, work: 40, resources: [{resourceId: 6, resourceUnit: 40}] },
+    { TaskID: 12, TaskName: 'Estimation approval', StartDate: new Date('04/01/2019'), Duration: 2, Progress: 30, work: 60, resources: [{resourceId: 5, resourceUnit: 75}] },
+
+    { TaskID: 13, TaskName: 'Develop floor plan for estimation', StartDate: new Date('03/29/2019'), Duration: 3, Progress: 30, work: 30, resources: [{resourceId: 4, resourceUnit: 50}, {resourceId: 2, resourceUnit: 70}] },
+    { TaskID: 14, TaskName: 'List materials', StartDate: new Date('04/01/2019'), Duration: 3, Progress: 30, work: 40, resources: [{resourceId: 6, resourceUnit: 40}] },
+    { TaskID: 15, TaskName: 'Estimation approval', StartDate: new Date('04/01/2019'), Duration: 2, Progress: 30, work: 60, resources: [{resourceId: 5, resourceUnit: 75}] }
+];
+
+var ProjectResources =  [
+    { resourceId: 1, resourceName: 'Martin Tamer', resourceGroup: 'Planning Team', resourceUnit: 50},
+    { resourceId: 2, resourceName: 'Rose Fuller', resourceGroup: 'Testing Team', resourceUnit: 70 },
+    { resourceId: 3, resourceName: 'Margaret Buchanan', resourceGroup: 'Approval Team' },
+    { resourceId: 4, resourceName: 'Fuller King', resourceGroup: 'Development Team' },
+    { resourceId: 5, resourceName: 'Davolio Fuller', resourceGroup: 'Approval Team' },
+    { resourceId: 6, resourceName: 'Van Jack', resourceGroup: 'Development Team', resourceUnit: 40  },
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/scroll-top-cs1/index.css b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/index.css
new file mode 100644
index 000000000..0fba63172
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/index.css
@@ -0,0 +1,14 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/scroll-top-cs1/index.js b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/index.js
new file mode 100644
index 000000000..c18ee010c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/index.js
@@ -0,0 +1,23 @@
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '430px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    splitterSettings: {
+        position: '50%'
+    }
+});
+ganttChart.appendTo('#Gantt');
+
+var scrollBtn = new ej.buttons.Button();
+scrollBtn.appendTo('#scrolltop');
+
+document.getElementById('scrolltop').addEventListener('click', function () {
+    ganttChart.ganttChartModule.scrollObject.setScrollTop(200);
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/scroll-top-cs1/index.ts b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/index.ts
new file mode 100644
index 000000000..b3e66fade
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/index.ts
@@ -0,0 +1,28 @@
+import { Gantt } from '@syncfusion/ej2-gantt';
+import { Button } from '@syncfusion/ej2-buttons';
+import { GanttData } from './datasource.ts';
+
+let gantt: Gantt = new Gantt({
+    dataSource: GanttData,
+    height: '430px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    splitterSettings: {
+        position: '50%'
+    }
+});
+
+gantt.appendTo('#Gantt');
+
+let scrollBtn: Button = new Button();
+scrollBtn.appendTo('#scrolltop');
+
+document.getElementById('scrolltop')!.addEventListener('click', () => {
+    gantt.ganttChartModule.scrollObject.setScrollTop(200);
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/scroll-top-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/js/index.html
new file mode 100644
index 000000000..85e38ee57
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/js/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <button id="scrolltop">Set Scroll Top</button>
+        <br><br>
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/scroll-top-cs1/systemjs.config.js b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/scroll-top-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/ts/index.html
new file mode 100644
index 000000000..43b933840
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/scroll-top-cs1/ts/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <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='container'>
+        <button id="scrolltop">Set Scroll Top</button>
+        <br><br>
+        <div id='Gantt'></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs1/index.js b/ej2-javascript/code-snippet/gantt/searching-cs1/index.js
index bacfecd15..cf3101abc 100644
--- a/ej2-javascript/code-snippet/gantt/searching-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/searching-cs1/index.js
@@ -1,16 +1,18 @@
-ej.gantt.Gantt.Inject(ej.gantt.Filter, ej.gantt.Toolbar);
+var gantt = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    splitterSettings: {
+        columnIndex: 3
+    },
+    toolbar: ['Search']
+});
 
-var ganttChart = new ej.gantt.Gantt({
-         dataSource: GanttData,
-		 height:'450px',
-		 taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-            duration: 'Duration',
-            progress: 'Progress',
-            parentID: 'ParentID'
-        },
-		toolbar: ['Search']
-    });
-ganttChart.appendTo('#Gantt');
\ No newline at end of file
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs1/index.ts b/ej2-javascript/code-snippet/gantt/searching-cs1/index.ts
index bf7d322e2..4be5a594e 100644
--- a/ej2-javascript/code-snippet/gantt/searching-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/searching-cs1/index.ts
@@ -1,6 +1,5 @@
 import { Gantt, Filter, Toolbar } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
-
 Gantt.Inject(Filter, Toolbar);
 
 let gantt: Gantt = new Gantt({
@@ -14,6 +13,9 @@ let gantt: Gantt = new Gantt({
         progress: 'Progress',
         parentID: 'ParentID'
     },
+    splitterSettings: {
+        columnIndex: 3
+    },
     toolbar: ['Search']
 });
 gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs2/datasource.ts b/ej2-javascript/code-snippet/gantt/searching-cs2/datasource.ts
index 6d5a0da32..363905421 100644
--- a/ej2-javascript/code-snippet/gantt/searching-cs2/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/searching-cs2/datasource.ts
@@ -1,10 +1,14 @@
-export let GanttData: Object[]  = [
-    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
-    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
-    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
-    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+export const data: object[] = [
+    { TaskID: 1, TaskName: 'Pröduct Concept', StartDate: new Date('2019-04-02'), EndDate: new Date('2019-04-21') },
+    { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('2019-04-02'), Duration: 3, Progress: 30, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('2019-04-02'), Duration: 3, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Prepare pröduct skëtch and notes', StartDate: new Date('2019-04-02'), Duration: 2, Predecessor: '2', Progress: 30, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Concept Approval', StartDate: new Date('2019-04-02'), Duration: 0, Predecessor: '3,4', Indicators: [{ date: '2019-04-10', name: '#briefing', title: 'Product concept breifing' }] },
+    { TaskID: 6, TaskName: 'Market Research', StartDate: new Date('2019-04-02'), EndDate: new Date('2019-04-21') },
+    { TaskID: 7, TaskName: 'Demand Analysis', StartDate: new Date('2019-04-04'), EndDate: new Date('2019-04-21'), ParentID: 6 },
+    { TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '5', Progress: 30, ParentID: 7 },
+    { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '5', ParentID: 7 },
+    { TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '7, 8', Progress: 30, ParentID: 6 },
+    { TaskID: 11, TaskName: 'Product strength ànalsysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '9', ParentID: 6 },
+    { TaskID: 12, TaskName: 'Resëarch complete', StartDate: new Date('2019-04-04'), Duration: 0, Predecessor: '10', Indicators: [{ date: '2019-04-20', name: '#meeting', title: '1st board of directors meeting' }], ParentID: 6 }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs2/es5-datasource.js b/ej2-javascript/code-snippet/gantt/searching-cs2/es5-datasource.js
index 0ee8ab55d..ed13c8d23 100644
--- a/ej2-javascript/code-snippet/gantt/searching-cs2/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/searching-cs2/es5-datasource.js
@@ -1,10 +1,14 @@
-var GanttData = [
-    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
-    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
-    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
-    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
-    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+const data = [
+    { TaskID: 1, TaskName: 'Pröduct Concept', StartDate: new Date('2019-04-02'), EndDate: new Date('2019-04-21') },
+    { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('2019-04-02'), Duration: 3, Progress: 30, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('2019-04-02'), Duration: 3, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Prepare pröduct skëtch and notes', StartDate: new Date('2019-04-02'), Duration: 2, Predecessor: '2', Progress: 30, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Concept Approval', StartDate: new Date('2019-04-02'), Duration: 0, Predecessor: '3,4', Indicators: [{ date: '2019-04-10', name: '#briefing', title: 'Product concept breifing' }] },
+    { TaskID: 6, TaskName: 'Market Research', StartDate: new Date('2019-04-02'), EndDate: new Date('2019-04-21') },
+    { TaskID: 7, TaskName: 'Demand Analysis', StartDate: new Date('2019-04-04'), EndDate: new Date('2019-04-21'), ParentID: 6 },
+    { TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '5', Progress: 30, ParentID: 7 },
+    { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '5', ParentID: 7 },
+    { TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '7, 8', Progress: 30, ParentID: 6 },
+    { TaskID: 11, TaskName: 'Product strength ànalsysis', StartDate: new Date('2019-04-04'), Duration: 4, Predecessor: '9', ParentID: 6 },
+    { TaskID: 12, TaskName: 'Resëarch complete', StartDate: new Date('2019-04-04'), Duration: 0, Predecessor: '10', Indicators: [{ date: '2019-04-20', name: '#meeting', title: '1st board of directors meeting' }], ParentID: 6 }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs2/index.js b/ej2-javascript/code-snippet/gantt/searching-cs2/index.js
index 8243efa10..1240058c9 100644
--- a/ej2-javascript/code-snippet/gantt/searching-cs2/index.js
+++ b/ej2-javascript/code-snippet/gantt/searching-cs2/index.js
@@ -1,17 +1,31 @@
-ej.gantt.Gantt.Inject(ej.gantt.Filter, ej.gantt.Toolbar);
-
 var ganttChart = new ej.gantt.Gantt({
-         dataSource: GanttData,
-		 height:'450px',
-		 taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-            duration: 'Duration',
-            progress: 'Progress',
-            parentID: 'ParentID'
-        },
-		toolbar: ['Search'],
-		searchSettings: { fields: ['TaskName'], operator: 'contains', key: 'List', ignoreCase: true }
+    dataSource: data,
+    height: '370px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    splitterSettings: {
+        columnIndex: 3
+    },
+    searchSettings: {
+        fields: ['TaskName'],
+        operator: 'contains',
+        key: 'Pröduct',
+        ignoreCase: true,
+        ignoreAccent: true
+    },
+    toolbar: ['Search'],
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ]
 });
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs2/index.ts b/ej2-javascript/code-snippet/gantt/searching-cs2/index.ts
index 4d8c305d8..40e463d83 100644
--- a/ej2-javascript/code-snippet/gantt/searching-cs2/index.ts
+++ b/ej2-javascript/code-snippet/gantt/searching-cs2/index.ts
@@ -1,20 +1,45 @@
-import { Gantt, Filter, Toolbar } from '@syncfusion/ej2-gantt';
-import { GanttData } from './datasource.ts';
+import { Gantt, Filter, Toolbar, TaskFieldsModel, SplitterSettingsModel, SearchSettingsModel, ColumnModel } from '@syncfusion/ej2-gantt';
+import { data } from './datasource.ts';
 
 Gantt.Inject(Filter, Toolbar);
 
+const taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+const splitterSettings: SplitterSettingsModel = {
+    columnIndex: 3
+};
+
+const searchSettings: SearchSettingsModel = {
+    fields: ['TaskName'],
+    operator: 'contains',
+    key: 'Pröduct',
+    ignoreCase: true,
+    ignoreAccent: true
+};
+
+const columns: ColumnModel[] = [
+    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+    { field: 'TaskName', headerText: 'Task Name', width: 250 },
+    { field: 'StartDate', headerText: 'Start Date', width: 150 },
+    { field: 'Duration', headerText: 'Duration', width: 150 },
+    { field: 'Progress', headerText: 'Progress', width: 150 }
+];
+
 let gantt: Gantt = new Gantt({
-    dataSource: GanttData,
-    height: '450px',
-    taskFields: {
-        id: 'TaskID',
-        name: 'TaskName',
-        startDate: 'StartDate',
-        duration: 'Duration',
-        progress: 'Progress',
-        parentID: 'ParentID'
-    },
+    dataSource: data,
+    height: '370px',
+    taskFields: taskFields,
+    splitterSettings: splitterSettings,
+    searchSettings: searchSettings,
     toolbar: ['Search'],
-    searchSettings: { fields: ['TaskName'], operator: 'contains', key: 'List', ignoreCase: true }
+    columns: columns
 });
+
 gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs4/datasource.ts b/ej2-javascript/code-snippet/gantt/searching-cs4/datasource.ts
new file mode 100644
index 000000000..6d5a0da32
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs4/datasource.ts
@@ -0,0 +1,10 @@
+export let GanttData: Object[]  = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs4/es5-datasource.js b/ej2-javascript/code-snippet/gantt/searching-cs4/es5-datasource.js
new file mode 100644
index 000000000..0ee8ab55d
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs4/es5-datasource.js
@@ -0,0 +1,10 @@
+var GanttData = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs4/index.css b/ej2-javascript/code-snippet/gantt/searching-cs4/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs4/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs4/index.js b/ej2-javascript/code-snippet/gantt/searching-cs4/index.js
new file mode 100644
index 000000000..2c3219505
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs4/index.js
@@ -0,0 +1,33 @@
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    splitterSettings: {
+        columnIndex: 3
+    },
+    toolbar: ['Search'],
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 400 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ],
+    created: function () {
+        var id = ganttChart.element.id + '_searchbar';
+        var element = document.getElementById(id);
+        if (element) {
+            element.addEventListener('keyup', function (event) {
+                ganttChart.search(event.target.value);
+            });
+        }
+    }
+});
+ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs4/index.ts b/ej2-javascript/code-snippet/gantt/searching-cs4/index.ts
new file mode 100644
index 000000000..50ea667e6
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs4/index.ts
@@ -0,0 +1,46 @@
+import { Gantt, Filter, Toolbar, TaskFieldsModel, SplitterSettingsModel, ColumnModel } from '@syncfusion/ej2-gantt';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Filter, Toolbar);
+
+const taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+const splitterSettings: SplitterSettingsModel = {
+    columnIndex: 3
+};
+
+const columns: ColumnModel[] = [
+    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+    { field: 'TaskName', headerText: 'Task Name', width: 400 },
+    { field: 'StartDate', headerText: 'Start Date', width: 150 },
+    { field: 'Duration', headerText: 'Duration', width: 150 },
+    { field: 'Progress', headerText: 'Progress', width: 150 }
+];
+
+let gantt: Gantt = new Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    taskFields: taskFields,
+    splitterSettings: splitterSettings,
+    toolbar: ['Search'],
+    columns: columns,
+    created: () => {
+        const id: string = gantt.element.id + '_searchbar';
+        const element: HTMLElement | null = document.getElementById(id);
+        if (element) {
+            element.addEventListener('keyup', (event: Event) => {
+                const target = event.target as HTMLInputElement;
+                gantt.search(target.value);
+            });
+        }
+    }
+});
+
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs4/js/index.html b/ej2-javascript/code-snippet/gantt/searching-cs4/js/index.html
new file mode 100644
index 000000000..2f8e46498
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs4/js/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>EJ2 Gantt</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Typescript Gantt Controls">
+        <meta name="author" content="Syncfusion">
+        <link href="index.css" rel="stylesheet">
+        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+        <script src="es5-datasource.js" type="text/javascript"></script>
+    </head>
+
+    <body>
+        <div id="container">
+          <div id="Gantt"></div>
+        </div>
+        <script>
+            var ele = document.getElementById('container');
+            if(ele) {
+            ele.style.visibility = "visible";
+            }   
+        </script>
+        <script src="index.js" type="text/javascript"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs4/systemjs.config.js b/ej2-javascript/code-snippet/gantt/searching-cs4/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs4/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs4/ts/index.html b/ej2-javascript/code-snippet/gantt/searching-cs4/ts/index.html
new file mode 100644
index 000000000..291ea5956
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs4/ts/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <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='container'>
+        <div id='Gantt'></div>        
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs5/datasource.ts b/ej2-javascript/code-snippet/gantt/searching-cs5/datasource.ts
new file mode 100644
index 000000000..6d5a0da32
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs5/datasource.ts
@@ -0,0 +1,10 @@
+export let GanttData: Object[]  = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs5/es5-datasource.js b/ej2-javascript/code-snippet/gantt/searching-cs5/es5-datasource.js
new file mode 100644
index 000000000..0ee8ab55d
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs5/es5-datasource.js
@@ -0,0 +1,10 @@
+var GanttData = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 90, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 40, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 10, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 85, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 15, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3,Predecessor:"6SS", Progress: 70, ParentID: 5 }         
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs5/index.css b/ej2-javascript/code-snippet/gantt/searching-cs5/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs5/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs5/index.html b/ej2-javascript/code-snippet/gantt/searching-cs5/index.html
new file mode 100644
index 000000000..fb7ca8206
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs5/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+    <style>
+        .customcss {
+            background-color: yellow;
+            font-weight: bold;
+            color: black;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <div id='Gantt'></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs5/index.js b/ej2-javascript/code-snippet/gantt/searching-cs5/index.js
new file mode 100644
index 000000000..0867cb198
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs5/index.js
@@ -0,0 +1,47 @@
+var key = '';
+
+var ganttChart = new ej.gantt.Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    splitterSettings: {
+        columnIndex: 3
+    },
+    toolbar: ['Search'],
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 400 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 150 },
+        { field: 'Progress', headerText: 'Progress', width: 150 }
+    ],
+    actionBegin: function (args) {
+        if (args.requestType === 'searching') {
+            key = args.searchString ? args.searchString.toLowerCase() : '';
+        }
+    },
+    queryCellInfo: function (args) {
+        if (key) {
+            var field = args.column.field;
+            var value = args.data[field];
+
+            if (typeof value === 'string' || typeof value === 'number') {
+                var str = value.toString();
+                var regex = new RegExp(key, 'gi');
+                var highlighted = str.replace(regex, function (m) {
+                    return "<span class='customcss'>" + m + "</span>";
+                });
+                args.cell.innerHTML = highlighted;
+            }
+        }
+    }
+});
+
+ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs5/index.ts b/ej2-javascript/code-snippet/gantt/searching-cs5/index.ts
new file mode 100644
index 000000000..c73721711
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs5/index.ts
@@ -0,0 +1,58 @@
+import { Gantt, Filter, Toolbar, TaskFieldsModel, SplitterSettingsModel, ColumnModel } from '@syncfusion/ej2-gantt';
+import { GanttData } from './datasource.ts';
+
+Gantt.Inject(Filter, Toolbar);
+
+let key: string = '';
+
+const taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+const splitterSettings: SplitterSettingsModel = {
+    columnIndex: 3
+};
+
+const columns: ColumnModel[] = [
+    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
+    { field: 'TaskName', headerText: 'Task Name', width: 400 },
+    { field: 'StartDate', headerText: 'Start Date', width: 150 },
+    { field: 'Duration', headerText: 'Duration', width: 150 },
+    { field: 'Progress', headerText: 'Progress', width: 150 }
+];
+
+let gantt: Gantt = new Gantt({
+    dataSource: GanttData,
+    height: '370px',
+    taskFields: taskFields,
+    splitterSettings: splitterSettings,
+    toolbar: ['Search'],
+    columns: columns,
+    actionBegin: (args: any) => {
+        if (args.requestType === 'searching') {
+            key = args.searchString ? args.searchString.toLowerCase() : '';
+        }
+    },
+    queryCellInfo: (args: any) => {
+        if (key) {
+            const field: string = args.column.field;
+            const value: string | number = args.data[field];
+
+            if (typeof value === 'string' || typeof value === 'number') {
+                const str: string = value.toString();
+                const regex: RegExp = new RegExp(key, 'gi');
+                const highlighted: string = str.replace(regex, (m: string) =>
+                    `<span class='customcss'>${m}</span>`
+                );
+                args.cell.innerHTML = highlighted;
+            }
+        }
+    }
+});
+
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs5/js/index.html b/ej2-javascript/code-snippet/gantt/searching-cs5/js/index.html
new file mode 100644
index 000000000..4b73a4a2e
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs5/js/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+    <style>
+        .customcss {
+            background-color: yellow;
+            font-weight: bold;
+            color: black;
+        }
+    </style>
+
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/searching-cs5/systemjs.config.js b/ej2-javascript/code-snippet/gantt/searching-cs5/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/searching-cs5/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/single-page/index.js b/ej2-javascript/code-snippet/gantt/single-page/index.js
index 4098e3ca5..f1ef7c8cd 100644
--- a/ej2-javascript/code-snippet/gantt/single-page/index.js
+++ b/ej2-javascript/code-snippet/gantt/single-page/index.js
@@ -1,60 +1,60 @@
-var clickHandler = function(args){
-   if (args.item.id === 'GanttExport_pdfexport') {
-    var exportProperties = {
-        fitToWidthSettings: {       
-            isFitToWidth: true,       
-        }       
-    };
-    ganttChart.pdfExport(exportProperties);
-   }
+var clickHandler = function (args) {
+    if (args.item.id === 'GanttExport_pdfexport') {
+        var exportProperties = {
+            fitToWidthSettings: {
+                isFitToWidth: true,
+            }
+        };
+        ganttChart.pdfExport(exportProperties);
+    }
 };
 
 var ganttChart = new ej.gantt.Gantt({
     dataSource: GanttData,
-            dateFormat: 'MMM dd, y',
-            taskFields: {
-                id: 'TaskID',
-                name: 'TaskName',
-                startDate: 'StartDate',
-                endDate: 'EndDate',
-                duration: 'Duration',
-                progress: 'Progress',
-                dependency: 'Predecessor',
-                parentID: 'ParentID',
-            },
-            columns: [
-                { field: 'TaskID', width: 80 },
-                { field: 'TaskName', width: 250 },
-                { field: 'StartDate' },
-                { field: 'EndDate' },
-                { field: 'Duration' },
-                { field: 'Predecessor' },
-                { field: 'Progress' }
-            ],
-            splitterSettings: {
-                columnIndex: 2
-            },
-            allowPdfExport: true,
-            toolbar: ['PdfExport'],
-            toolbarClick: clickHandler,
-            allowSelection: true,
-            gridLines: 'Both',
-            height: '450px',
-            treeColumnIndex: 1,
-            highlightWeekends: true,
-            timelineSettings: {
-                topTier: {
-                    unit: 'Week',
-                    format: 'MMM dd, y',
-                },
-                bottomTier: {
-                    unit: 'Day',
-                },
-            },
-            labelSettings: {
-                leftLabel: 'TaskName',
-            },
-            projectStartDate: new Date('03/25/2019'),
-            projectEndDate: new Date('07/28/2019')
+    dateFormat: 'MMM dd, y',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        dependency: 'Predecessor',
+        parentID: 'ParentID',
+    },
+    columns: [
+        { field: 'TaskID', width: 80 },
+        { field: 'TaskName', width: 250 },
+        { field: 'StartDate' },
+        { field: 'EndDate' },
+        { field: 'Duration' },
+        { field: 'Predecessor' },
+        { field: 'Progress' }
+    ],
+    splitterSettings: {
+        columnIndex: 2
+    },
+    allowPdfExport: true,
+    toolbar: ['PdfExport'],
+    toolbarClick: clickHandler,
+    allowSelection: true,
+    gridLines: 'Both',
+    height: '450px',
+    treeColumnIndex: 1,
+    highlightWeekends: true,
+    timelineSettings: {
+        topTier: {
+            unit: 'Week',
+            format: 'MMM dd, y',
+        },
+        bottomTier: {
+            unit: 'Day',
+        },
+    },
+    labelSettings: {
+        leftLabel: 'TaskName',
+    },
+    projectStartDate: new Date('03/25/2019'),
+    projectEndDate: new Date('07/28/2019')
 });
 ganttChart.appendTo('#GanttExport');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/single-page/index.ts b/ej2-javascript/code-snippet/gantt/single-page/index.ts
index 499ea2e63..224dcdbf8 100644
--- a/ej2-javascript/code-snippet/gantt/single-page/index.ts
+++ b/ej2-javascript/code-snippet/gantt/single-page/index.ts
@@ -7,9 +7,9 @@ Gantt.Inject(Toolbar, PdfExport, Selection);
 let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
     if (args.item.id === 'GanttExport_pdfexport') {
         let exportProperties: PdfExportProperties = {
-            fitToWidthSettings: {       
-                isFitToWidth: true,       
-            }       
+            fitToWidthSettings: {
+                isFitToWidth: true,
+            }
         };
         gantt.pdfExport(exportProperties);
     }
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs1/index.js b/ej2-javascript/code-snippet/gantt/timeline-cs1/index.js
index 657f7245e..efbd98baa 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs1/index.js
@@ -1,18 +1,17 @@
-
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			dependency: 'Predecessor',
-            parentID: 'ParentID'
-        },
-		timelineSettings: {
-			timelineViewMode:'Week'
-		}
+    dataSource: GanttData,
+    height: '450px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        dependency: 'Predecessor',
+        parentID: 'ParentID'
+    },
+    timelineSettings: {
+        timelineViewMode: 'Week'
+    }
 });
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs1/index.ts b/ej2-javascript/code-snippet/gantt/timeline-cs1/index.ts
index fae370631..b45b58da4 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs1/index.ts
@@ -1,5 +1,3 @@
-
-
 import { Gantt } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
 
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs1/js/index.html
index 81a17d0a1..492a48005 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs1/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-            <div id="Gantt"></div>        
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs1/ts/index.html
index 98c9110a4..6811eef12 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs1/ts/index.html
@@ -8,7 +8,7 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <script src="es5-datasource.js" type="text/javascript"></script>
@@ -17,7 +17,7 @@
 <body>
     <div id='loader'>Loading....</div>
     <div id='container'>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs10/index.js b/ej2-javascript/code-snippet/gantt/timeline-cs10/index.js
index 92c37acff..76fbb7dc1 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs10/index.js
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs10/index.js
@@ -1,54 +1,42 @@
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			parentID: 'parentID'
-        },
-		timelineSettings: {
-			topTier: {
+    height: '430px',
+    dataSource: GanttData,
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        endDate: 'EndDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    timelineSettings: {
+        topTier: {
             unit: 'Month',
             count: 3,
-            formatter: (date) => {
-                var month = date.getMonth();
-                if (month >= 0 && month <=2) {
-                return 'Q1';
-                } else if(month >= 3 && month <=5) {
-                    return 'Q2';
-                } else if(month >= 6 && month <=8) {
-                    return 'Q3';
-                } else {
-                    return 'Q4';
-                }
+            formatter: function (date, format, tier, mode) {
+                var quarter = 'Q' + (Math.floor(date.getMonth() / 3) + 1);
+                var prefix = tier === 'topTier' ? 'T-' : 'B-';
+                var suffix = mode === 'Month' ? '-M' : '';
+                console.log(format);
+                return '' + prefix + quarter + suffix;
             }
-	    },
-	    bottomTier: {
+        },
+        bottomTier: {
             unit: 'Month',
             format: 'MMM'
-          }
-		},
-		projectStartDate:new Date('01/04/2019'),
-		projectEndDate:new Date('12/30/2019')
+        }
+    },
+    splitterSettings: { position: '50%' },
+    projectStartDate: new Date('01/04/2019'),
+    projectEndDate: new Date('12/30/2019'),
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: '100' },
+        { field: 'TaskName', headerText: 'Task Name', width: '150' },
+        { field: 'StartDate', headerText: 'Start Date', width: '150' },
+        { field: 'Duration', headerText: 'Duration', width: '150' },
+        { field: 'Progress', headerText: 'Progress', width: '150' }
+    ]
 });
-ganttChart.appendTo('#Gantt');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
+ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs10/index.ts b/ej2-javascript/code-snippet/gantt/timeline-cs10/index.ts
index bcfa2be72..5fb1be246 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs10/index.ts
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs10/index.ts
@@ -1,43 +1,45 @@
-
-
 import { Gantt } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
 
 let gantt: Gantt = new Gantt({
+    height: '430px',
     dataSource: GanttData,
-    height: '450px',
     taskFields: {
         id: 'TaskID',
         name: 'TaskName',
         startDate: 'StartDate',
+        endDate: 'EndDate',
         duration: 'Duration',
         progress: 'Progress',
-        parentID: 'parentID'
+        parentID: 'ParentID'
     },
     timelineSettings: {
         topTier: {
             unit: 'Month',
             count: 3,
-            formatter: (date) => {
-                var month = date.getMonth();
-                if (month >= 0 && month <= 2) {
-                    return 'Q1';
-                } else if (month >= 3 && month <= 5) {
-                    return 'Q2';
-                } else if (month >= 6 && month <= 8) {
-                    return 'Q3';
-                } else {
-                    return 'Q4';
-                }
-
+            formatter: (date: Date, format: string, tier: string, mode: string): string => {
+                const quarter: string = 'Q' + (Math.floor(date.getMonth() / 3) + 1);
+                const prefix: string = tier === 'topTier' ? 'T-' : 'B-';
+                const suffix: string = mode === 'Month' ? '-M' : '';
+                console.log(format);
+                return `${prefix}${quarter}${suffix}`;
             }
         },
         bottomTier: {
             unit: 'Month',
             format: 'MMM'
         }
-    },
+    } as any,
+    splitterSettings: { position: '50%' } as any,
     projectStartDate: new Date('01/04/2019'),
-    projectEndDate: new Date('12/30/2019')
+    projectEndDate: new Date('12/30/2019'),
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: '100' },
+        { field: 'TaskName', headerText: 'Task Name', width: '150' },
+        { field: 'StartDate', headerText: 'Start Date', width: '150' },
+        { field: 'Duration', headerText: 'Duration', width: '150' },
+        { field: 'Progress', headerText: 'Progress', width: '150' }
+    ]
 });
+
 gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs11/index.js b/ej2-javascript/code-snippet/gantt/timeline-cs11/index.js
index 4ef2c256c..0045b9c39 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs11/index.js
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs11/index.js
@@ -1,16 +1,16 @@
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			parentID: 'parentID'
-        },
-		timelineSettings: {
-            timelineUnitSize:200
-        }
+    dataSource: GanttData,
+    height: '450px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'parentID'
+    },
+    timelineSettings: {
+        timelineUnitSize: 200
+    }
 });
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs11/index.ts b/ej2-javascript/code-snippet/gantt/timeline-cs11/index.ts
index 5d0aff400..725c113c3 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs11/index.ts
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs11/index.ts
@@ -1,6 +1,3 @@
-
-
-
 import { Gantt } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
 
@@ -16,7 +13,7 @@ let gantt: Gantt = new Gantt({
         parentID: 'parentID'
     },
     timelineSettings: {
-        timelineUnitSize:200
+        timelineUnitSize: 200
     }
 });
 gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs11/js/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs11/js/index.html
index 81a17d0a1..492a48005 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs11/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs11/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-            <div id="Gantt"></div>        
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs11/ts/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs11/ts/index.html
index 291ea5956..19ed0fd17 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs11/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs11/ts/index.html
@@ -8,16 +8,15 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs13/datasource.ts b/ej2-javascript/code-snippet/gantt/timeline-cs13/datasource.ts
new file mode 100644
index 000000000..0b0a1978a
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs13/datasource.ts
@@ -0,0 +1,10 @@
+export let GanttData: Object[] = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019 08:00'), EndDate: new Date('04/02/2019 10:00') },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019 08:00'), Duration: 30, Progress: 50, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019 08:30'), Duration: 30, Progress: 50, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019 09:00'), Duration: 30, Predecessor: '2FS', Progress: 50, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019 10:00'), EndDate: new Date('04/02/2019 12:00') },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/02/2019 10:00'), Duration: 30, Progress: 50, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/02/2019 10:30'), Duration: 30, Progress: 50, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/02/2019 11:00'), Duration: 30, Predecessor: '6FS', Progress: 50, ParentID: 5 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs13/es5-datasource.js b/ej2-javascript/code-snippet/gantt/timeline-cs13/es5-datasource.js
new file mode 100644
index 000000000..1bcc58c2e
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs13/es5-datasource.js
@@ -0,0 +1,10 @@
+var GanttData = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019 08:00'), EndDate: new Date('04/02/2019 10:00') },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019 08:00'), Duration: 30, Progress: 50, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019 08:30'), Duration: 30, Progress: 50, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019 09:00'), Duration: 30, Predecessor: '2FS', Progress: 50, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019 10:00'), EndDate: new Date('04/02/2019 12:00') },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/02/2019 10:00'), Duration: 30, Progress: 50, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/02/2019 10:30'), Duration: 30, Progress: 50, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/02/2019 11:00'), Duration: 30, Predecessor: '6FS', Progress: 50, ParentID: 5 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs13/index.css b/ej2-javascript/code-snippet/gantt/timeline-cs13/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs13/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs13/index.js b/ej2-javascript/code-snippet/gantt/timeline-cs13/index.js
new file mode 100644
index 000000000..33b36d455
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs13/index.js
@@ -0,0 +1,16 @@
+var ganttChart = new ej.gantt.Gantt({
+	dataSource: GanttData,
+	height: '450px',
+	taskFields: {
+		id: 'TaskID',
+		name: 'TaskName',
+		startDate: 'StartDate',
+		duration: 'Duration',
+		progress: 'Progress',
+		parentID: 'ParentID'
+	},
+	timelineSettings: {
+		timelineViewMode: 'Minutes'
+	}
+});
+ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs13/index.ts b/ej2-javascript/code-snippet/gantt/timeline-cs13/index.ts
new file mode 100644
index 000000000..a82f2c3d3
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs13/index.ts
@@ -0,0 +1,19 @@
+import { Gantt } from '@syncfusion/ej2-gantt';
+import { GanttData } from './datasource.ts';
+
+let gantt: Gantt = new Gantt({
+    dataSource: GanttData,
+    height: '450px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    timelineSettings: {
+        timelineViewMode: 'Minutes'
+    }
+});
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs13/js/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs13/js/index.html
new file mode 100644
index 000000000..492a48005
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs13/js/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs13/systemjs.config.js b/ej2-javascript/code-snippet/gantt/timeline-cs13/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs13/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs13/ts/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs13/ts/index.html
new file mode 100644
index 000000000..642dfe7d0
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs13/ts/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <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='container'>
+        <div id='Gantt'></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs14/datasource.ts b/ej2-javascript/code-snippet/gantt/timeline-cs14/datasource.ts
new file mode 100644
index 000000000..0b0a1978a
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs14/datasource.ts
@@ -0,0 +1,10 @@
+export let GanttData: Object[] = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019 08:00'), EndDate: new Date('04/02/2019 10:00') },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019 08:00'), Duration: 30, Progress: 50, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019 08:30'), Duration: 30, Progress: 50, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019 09:00'), Duration: 30, Predecessor: '2FS', Progress: 50, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019 10:00'), EndDate: new Date('04/02/2019 12:00') },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/02/2019 10:00'), Duration: 30, Progress: 50, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/02/2019 10:30'), Duration: 30, Progress: 50, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/02/2019 11:00'), Duration: 30, Predecessor: '6FS', Progress: 50, ParentID: 5 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs14/es5-datasource.js b/ej2-javascript/code-snippet/gantt/timeline-cs14/es5-datasource.js
new file mode 100644
index 000000000..1bcc58c2e
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs14/es5-datasource.js
@@ -0,0 +1,10 @@
+var GanttData = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019 08:00'), EndDate: new Date('04/02/2019 10:00') },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019 08:00'), Duration: 30, Progress: 50, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019 08:30'), Duration: 30, Progress: 50, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019 09:00'), Duration: 30, Predecessor: '2FS', Progress: 50, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019 10:00'), EndDate: new Date('04/02/2019 12:00') },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/02/2019 10:00'), Duration: 30, Progress: 50, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/02/2019 10:30'), Duration: 30, Progress: 50, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/02/2019 11:00'), Duration: 30, Predecessor: '6FS', Progress: 50, ParentID: 5 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs14/index.css b/ej2-javascript/code-snippet/gantt/timeline-cs14/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs14/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs14/index.js b/ej2-javascript/code-snippet/gantt/timeline-cs14/index.js
new file mode 100644
index 000000000..98221e476
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs14/index.js
@@ -0,0 +1,40 @@
+var taskFields = {
+	id: 'TaskID',
+	name: 'TaskName',
+	startDate: 'StartDate',
+	duration: 'Duration',
+	progress: 'Progress',
+	parentID: 'ParentID'
+};
+
+var timelineSettings = {
+	timelineViewMode: 'Week'
+};
+
+var timelineOptions = [
+	{ Id: 'Week', Value: 'Week' },
+	{ Id: 'Day', Value: 'Day' },
+	{ Id: 'Month', Value: 'Month' }
+];
+
+var gantt = new ej.gantt.Gantt({
+	height: '430px',
+	dataSource: GanttData,
+	taskFields: taskFields,
+	timelineSettings: timelineSettings
+});
+gantt.appendTo('#Gantt');
+
+var comboBox = new ej.dropdowns.ComboBox({
+	dataSource: timelineOptions,
+	width: '200px',
+	fields: { text: 'Value', value: 'Id' },
+	index: 0,
+	change: function (args) {
+		if (gantt) {
+			gantt.timelineSettings.timelineViewMode = args.value;
+			gantt.refresh();
+		}
+	}
+});
+comboBox.appendTo('#timeline');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs14/index.ts b/ej2-javascript/code-snippet/gantt/timeline-cs14/index.ts
new file mode 100644
index 000000000..5a504c036
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs14/index.ts
@@ -0,0 +1,38 @@
+import { Gantt, TaskFieldsModel } from '@syncfusion/ej2-gantt';
+import { ComboBox, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
+import { GanttData } from './datasource.ts';
+
+const taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+const timelineOptions: object[] = [
+    { Id: 'Week', Value: 'Week' },
+    { Id: 'Day', Value: 'Day' },
+    { Id: 'Month', Value: 'Month' }
+];
+
+const gantt: Gantt = new Gantt({
+    height: '430px',
+    dataSource: GanttData,
+    taskFields,
+    timelineSettings: { timelineViewMode: 'Week' }
+});
+gantt.appendTo('#Gantt');
+
+const comboBox: ComboBox = new ComboBox({
+    dataSource: timelineOptions,
+    width: '200px',
+    fields: { text: 'Value', value: 'Id' },
+    index: 0,
+    change: (args: ChangeEventArgs) => {
+        gantt.timelineSettings.timelineViewMode = args.value as any;
+        gantt.refresh();
+    }
+});
+comboBox.appendTo('#timeline');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs14/js/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs14/js/index.html
new file mode 100644
index 000000000..85365e653
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs14/js/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <input id="timeline" />
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs14/systemjs.config.js b/ej2-javascript/code-snippet/gantt/timeline-cs14/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs14/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs14/ts/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs14/ts/index.html
new file mode 100644
index 000000000..c1cc6aafd
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs14/ts/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <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='container'>
+        <input id="timeline" />
+        <div id='Gantt'></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs15/datasource.ts b/ej2-javascript/code-snippet/gantt/timeline-cs15/datasource.ts
new file mode 100644
index 000000000..0b0a1978a
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs15/datasource.ts
@@ -0,0 +1,10 @@
+export let GanttData: Object[] = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019 08:00'), EndDate: new Date('04/02/2019 10:00') },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019 08:00'), Duration: 30, Progress: 50, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019 08:30'), Duration: 30, Progress: 50, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019 09:00'), Duration: 30, Predecessor: '2FS', Progress: 50, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019 10:00'), EndDate: new Date('04/02/2019 12:00') },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/02/2019 10:00'), Duration: 30, Progress: 50, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/02/2019 10:30'), Duration: 30, Progress: 50, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/02/2019 11:00'), Duration: 30, Predecessor: '6FS', Progress: 50, ParentID: 5 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs15/es5-datasource.js b/ej2-javascript/code-snippet/gantt/timeline-cs15/es5-datasource.js
new file mode 100644
index 000000000..1bcc58c2e
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs15/es5-datasource.js
@@ -0,0 +1,10 @@
+var GanttData = [
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019 08:00'), EndDate: new Date('04/02/2019 10:00') },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019 08:00'), Duration: 30, Progress: 50, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019 08:30'), Duration: 30, Progress: 50, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019 09:00'), Duration: 30, Predecessor: '2FS', Progress: 50, ParentID: 1 },
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019 10:00'), EndDate: new Date('04/02/2019 12:00') },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/02/2019 10:00'), Duration: 30, Progress: 50, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/02/2019 10:30'), Duration: 30, Progress: 50, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/02/2019 11:00'), Duration: 30, Predecessor: '6FS', Progress: 50, ParentID: 5 }
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs15/index.css b/ej2-javascript/code-snippet/gantt/timeline-cs15/index.css
new file mode 100644
index 000000000..e7bcf086c
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs15/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#container #Gantt{
+	height:450px;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs15/index.js b/ej2-javascript/code-snippet/gantt/timeline-cs15/index.js
new file mode 100644
index 000000000..14ec11b3b
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs15/index.js
@@ -0,0 +1,40 @@
+var taskFields = {
+	id: 'TaskID',
+	name: 'TaskName',
+	startDate: 'StartDate',
+	endDate: 'EndDate',
+	duration: 'Duration',
+	progress: 'Progress',
+	parentID: 'ParentID'
+};
+
+var columns = [
+	{ field: 'TaskID', headerText: 'Task ID', width: '100' },
+	{ field: 'TaskName', headerText: 'Task Name', width: '150' },
+	{ field: 'StartDate', headerText: 'Start Date', width: '150' },
+	{ field: 'Duration', headerText: 'Duration', width: '150' },
+	{ field: 'Progress', headerText: 'Progress', width: '150' }
+];
+
+var gantt = new ej.gantt.Gantt({
+	height: '430px',
+	dataSource: GanttData,
+	taskFields: taskFields,
+	timelineSettings: { timelineViewMode: 'Week' },
+	columns: columns
+});
+gantt.appendTo('#Gantt');
+
+var prevBtn = new ej.buttons.Button({ content: 'Previous Week' });
+prevBtn.appendTo('#previousWeek');
+
+var nextBtn = new ej.buttons.Button({ content: 'Next Week' });
+nextBtn.appendTo('#nextWeek');
+
+document.getElementById('previousWeek').addEventListener('click', function () {
+	gantt.previousTimeSpan();
+});
+
+document.getElementById('nextWeek').addEventListener('click', function () {
+	gantt.nextTimeSpan();
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs15/index.ts b/ej2-javascript/code-snippet/gantt/timeline-cs15/index.ts
new file mode 100644
index 000000000..fc71ecc90
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs15/index.ts
@@ -0,0 +1,45 @@
+import { Gantt, Columns, TaskFieldsModel } from '@syncfusion/ej2-gantt';
+import { Button } from '@syncfusion/ej2-buttons';
+import { GanttData } from './datasource.ts';
+
+const taskFields: TaskFieldsModel = {
+    id: 'TaskID',
+    name: 'TaskName',
+    startDate: 'StartDate',
+    endDate: 'EndDate',
+    duration: 'Duration',
+    progress: 'Progress',
+    parentID: 'ParentID'
+};
+
+const columns: Columns[] = [
+    { field: 'TaskID', headerText: 'Task ID', width: '100' },
+    { field: 'TaskName', headerText: 'Task Name', width: '150' },
+    { field: 'StartDate', headerText: 'Start Date', width: '150' },
+    { field: 'Duration', headerText: 'Duration', width: '150' },
+    { field: 'Progress', headerText: 'Progress', width: '150' }
+];
+
+let gantt: Gantt = new Gantt({
+    height: '430px',
+    dataSource: GanttData,
+    taskFields: taskFields,
+    timelineSettings: { timelineViewMode: 'Week' },
+    columns: columns
+});
+
+gantt.appendTo('#Gantt');
+
+let prevBtn: Button = new Button({ content: 'Previous Week' });
+prevBtn.appendTo('#previousWeek');
+
+let nextBtn: Button = new Button({ content: 'Next Week' });
+nextBtn.appendTo('#nextWeek');
+
+(document.getElementById('previousWeek') as HTMLElement).addEventListener('click', () => {
+    gantt.previousTimeSpan();
+});
+
+(document.getElementById('nextWeek') as HTMLElement).addEventListener('click', () => {
+    gantt.nextTimeSpan();
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs15/js/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs15/js/index.html
new file mode 100644
index 000000000..9b617310d
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs15/js/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div style="margin-bottom:10px;">
+            <button id="previousWeek"></button>
+            <button id="nextWeek" style="margin-left:10px;"></button>
+        </div>
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
+            ele.style.visibility = "visible";
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs15/systemjs.config.js b/ej2-javascript/code-snippet/gantt/timeline-cs15/systemjs.config.js
new file mode 100644
index 000000000..f91edce14
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs15/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js",
+        "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
+		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
+        "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
+		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
+        
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs15/ts/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs15/ts/index.html
new file mode 100644
index 000000000..6bbf0b88d
--- /dev/null
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs15/ts/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Gantt Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <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='container'>
+        <div style="margin-bottom:10px;">
+            <button id="previousWeek"></button>
+            <button id="nextWeek" style="margin-left:10px;"></button>
+        </div>
+        <div id='Gantt'></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs2/index.ts b/ej2-javascript/code-snippet/gantt/timeline-cs2/index.ts
index 73258d5b5..305c84536 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs2/index.ts
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs2/index.ts
@@ -1,5 +1,3 @@
-
-
 import { Gantt } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
 
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs3/datasource.ts b/ej2-javascript/code-snippet/gantt/timeline-cs3/datasource.ts
index 04cf6dd52..75bce46bb 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs3/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs3/datasource.ts
@@ -1,20 +1,11 @@
 export let GanttData: Object[] = [
-    {
-        TaskID: 1,
-        TaskName: 'Project Initiation',
-        StartDate: new Date('04/02/2019'),
-        EndDate: new Date('04/21/2019'),
-    },
-    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    {
-        TaskID: 5,
-        TaskName: 'Project Estimation',
-        StartDate: new Date('04/02/2019'),
-        EndDate: new Date('04/21/2019'),
-    },
-    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
-    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 14, Progress: 50, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 14, Progress: 50, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 14, Progress: 50, ParentID: 1 },
+
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 14, Progress: 50, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 14, Progress: 50, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 14, Progress: 50, ParentID: 5 }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs3/es5-datasource.js b/ej2-javascript/code-snippet/gantt/timeline-cs3/es5-datasource.js
index 7f269d947..881fe0835 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs3/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs3/es5-datasource.js
@@ -1,20 +1,11 @@
 var GanttData = [
-    {
-        TaskID: 1,
-        TaskName: 'Project Initiation',
-        StartDate: new Date('04/02/2019'),
-        EndDate: new Date('04/21/2019'),
-    },
-    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    {
-        TaskID: 5,
-        TaskName: 'Project Estimation',
-        StartDate: new Date('04/02/2019'),
-        EndDate: new Date('04/21/2019'),
-    },
-    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
-    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+    { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 14, Progress: 50, ParentID: 1 },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 14, Progress: 50, ParentID: 1 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 14, Progress: 50, ParentID: 1 },
+
+    { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 14, Progress: 50, ParentID: 5 },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 14, Progress: 50, ParentID: 5 },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 14, Progress: 50, ParentID: 5 }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs3/index.js b/ej2-javascript/code-snippet/gantt/timeline-cs3/index.js
index 3cbfe925d..f1e305dbc 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs3/index.js
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs3/index.js
@@ -1,17 +1,17 @@
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			parentID: 'ParentID'
-        },
-		timelineSettings: {
-		    timelineViewMode:'Year',
-			timelineUnitSize:70
-		}
+	dataSource: GanttData,
+	height: '450px',
+	taskFields: {
+		id: 'TaskID',
+		name: 'TaskName',
+		startDate: 'StartDate',
+		duration: 'Duration',
+		progress: 'Progress',
+		parentID: 'ParentID'
+	},
+	timelineSettings: {
+		timelineViewMode: 'Year',
+		timelineUnitSize: 150
+	}
 });
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs3/index.ts b/ej2-javascript/code-snippet/gantt/timeline-cs3/index.ts
index e5be28a63..87970d834 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs3/index.ts
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs3/index.ts
@@ -1,6 +1,3 @@
-
-
-
 import { Gantt } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
 
@@ -17,7 +14,7 @@ let gantt: Gantt = new Gantt({
     },
     timelineSettings: {
         timelineViewMode: 'Year',
-        timelineUnitSize: 70
+        timelineUnitSize: 150
     }
 });
 gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs3/ts/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs3/ts/index.html
index 291ea5956..642dfe7d0 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs3/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs3/ts/index.html
@@ -8,16 +8,16 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs4/index.js b/ej2-javascript/code-snippet/gantt/timeline-cs4/index.js
index 5de182649..a971d3c8e 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs4/index.js
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs4/index.js
@@ -1,16 +1,16 @@
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			parentID: 'ParentID'
-        },
-		timelineSettings: {
-		    timelineViewMode:'Day'
-		}
+	dataSource: GanttData,
+	height: '450px',
+	taskFields: {
+		id: 'TaskID',
+		name: 'TaskName',
+		startDate: 'StartDate',
+		duration: 'Duration',
+		progress: 'Progress',
+		parentID: 'ParentID'
+	},
+	timelineSettings: {
+		timelineViewMode: 'Day'
+	}
 });
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs4/js/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs4/js/index.html
index 81a17d0a1..492a48005 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs4/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs4/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-            <div id="Gantt"></div>        
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs4/ts/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs4/ts/index.html
index 291ea5956..642dfe7d0 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs4/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs4/ts/index.html
@@ -8,16 +8,16 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs5/index.ts b/ej2-javascript/code-snippet/gantt/timeline-cs5/index.ts
index 7e9ad9467..b6f0065ba 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs5/index.ts
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs5/index.ts
@@ -1,6 +1,3 @@
-
-
-
 import { Gantt } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
 
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs6/index.js b/ej2-javascript/code-snippet/gantt/timeline-cs6/index.js
index cbb258d46..4352ad469 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs6/index.js
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs6/index.js
@@ -1,17 +1,17 @@
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			parentID: 'ParentID'
-        },
-		timelineSettings: {
-			timelineViewMode:'Week',
-            weekStartDay:3
-        }
+    dataSource: GanttData,
+    height: '450px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    timelineSettings: {
+        timelineViewMode: 'Week',
+        weekStartDay: 3
+    }
 });
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs6/index.ts b/ej2-javascript/code-snippet/gantt/timeline-cs6/index.ts
index 58193cb0e..0d7de4a49 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs6/index.ts
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs6/index.ts
@@ -1,6 +1,3 @@
-
-
-
 import { Gantt } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
 
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs6/js/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs6/js/index.html
index 277a5f511..492a48005 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs6/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs6/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>    
-        <div id="container">
-            <div id="Gantt"></div>        
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs6/ts/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs6/ts/index.html
index 2d0e3051a..19ed0fd17 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs6/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs6/ts/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <title>EJ2 Gantt</title>
     <meta charset="utf-8" />
@@ -7,15 +8,15 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
 
-<body> 
+<body>
     <div id='loader'>Loading....</div>
     <div id='container'>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs7/index.ts b/ej2-javascript/code-snippet/gantt/timeline-cs7/index.ts
index 9ed4318b9..09bd408d9 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs7/index.ts
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs7/index.ts
@@ -1,5 +1,3 @@
-
-
 import { Gantt, Edit } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
 
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs7/js/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs7/js/index.html
index 81a17d0a1..492a48005 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs7/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs7/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-            <div id="Gantt"></div>        
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs7/ts/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs7/ts/index.html
index 291ea5956..19ed0fd17 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs7/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs7/ts/index.html
@@ -8,16 +8,15 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs8/index.js b/ej2-javascript/code-snippet/gantt/timeline-cs8/index.js
index 9b1bb12ad..4907b5ffc 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs8/index.js
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs8/index.js
@@ -1,22 +1,23 @@
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			parentID: 'parentID'
+    dataSource: GanttData,
+    height: '450px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'parentID'
+    },
+    timelineSettings: {
+        topTier: {
+            format: 'MMM',
+            unit: 'Month'
         },
-		timelineSettings: {
-		    topTier: {
-                    format: 'MMM',
-                    unit: 'Month'
-                },
-                    bottomTier: {
-                    unit: 'Day'
-				}
-		}
+        bottomTier: {
+            unit: 'Day',
+            count: 2
+        }
+    }
 });
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs8/index.ts b/ej2-javascript/code-snippet/gantt/timeline-cs8/index.ts
index 30f64823c..5a4ae38d8 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs8/index.ts
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs8/index.ts
@@ -1,6 +1,3 @@
-
-
-
 import { Gantt } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
 
@@ -21,7 +18,8 @@ let gantt: Gantt = new Gantt({
             unit: 'Month'
         },
         bottomTier: {
-            unit: 'Day'
+            unit: 'Day',
+            count: 2
         }
     }
 });
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs8/js/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs8/js/index.html
index 788c38aff..3a6881318 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs8/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs8/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-            <div id="Gantt"></div>        
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs8/ts/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs8/ts/index.html
index 291ea5956..642dfe7d0 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs8/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs8/ts/index.html
@@ -8,16 +8,16 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs9/datasource.ts b/ej2-javascript/code-snippet/gantt/timeline-cs9/datasource.ts
index 04cf6dd52..65b90eade 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs9/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs9/datasource.ts
@@ -4,17 +4,19 @@ export let GanttData: Object[] = [
         TaskName: 'Project Initiation',
         StartDate: new Date('04/02/2019'),
         EndDate: new Date('04/21/2019'),
+        isParent: true,
     },
-    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 120, ParentID: 1, Progress: 50, isParent: false },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 120, ParentID: 1, Progress: 50, resources: [2, 3, 5], isParent: false },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 120, ParentID: 1, Predecessor: "2FS", Progress: 50, isParent: false },
     {
         TaskID: 5,
         TaskName: 'Project Estimation',
         StartDate: new Date('04/02/2019'),
         EndDate: new Date('04/21/2019'),
+        isParent: true,
     },
-    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
-    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 120, ParentID: 5, Progress: 50, resources: [4], isParent: false },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 120, ParentID: 5, Progress: 50, resources: [4, 8], isParent: false },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 120, ParentID: 5, Predecessor: "6SS", Progress: 50, resources: [12, 5], isParent: false }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs9/es5-datasource.js b/ej2-javascript/code-snippet/gantt/timeline-cs9/es5-datasource.js
index 7f269d947..9d62fecf2 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs9/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs9/es5-datasource.js
@@ -4,17 +4,19 @@ var GanttData = [
         TaskName: 'Project Initiation',
         StartDate: new Date('04/02/2019'),
         EndDate: new Date('04/21/2019'),
+        isParent: true,
     },
-    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 120, ParentID: 1, Progress: 50, isParent: false },
+    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 120, ParentID: 1, Progress: 50, resources: [2, 3, 5], isParent: false },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 120, ParentID: 1, Predecessor: "2FS", Progress: 50, isParent: false },
     {
         TaskID: 5,
         TaskName: 'Project Estimation',
         StartDate: new Date('04/02/2019'),
         EndDate: new Date('04/21/2019'),
+        isParent: true,
     },
-    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
-    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 120, ParentID: 5, Progress: 50, resources: [4], isParent: false },
+    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 120, ParentID: 5, Progress: 50, resources: [4, 8], isParent: false },
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 120, ParentID: 5, Predecessor: "6SS", Progress: 50, resources: [12, 5], isParent: false }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs9/index.js b/ej2-javascript/code-snippet/gantt/timeline-cs9/index.js
index 6f535bad0..65acacca1 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs9/index.js
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs9/index.js
@@ -1,23 +1,23 @@
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			parentID: 'parentID'
+    dataSource: GanttData,
+    height: '450px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'parentID'
+    },
+    timelineSettings: {
+        timelineUnitSize: 100,
+        topTier: {
+            unit: 'Year'
         },
-		timelineSettings: {
-			timelineUnitSize:100,
-		    topTier: {
-                   unit: 'Year'
-                },
-                    bottomTier: {
-                    unit: 'Month',
-					count:6
-                }
-		}
+        bottomTier: {
+            unit: 'Month',
+            count: 6
+        }
+    }
 });
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs9/js/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs9/js/index.html
index 81a17d0a1..492a48005 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs9/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs9/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-            <div id="Gantt"></div>        
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs9/systemjs.config.js b/ej2-javascript/code-snippet/gantt/timeline-cs9/systemjs.config.js
index f91edce14..8e1726657 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs9/systemjs.config.js
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs9/systemjs.config.js
@@ -21,25 +21,25 @@ System.config({
         "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
         "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
         "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
-		"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
-        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
         "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
         "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
         "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
         "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
         "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
-        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", 
-		"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
         "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
         "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
-		"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
         "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
         "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
         "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
         "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
         "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
         "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js"
-        
+
     }
 });
 
diff --git a/ej2-javascript/code-snippet/gantt/timeline-cs9/ts/index.html b/ej2-javascript/code-snippet/gantt/timeline-cs9/ts/index.html
index 291ea5956..642dfe7d0 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-cs9/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-cs9/ts/index.html
@@ -8,16 +8,16 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/index.js b/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/index.js
index 6a1cd0e7f..a3f6bd1c2 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/index.js
@@ -1,20 +1,16 @@
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			parentID: 'parentID'
-        },
-		timelineSettings: {
-            showWeekend: false
-        },
-		editSettings:{
-			allowEditing:true,
-			allowTaskbarEditing:true
-		}
+	dataSource: GanttData,
+	height: '450px',
+	taskFields: {
+		id: 'TaskID',
+		name: 'TaskName',
+		startDate: 'StartDate',
+		duration: 'Duration',
+		progress: 'Progress',
+		parentID: 'parentID'
+	},
+	timelineSettings: {
+		showWeekend: false
+	},
 });
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/index.ts b/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/index.ts
index 1edf50e0c..66a459af1 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/index.ts
@@ -1,10 +1,6 @@
-
-
-import { Gantt, Edit } from '@syncfusion/ej2-gantt';
+import { Gantt } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
 
-Gantt.Inject(Edit);
-
 let gantt: Gantt = new Gantt({
     dataSource: GanttData,
     height: '450px',
@@ -19,9 +15,5 @@ let gantt: Gantt = new Gantt({
     timelineSettings: {
         showWeekend: false
     },
-    editSettings: {
-        allowEditing: true,
-        allowTaskbarEditing: true
-    }
 });
 gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/js/index.html
index 7b5afe81a..492a48005 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
     <div id="container">
-            <div id="Gantt"></div>        
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/ts/index.html
index 243179056..19ed0fd17 100644
--- a/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/timeline-showweekend-cs1/ts/index.html
@@ -8,7 +8,7 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
@@ -16,7 +16,7 @@
 <body>
     <div id='loader'>Loading....</div>
     <div id='container'>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/zooming-cs1/datasource.ts b/ej2-javascript/code-snippet/gantt/zooming-cs1/datasource.ts
index 04cf6dd52..edac04e7f 100644
--- a/ej2-javascript/code-snippet/gantt/zooming-cs1/datasource.ts
+++ b/ej2-javascript/code-snippet/gantt/zooming-cs1/datasource.ts
@@ -4,17 +4,19 @@ export let GanttData: Object[] = [
         TaskName: 'Project Initiation',
         StartDate: new Date('04/02/2019'),
         EndDate: new Date('04/21/2019'),
+        isParent: true,
     },
-    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, ParentID: 1, Progress: 50 },
     { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Predecessor: "2FS", Progress: 50 },
     {
         TaskID: 5,
         TaskName: 'Project Estimation',
         StartDate: new Date('04/02/2019'),
         EndDate: new Date('04/21/2019'),
+        isParent: true,
     },
     { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
     { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0, ParentID: 5, Predecessor: "6SS", Progress: 50 }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/zooming-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/zooming-cs1/es5-datasource.js
index 7f269d947..bc0eb0442 100644
--- a/ej2-javascript/code-snippet/gantt/zooming-cs1/es5-datasource.js
+++ b/ej2-javascript/code-snippet/gantt/zooming-cs1/es5-datasource.js
@@ -4,17 +4,19 @@ var GanttData = [
         TaskName: 'Project Initiation',
         StartDate: new Date('04/02/2019'),
         EndDate: new Date('04/21/2019'),
+        isParent: true,
     },
-    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, ParentID: 1, Progress: 50 },
     { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
-    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
+    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Predecessor: "2FS", Progress: 50 },
     {
         TaskID: 5,
         TaskName: 'Project Estimation',
         StartDate: new Date('04/02/2019'),
         EndDate: new Date('04/21/2019'),
+        isParent: true,
     },
     { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
     { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
-    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
+    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0, ParentID: 5, Predecessor: "6SS", Progress: 50 }
 ];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/zooming-cs1/index.js b/ej2-javascript/code-snippet/gantt/zooming-cs1/index.js
index 2afb51efe..17f4a3a51 100644
--- a/ej2-javascript/code-snippet/gantt/zooming-cs1/index.js
+++ b/ej2-javascript/code-snippet/gantt/zooming-cs1/index.js
@@ -1,21 +1,18 @@
 
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			dependency: 'Predecessor',
-            parentID: 'parentID'
-        },
-        toolbar: ['ZoomIn', 'ZoomOut', 'ZoomToFit'],
-        labelSettings: {
-            leftLabel: 'TaskName'
-        },
-        projectStartDate: new Date('03/24/2019'),
-        projectEndDate: new Date('04/28/2019')
-    });
+    dataSource: GanttData,
+    height: '450px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        dependency: 'Predecessor',
+        parentID: 'parentID'
+    },
+    toolbar: ['ZoomIn', 'ZoomOut', 'ZoomToFit'],
+    projectStartDate: new Date('03/24/2019'),
+    projectEndDate: new Date('04/28/2019')
+});
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/zooming-cs1/index.ts b/ej2-javascript/code-snippet/gantt/zooming-cs1/index.ts
index 69e59ab49..0cd66a7fa 100644
--- a/ej2-javascript/code-snippet/gantt/zooming-cs1/index.ts
+++ b/ej2-javascript/code-snippet/gantt/zooming-cs1/index.ts
@@ -1,8 +1,5 @@
-
-
-
 import { Gantt, Toolbar } from '@syncfusion/ej2-gantt';
-import { GanttData } from 'datasource.ts';
+import { GanttData } from './datasource.ts';
 
 Gantt.Inject(Toolbar);
 
@@ -19,13 +16,7 @@ let gantt: Gantt = new Gantt({
         parentID: 'parentID'
     },
     toolbar: ['ZoomIn', 'ZoomOut', 'ZoomToFit'],
-    labelSettings: {
-        leftLabel: 'TaskName'
-    },
     projectStartDate: new Date('03/24/2019'),
     projectEndDate: new Date('04/28/2019')
 });
-gantt.appendTo('#Gantt');
-
-
-
+gantt.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/zooming-cs1/js/index.html b/ej2-javascript/code-snippet/gantt/zooming-cs1/js/index.html
index 81a17d0a1..492a48005 100644
--- a/ej2-javascript/code-snippet/gantt/zooming-cs1/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/zooming-cs1/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-            <div id="Gantt"></div>        
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/zooming-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/zooming-cs1/ts/index.html
index 291ea5956..19ed0fd17 100644
--- a/ej2-javascript/code-snippet/gantt/zooming-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/zooming-cs1/ts/index.html
@@ -8,16 +8,15 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/gantt/zooming-cs2/index.js b/ej2-javascript/code-snippet/gantt/zooming-cs2/index.js
index c6dfd5285..868a7e079 100644
--- a/ej2-javascript/code-snippet/gantt/zooming-cs2/index.js
+++ b/ej2-javascript/code-snippet/gantt/zooming-cs2/index.js
@@ -1,60 +1,57 @@
-var customZoomingLevels =  [{
-                topTier: { unit: 'Month', format: 'MMM, yy', count: 1 },
-                bottomTier: { unit: 'Week', format: 'dd', count: 1 }, timelineUnitSize: 33, level: 0,
-                timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
-            },
-            {
-                topTier: { unit: 'Month', format: 'MMM, yyyy', count: 1 },
-                bottomTier: { unit: 'Week', format: 'dd MMM', count: 1 }, timelineUnitSize: 66, level: 1,
-                timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
-            },
-            {
-                topTier: { unit: 'Month', format: 'MMM, yyyy', count: 1 },
-                bottomTier: { unit: 'Week', format: 'dd MMM', count: 1 }, timelineUnitSize: 99, level: 2,
-                timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
-            },
-            {
-                topTier: { unit: 'Week', format: 'MMM dd, yyyy', count: 1 },
-                bottomTier: { unit: 'Day', format: 'd', count: 1 }, timelineUnitSize: 33, level: 3,
-                timelineViewMode: 'Week', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
-            },
-            {
-                topTier: { unit: 'Week', format: 'MMM dd, yyyy', count: 1 },
-                bottomTier: { unit: 'Day', format: 'd', count: 1 }, timelineUnitSize: 66, level: 4,
-                timelineViewMode: 'Week', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
-            },
-            {
-                topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
-                bottomTier: { unit: 'Hour', format: 'hh a', count: 12 }, timelineUnitSize: 66, level: 5,
-                timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
-            },
-            {
-                topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
-                bottomTier: { unit: 'Hour', format: 'hh a', count: 6 }, timelineUnitSize: 99, level: 6,
-                timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
-            },
+var customZoomingLevels = [{
+    topTier: { unit: 'Month', format: 'MMM, yy', count: 1 },
+    bottomTier: { unit: 'Week', format: 'dd', count: 1 }, timelineUnitSize: 33, level: 0,
+    timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+},
+{
+    topTier: { unit: 'Month', format: 'MMM, yyyy', count: 1 },
+    bottomTier: { unit: 'Week', format: 'dd MMM', count: 1 }, timelineUnitSize: 66, level: 1,
+    timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+},
+{
+    topTier: { unit: 'Month', format: 'MMM, yyyy', count: 1 },
+    bottomTier: { unit: 'Week', format: 'dd MMM', count: 1 }, timelineUnitSize: 99, level: 2,
+    timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+},
+{
+    topTier: { unit: 'Week', format: 'MMM dd, yyyy', count: 1 },
+    bottomTier: { unit: 'Day', format: 'd', count: 1 }, timelineUnitSize: 33, level: 3,
+    timelineViewMode: 'Week', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+},
+{
+    topTier: { unit: 'Week', format: 'MMM dd, yyyy', count: 1 },
+    bottomTier: { unit: 'Day', format: 'd', count: 1 }, timelineUnitSize: 66, level: 4,
+    timelineViewMode: 'Week', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+},
+{
+    topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
+    bottomTier: { unit: 'Hour', format: 'hh a', count: 12 }, timelineUnitSize: 66, level: 5,
+    timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+},
+{
+    topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
+    bottomTier: { unit: 'Hour', format: 'hh a', count: 6 }, timelineUnitSize: 99, level: 6,
+    timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
+},
 ];
 
 var ganttChart = new ej.gantt.Gantt({
-        dataSource: GanttData,
-		height:'450px',
-		taskFields: {
-            id: 'TaskID',
-            name: 'TaskName',
-            startDate: 'StartDate',
-			duration: 'Duration',
-            progress: 'Progress',
-			dependency: 'Predecessor',
-            parentID: 'parentID'
-        },
-        toolbar: ['ZoomIn', 'ZoomOut', 'ZoomToFit'],
-        labelSettings: {
-            leftLabel: 'TaskName'
-        },
-		dataBound:function(){
-		    ganttChart.zoomingLevels = customZoomingLevels;
-		},
-		projectStartDate: new Date('03/24/2019'),
-        projectEndDate: new Date('04/28/2019')
-    });
+    dataSource: GanttData,
+    height: '450px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        dependency: 'Predecessor',
+        parentID: 'parentID'
+    },
+    toolbar: ['ZoomIn', 'ZoomOut', 'ZoomToFit'],
+    dataBound: function () {
+        ganttChart.zoomingLevels = customZoomingLevels;
+    },
+    projectStartDate: new Date('03/24/2019'),
+    projectEndDate: new Date('04/28/2019')
+});
 ganttChart.appendTo('#Gantt');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/zooming-cs2/index.ts b/ej2-javascript/code-snippet/gantt/zooming-cs2/index.ts
index 5d3debd9a..f73135330 100644
--- a/ej2-javascript/code-snippet/gantt/zooming-cs2/index.ts
+++ b/ej2-javascript/code-snippet/gantt/zooming-cs2/index.ts
@@ -1,6 +1,3 @@
-
-
-
 import { Gantt, Toolbar, ZoomTimelineSettings } from '@syncfusion/ej2-gantt';
 import { GanttData } from './datasource.ts';
 
@@ -55,9 +52,6 @@ let gantt: Gantt = new Gantt({
         parentID: 'parentID'
     },
     toolbar: ['ZoomIn', 'ZoomOut', 'ZoomToFit'],
-    labelSettings: {
-        leftLabel: 'TaskName'
-    },
     dataBound: function () {
         gantt.zoomingLevels = customZoomingLevels;
     },
diff --git a/ej2-javascript/code-snippet/gantt/zooming-cs2/js/index.html b/ej2-javascript/code-snippet/gantt/zooming-cs2/js/index.html
index 81a17d0a1..492a48005 100644
--- a/ej2-javascript/code-snippet/gantt/zooming-cs2/js/index.html
+++ b/ej2-javascript/code-snippet/gantt/zooming-cs2/js/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>EJ2 Gantt</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Typescript Gantt Controls">
-        <meta name="author" content="Syncfusion">
-        <link href="index.css" rel="stylesheet">
-        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
-        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
-        <script src="es5-datasource.js" type="text/javascript"></script>
-    </head>
 
-    <body>
-        <div id="container">
-            <div id="Gantt"></div>        
-        </div>
-        <script>
-            var ele = document.getElementById('container');
-            if(ele) {
+<head>
+    <title>EJ2 Gantt</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Gantt Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <div id="container">
+        <div id="Gantt"></div>
+    </div>
+    <script>
+        var ele = document.getElementById('container');
+        if (ele) {
             ele.style.visibility = "visible";
-            }   
-        </script>
-        <script src="index.js" type="text/javascript"></script>
-    </body>
+        }   
+    </script>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/gantt/zooming-cs2/ts/index.html b/ej2-javascript/code-snippet/gantt/zooming-cs2/ts/index.html
index 291ea5956..642dfe7d0 100644
--- a/ej2-javascript/code-snippet/gantt/zooming-cs2/ts/index.html
+++ b/ej2-javascript/code-snippet/gantt/zooming-cs2/ts/index.html
@@ -8,16 +8,16 @@
     <meta name="description" content="Typescript Gantt Controls" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-	<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
     <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='container'>
-        <div id='Gantt'></div>        
+        <div id='Gantt'></div>
     </div>
 </body>
 
diff --git a/ej2-javascript/code-snippet/grid/grid-cs2/index.js b/ej2-javascript/code-snippet/grid/grid-cs2/index.js
index e33dcfc17..63b086683 100644
--- a/ej2-javascript/code-snippet/grid/grid-cs2/index.js
+++ b/ej2-javascript/code-snippet/grid/grid-cs2/index.js
@@ -2,7 +2,7 @@ ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar);
 var grid = new ej.grids.Grid({
     dataSource: data,
     enableAutoFill: true,
-    toolbar: ['Add', 'Update', 'Cancel'],
+    toolbar: ['Add', 'Delete', 'Update', 'Cancel'],
     selectionSettings: { type: 'Multiple', mode: 'Cell', cellSelectionMode: 'Box' },
     editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
     columns: [
diff --git a/ej2-javascript/code-snippet/grid/grid-cs2/index.ts b/ej2-javascript/code-snippet/grid/grid-cs2/index.ts
index 0c7514708..8a50aba7e 100644
--- a/ej2-javascript/code-snippet/grid/grid-cs2/index.ts
+++ b/ej2-javascript/code-snippet/grid/grid-cs2/index.ts
@@ -7,7 +7,7 @@ let grid: Grid = new Grid({
     dataSource: data,
     enableAutoFill: true,
     allowSelection: true,
-    toolbar: ['Add', 'Update', 'Cancel'],
+    toolbar: ['Add', 'Delete', 'Update', 'Cancel'],
     selectionSettings: { type: 'Multiple', mode: 'Cell', cellSelectionMode: 'Box' },
     editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
     columns: [
diff --git a/ej2-javascript/code-snippet/grid/grid-cs2/js/index.html b/ej2-javascript/code-snippet/grid/grid-cs2/js/index.html
index 28b585b26..99cddadf6 100644
--- a/ej2-javascript/code-snippet/grid/grid-cs2/js/index.html
+++ b/ej2-javascript/code-snippet/grid/grid-cs2/js/index.html
@@ -5,19 +5,19 @@
     <meta name="description" content="Typescript Grid Control">
     <meta name="author" content="Syncfusion">
     <link href="index.css" rel="stylesheet">
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-base/styles/bootstrap5.css" rel="stylesheet">
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet">
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-notifications/styles/bootstrap5.css" rel="stylesheet">
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
-<script src="https://cdn.syncfusion.com/ej2/24.2.3/dist/ej2.min.js" type="text/javascript"></script>
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-notifications/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
+<script src="https://cdn.syncfusion.com/ej2/33.1.44/dist/ej2.min.js" type="text/javascript"></script>
 <script src="es5-datasource.js" type="text/javascript"></script>
 </head>
 <body>
diff --git a/ej2-javascript/code-snippet/grid/grid-cs2/systemjs.config.js b/ej2-javascript/code-snippet/grid/grid-cs2/systemjs.config.js
index 7fa0fa10b..65ce3ae2e 100644
--- a/ej2-javascript/code-snippet/grid/grid-cs2/systemjs.config.js
+++ b/ej2-javascript/code-snippet/grid/grid-cs2/systemjs.config.js
@@ -10,7 +10,7 @@ System.config({
         }
     },
     paths: {
-        "syncfusion:": "https://cdn.syncfusion.com/ej2/24.2.3/"
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/"
     },
     map: {
         main: "index.ts",
diff --git a/ej2-javascript/code-snippet/grid/grid-cs2/ts/index.html b/ej2-javascript/code-snippet/grid/grid-cs2/ts/index.html
index 8614c27d7..f7e2d7112 100644
--- a/ej2-javascript/code-snippet/grid/grid-cs2/ts/index.html
+++ b/ej2-javascript/code-snippet/grid/grid-cs2/ts/index.html
@@ -8,18 +8,18 @@
     <meta name="description" content="Typescript Grid Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.2.3/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/gemini-ai/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/gemini-ai/js/index.html
index 846cb0ec0..e4be44746 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/gemini-ai/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/gemini-ai/js/index.html
@@ -8,14 +8,17 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+<<<<<<< HEAD
+=======
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/gemini-ai/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/gemini-ai/ts/index.html
index 2f69f9f66..440e4271b 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/gemini-ai/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/gemini-ai/ts/index.html
@@ -8,14 +8,17 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-        <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+<<<<<<< HEAD
+=======
+        <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/lite-llm/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/lite-llm/js/index.html
index 33217609f..a96f08e24 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/lite-llm/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/lite-llm/js/index.html
@@ -8,14 +8,17 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+<<<<<<< HEAD
+=======
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/lite-llm/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/lite-llm/ts/index.html
index a307d27d9..515435feb 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/lite-llm/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/lite-llm/ts/index.html
@@ -8,14 +8,17 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+<<<<<<< HEAD
+=======
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/llm-model/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/llm-model/js/index.html
index 846cb0ec0..e4be44746 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/llm-model/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/llm-model/js/index.html
@@ -8,14 +8,17 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+<<<<<<< HEAD
+=======
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/llm-model/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/llm-model/ts/index.html
index cde2539c9..34eef5d3c 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/llm-model/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/llm-model/ts/index.html
@@ -8,14 +8,17 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+<<<<<<< HEAD
+=======
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/open-ai/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/open-ai/js/index.html
index 846cb0ec0..e4be44746 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/open-ai/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/open-ai/js/index.html
@@ -8,14 +8,17 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+<<<<<<< HEAD
+=======
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/open-ai/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/open-ai/ts/index.html
index cde2539c9..34eef5d3c 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/open-ai/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/ai-integrations/open-ai/ts/index.html
@@ -8,14 +8,17 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+<<<<<<< HEAD
+=======
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/command-settings/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/command-settings/js/index.html
index 36bbbac94..9da8471cd 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/command-settings/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/command-settings/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/command-settings/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/command-settings/ts/index.html
index c040d899b..283a7680e 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/command-settings/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/command-settings/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/events/close/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/events/close/js/index.html
index d90a5ae52..8fef201bf 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/events/close/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/events/close/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/events/close/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/events/close/ts/index.html
index 4681ec410..cc6c660b3 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/events/close/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/events/close/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/events/created/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/events/created/js/index.html
index 45459a0b3..ae6e14d9c 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/events/created/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/events/created/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/events/created/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/events/created/ts/index.html
index aed520776..d7f64c769 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/events/created/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/events/created/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/events/open/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/events/open/js/index.html
index 1473250ee..0e176ca89 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/events/open/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/events/open/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/events/open/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/events/open/ts/index.html
index c3c59fb41..7b5da1c15 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/events/open/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/events/open/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/events/prompt-request/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/events/prompt-request/js/index.html
index 6049b1d4e..fe12e981c 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/events/prompt-request/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/events/prompt-request/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/events/prompt-request/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/events/prompt-request/ts/index.html
index c43b4ef2f..254677da4 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/events/prompt-request/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/events/prompt-request/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/gettingstarted/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/gettingstarted/js/index.html
index cffd457da..a5aa4e1dc 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/gettingstarted/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/gettingstarted/js/index.html
@@ -5,14 +5,14 @@
                 
     <title>JavaScript (ES5) Inline AI Assist</title>
     <!-- JavaScript (ES5) Inline AI Assist's dependency style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Inline AI Assist's control style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Inline AI Assist's dependent scripts -->
     <script src="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/gettingstarted/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/gettingstarted/ts/index.html
index 953f4340e..d828c740e 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/gettingstarted/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/gettingstarted/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/globalization/enable-rtl/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/globalization/enable-rtl/js/index.html
index e869e4c42..dfa8d49f2 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/globalization/enable-rtl/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/globalization/enable-rtl/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/globalization/enable-rtl/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/globalization/enable-rtl/ts/index.html
index 3ae74669f..63c052cca 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/globalization/enable-rtl/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/globalization/enable-rtl/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/globalization/localization/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/globalization/localization/js/index.html
index 67c413f49..09668f7ba 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/globalization/localization/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/globalization/localization/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/globalization/localization/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/globalization/localization/ts/index.html
index a2a7cf5fc..8f67ebc3a 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/globalization/localization/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/globalization/localization/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompt/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompt/js/index.html
index 67d9fbd5d..2406d2cf8 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompt/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompt/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompt/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompt/ts/index.html
index cf7c0c42c..cc57e0453 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompt/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompt/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompts/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompts/js/index.html
index 5172423d4..d74a589f1 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompts/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompts/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompts/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompts/ts/index.html
index 2b94a5af6..03a21c4c0 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompts/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/prompts/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/root-config/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/root-config/js/index.html
index 2a1579395..e724e8104 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/root-config/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/root-config/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/root-config/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/root-config/ts/index.html
index 46cbee2ba..669a78fab 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/root-config/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/inline-assist/root-config/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/props/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/props/js/index.html
index 210340c59..b1c8e9650 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/props/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/props/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/props/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/props/ts/index.html
index ca0040c28..28d0071bf 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/props/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/props/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/template/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/template/js/index.html
index c24e021b4..0df885c2e 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/template/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/template/js/index.html
@@ -8,15 +8,15 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/template/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/template/ts/index.html
index eddaa7d3f..f70ffaad7 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/template/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/template/ts/index.html
@@ -8,15 +8,15 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/toolbar-position/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/toolbar-position/js/index.html
index ac93abc57..9ec5f15c8 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/toolbar-position/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/toolbar-position/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/toolbar-position/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/toolbar-position/ts/index.html
index 41731d7ba..4e6db40d4 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/toolbar-position/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/inline-toolbar/toolbar-position/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/methods/add-response/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/methods/add-response/js/index.html
index ef05cc248..38eb306c3 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/methods/add-response/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/methods/add-response/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/methods/add-response/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/methods/add-response/ts/index.html
index 3ed5384cd..028388c30 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/methods/add-response/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/methods/add-response/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/methods/execute-prompt/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/methods/execute-prompt/js/index.html
index e65729056..b256167ea 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/methods/execute-prompt/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/methods/execute-prompt/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/methods/execute-prompt/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/methods/execute-prompt/ts/index.html
index 3cc395994..f831db6ff 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/methods/execute-prompt/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/methods/execute-prompt/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-commandpopup/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-commandpopup/js/index.html
index 6c31391e5..90b208eea 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-commandpopup/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-commandpopup/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-commandpopup/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-commandpopup/ts/index.html
index e3d8984f6..e254ec0e7 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-commandpopup/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-commandpopup/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-componentpopup/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-componentpopup/js/index.html
index c03c64ea5..dfb6a5aaf 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-componentpopup/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-componentpopup/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-componentpopup/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-componentpopup/ts/index.html
index 8a51801e0..79efe9075 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-componentpopup/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/methods/show-hide-componentpopup/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/relateTo-target/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/relateTo-target/js/index.html
index 0060eeb5f..cf42b7c23 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/relateTo-target/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/relateTo-target/js/index.html
@@ -5,14 +5,14 @@
                 
     <title>JavaScript (ES5) Inline AI Assist</title>
     <!-- JavaScript (ES5) Inline AI Assist's dependency style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Inline AI Assist's control style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Inline AI Assist's dependent scripts -->
     <script src="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/relateTo-target/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/relateTo-target/ts/index.html
index 953f4340e..d828c740e 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/relateTo-target/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/relateTo-target/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/response-mode/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/response-mode/js/index.html
index 7fb6c2391..3c3c6bc28 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/response-mode/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/response-mode/js/index.html
@@ -5,14 +5,14 @@
                 
     <title>JavaScript (ES5) Inline AI Assist</title>
     <!-- JavaScript (ES5) Inline AI Assist's dependency style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Inline AI Assist's control style -->
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
 
     <!-- JavaScript (ES5) Inline AI Assist's dependent scripts -->
     <script src="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/response-mode/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/response-mode/ts/index.html
index 592428364..f46e31b60 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/response-mode/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/response-mode/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript AI AssistView Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/response-settings/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/response-settings/js/index.html
index 9f7d4cc9b..dcb44e9d4 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/response-settings/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/response-settings/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/response-settings/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/response-settings/ts/index.html
index cd93057f1..c7c6c67e2 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/response-settings/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/response-settings/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/templates/editor-template/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/templates/editor-template/js/index.html
index 71ef39180..db379e2c9 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/templates/editor-template/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/templates/editor-template/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/templates/editor-template/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/templates/editor-template/ts/index.html
index 69600241b..ba5b05000 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/templates/editor-template/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/templates/editor-template/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/templates/response-template/js/index.html b/ej2-javascript/code-snippet/inline-ai-assist/templates/response-template/js/index.html
index 9fb75807a..70521358e 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/templates/response-template/js/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/templates/response-template/js/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
     <script src="systemjs.config.js"></script>
diff --git a/ej2-javascript/code-snippet/inline-ai-assist/templates/response-template/ts/index.html b/ej2-javascript/code-snippet/inline-ai-assist/templates/response-template/ts/index.html
index 0724e0e83..1dbf9270a 100644
--- a/ej2-javascript/code-snippet/inline-ai-assist/templates/response-template/ts/index.html
+++ b/ej2-javascript/code-snippet/inline-ai-assist/templates/response-template/ts/index.html
@@ -8,14 +8,14 @@
     <meta name="description" content="TypeScript Inline AI Assist Control" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
     <style>
diff --git a/ej2-javascript/code-snippet/schedule/event-cs5/index.js b/ej2-javascript/code-snippet/schedule/event-cs5/index.js
index df18fc124..37f6c2641 100644
--- a/ej2-javascript/code-snippet/schedule/event-cs5/index.js
+++ b/ej2-javascript/code-snippet/schedule/event-cs5/index.js
@@ -1,15 +1,15 @@
 var data = [{
     Id: 1,
     Subject: 'Paris',
-    StartTime: new Date(2018, 0, 28, 10, 0),
-    EndTime: new Date(2018, 0, 28, 12, 30),
+    StartTime: new Date(2026, 0, 28, 10, 0),
+    EndTime: new Date(2026, 0, 28, 12, 30),
     IsAllDay: false,
     RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=8',
-    RecurrenceException: '20180129T043000Z,20180131T043000Z,20180202T043000Z'
+    RecurrenceException: '20260129T043000Z,20260131T043000Z,20260202T043000Z'
 }];
 var scheduleObj = new ej.schedule.Schedule({
     height: '550px',
-    selectedDate: new Date(2018, 0, 28),
+    selectedDate: new Date(2026, 0, 28),
     eventSettings: { dataSource: data }
 });
 scheduleObj.appendTo('#Schedule');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/schedule/event-cs5/index.ts b/ej2-javascript/code-snippet/schedule/event-cs5/index.ts
index abc976c6d..31cabbc33 100644
--- a/ej2-javascript/code-snippet/schedule/event-cs5/index.ts
+++ b/ej2-javascript/code-snippet/schedule/event-cs5/index.ts
@@ -5,16 +5,16 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
 let data: object[] = [{
     Id: 1,
     Subject: 'Paris',
-    StartTime: new Date(2018, 0, 28, 10, 0),
-    EndTime: new Date(2018, 0, 28, 12, 30),
+    StartTime: new Date(2026, 0, 28, 10, 0),
+    EndTime: new Date(2026, 0, 28, 12, 30),
     IsAllDay: false,
     RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=8',
-    RecurrenceException: '20180129T043000Z,20180131T043000Z,20180202T043000Z'
+    RecurrenceException: '20260129T043000Z,20260131T043000Z,20260202T043000Z'
 }];
 
 let scheduleObj: Schedule = new Schedule({
     height: '550px',
-    selectedDate: new Date(2018, 0, 28),
+    selectedDate: new Date(2026, 0, 28),
     eventSettings: {
         dataSource: data
     }
diff --git a/ej2-javascript/data/applying-middleware-logic.md b/ej2-javascript/data/applying-middleware-logic.md
index 48b6b00a0..70d7b6626 100644
--- a/ej2-javascript/data/applying-middleware-logic.md
+++ b/ej2-javascript/data/applying-middleware-logic.md
@@ -1,288 +1,165 @@
 ---
 layout: post
-title: Applying Middleware logic in ##Platform_Name## DataManager | Syncfusion
-description: Learn here all about Applying Middleware logic in Syncfusion ##Platform_Name## DataManager of Syncfusion Essential JS 2 and more.
+title: ##Platform_Name## DataManager - Applying Middleware logic | Syncfusion
+description: Use middleware logic in Syncfusion ##Platform_Name## DataManager to add authentication, validate requests, or transform responses.
 platform: ej2-javascript
-control: Api 
+control: Applying Middleware logic 
 publishingplatform: ##Platform_Name##
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Middleware & request customization
+# Applying Middleware logic in ##Platform_Name## DataManager
 
-The Syncfusion ##Platform_Name## DataManager supports middleware functionality, allowing you to intercept, inspect, and manipulate data requests and responses as they flow between the client and server. This feature offers a flexible way to implement cross-cutting concerns such as authentication, input validation, request logging, header customization, data transformation, and more.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> DataManager supports applying middleware logic to modify requests and responses during data processing. This capability is useful for handling tasks such as authentication, validation, logging, and transforming response data. Middleware can be applied through two methods: `applyPreRequestMiddlewares` and `applyPostRequestMiddlewares`, each serving a specific stage in the data handling workflow.
 
-## Authorization handling
+**Pre-Request Middleware**
 
-Authorization handling is one of the most essential and common use cases for middleware in Syncfusion ##Platform_Name## DataManager. It ensures that your application securely communicates with protected APIs by injecting authentication credentials such as Bearer tokens, API keys, or session identifiers into outgoing HTTP requests.
+The `applyPreRequestMiddlewares` method executes before a request is sent to the server. It enables modification of request headers, query parameters, or payloads. This is commonly used for adding authentication tokens, restructuring requests, or performing validations. The following code snippet demonstrates how to add an authorization token:
 
-**Use of middleware for authorization:**
+```ts
 
-Implementing authorization through middleware centralizes the logic for token management and request protection, making your codebase more secure, scalable, and maintainable. With Pre-Request middleware, you can ensure that every request to the server includes the required credentials without modifying each request manually.
+dataManager.applyPreRequestMiddlewares([
+   async (context) => {
+      context.request.headers['Authorization'] = 'Bearer your-access-token';
+   }
+]);
 
-**Middleware types:**
+```
 
-Middleware in DataManager can be applied at two stages:
+**Post-Request Middleware**
 
-   * Pre-Request middleware.
+The `applyPostRequestMiddlewares` method runs after a response is received from the server but before the data is bound to a component. It allows filtering, formatting, or restructuring the response to meet application requirements. The following code snippet demonstrates how to format response data:
 
-   * Post-Request middleware.
+```ts
 
-## Pre-Request middleware
+dataManager.applyPostRequestMiddlewares([
+   async (context) => {
+    context.response.result = context.response.result.map(item => ({
+      id: item.Id,
+      name: item.Name.toUpperCase(),
+      date: new Date(item.Timestamp).toLocaleDateString()
+    }));
+  }
+]);
 
-The [applyPreRequestMiddlewares](../api/data/dataManager/#applyprerequestmiddlewares) method enables you to intercept and customize HTTP requests before they are sent to the server. This is particularly useful for adding authorization headers (e.g., bearer token), appending custom query parameters, or modifying request payloads to meet backend expectations. It ensures secure and dynamic request configuration, especially when integrating with authenticated or complex APIs.
+```
 
-For example, you can programmatically inject an authentication token or enrich headers based on user context.
+**Supported data adaptors**
 
-If you're building a SaaS admin dashboard where users log in and fetch their own data from a secured RESTful Web APIs. Each user is issued a JWT (JSON Web Token) after authentication. Every request sent by the Syncfusion DataManager must include this token to validate the user’s identity.
+Middleware functions are supported across multiple DataManager adaptors, including the [WebApiAdaptor](./adaptors/webapi-adaptor), [ODataAdaptor](./adaptors/odatav4-adaptor), and [CustomAdaptor](./adaptors/custom-adaptor), and can be applied to both local and remote data operations. This enhances flexibility, security, and overall control of data processing.
 
-By using `applyPreRequestMiddlewares`, you can automatically inject the JWT into the request headers as an authorization field. This avoids manual token handling and ensures every DataManager request remains authenticated.
+The example demonstrates using the [UrlAdaptor](./adaptors/url-adaptor) with middleware to adjust requests and responses. Before sending a request, `applyPreRequestMiddlewares` fetches an authentication token from an external server and adds it to the request headers. If the token retrieval fails, the DataManager failure event handles the error. Likewise, `applyPostRequestMiddlewares` processes the server response before it is bound to the UI, enabling any required transformations or filtering.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/PreRequestMiddlewares-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/PreRequestMiddlewares-cs1/index.html %}
-{% endhighlight %}
+{% tabs %} 
+{% highlight ts tabtitle="index.ts" %} 
+{% raw %}
+
+import { DataManager, Query, UrlAdaptor, ReturnOption } from '@syncfusion/ej2-data';
+import { compile } from '@syncfusion/ej2-base';
+
+const template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';
+const compiledFunction = compile(template);
+const table = document.getElementById('datatable') as HTMLElement;
+
+const data = new DataManager({
+  url: 'https://services.syncfusion.com/js/production/api/UrlDataSource',
+  adaptor: new UrlAdaptor(),
+}).executeQuery(new Query()).then((e: ReturnOption) => {
+  (e.result as Object[]).forEach((data: Object) => {
+    table.appendChild(compiledFunction(data)[0]);
+  });
+});
+
+// Method to apply middleware before sending a request to the server.
+data.applyPreRequestMiddlewares = async (request: string | Object): Promise<object> => {
+  // Fetch authentication token from an external service.
+  const response = await fetch('https://example.com/api/token', { // Replace with your actual endpoint. This URL is just for example purposes.
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  });
+
+  if (!response.ok) {
+  throw new Error(`HTTP error! Status: ${response.status}`);
+  }
+  
+  // Return the authentication token.
+  return { token: "your_token_value" };
+};
+
+data.dataManagerFailure = (e: Error) => {
+  //Handle DataManager failure event.
+}
+
+// Method to apply middleware after receiving a response from the server
+data.applyPostRequestMiddlewares = async (response: string | Object): Promise<Object> => {
+  return response;
+};
+
+{% endraw %}
+{% endhighlight %}
+
+{% highlight html tabtitle="index.html" %} 
+{% include code-snippet/data/supported-adaptors/index.html %} 
+{% endhighlight %} 
 {% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/PreRequestMiddlewares-cs1" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/PreRequestMiddlewares-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/PreRequestMiddlewares-cs1/index.html %}
-{% endhighlight %}
+{% tabs %} 
+{% highlight js tabtitle="index.js" %} 
+{% raw %}
+
+var template =
+'<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';
+var compiledFunction = ej.base.compile(template);
+var table = document.getElementById('datatable');
+
+const data = new ej.data.DataManager({
+   url: 'https://services.syncfusion.com/js/production/api/UrlDataSource',
+   adaptor: new ej.data.UrlAdaptor(),
+   }).executeQuery(new ej.data.Query()).then(function (e) {
+   e.result.forEach(function (data) {
+      table.appendChild(compiledFunction(data)[0]);
+   });
+});
+
+// Method to apply middleware before sending a request to the server.
+data.applyPreRequestMiddlewares = async function(request) {
+   // Fetch authentication token from an external service.
+   const response = await fetch('https://example.com/api/token', { // Replace with your actual endpoint. This URL is just for example purposes.
+      method: 'POST',
+      headers: {
+         'Content-Type': 'application/json'
+      }
+   });
+
+   if (!response.ok) {
+   throw new Error(`HTTP error! Status: ${response.status}`);
+   }
+   // Return the authentication token.
+   return { token: "your_token_value" };
+};
+
+data.dataManagerFailure = (e) => {
+   // Handle DataManager failure event.
+}
+
+// Method to apply middleware after receiving a response from the server.
+data.applyPostRequestMiddlewares = async function(response) {
+   return response;
+};
+
+{% endraw %}
+{% endhighlight %} 
+
+{% highlight html tabtitle="index.html" %} 
+{% include code-snippet/data/supported-adaptors/index.html %} 
+{% endhighlight %} 
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/data/PreRequestMiddlewares-cs1" %}
 {% endif %}
-
-In this example, the middleware intercepts the request object, adds an Authorization header, and then forwards the modified request to the server.
-
-![PreRequestMiddlewares](./image/pre-request-middleware.png)
-
-## Post-Request middleware
-
-The [applyPostRequestMiddlewares](../api/data/dataManager/#applypostrequestmiddlewares) method allows you to intercept and manipulate the response after it’s received from the server but before it’s bound to the UI component. This is ideal for transforming API response formats, filtering unnecessary fields, renaming keys, or applying custom formatting to match the structure expected by your application.
-
-If your API returns a nested object, but your component expects a flat array. Using `applyPostRequestMiddlewares`, you can flatten and restructure the response seamlessly.
-
-For example, in a sales dashboard, the API may return product data with inconsistent formats such as uppercase product names, UNIX timestamps, and field names so you can use the middleware to convert names to title case, format timestamps into readable dates, and rename keys (e.g., prod_id to ProductID) before displaying the data.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/PostRequestMiddlewares-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/PostRequestMiddlewares-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/PostRequestMiddlewares-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/PostRequestMiddlewares-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/PostRequestMiddlewares-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/PostRequestMiddlewares-cs1" %}
-{% endif %}
-
-**Original data:**
-![PostRequestMiddlewares-before](./image/post-request-before-data.png)
-**Transformed data:**
-![PostRequestMiddlewares-after](./image/post-request-middleware.png)
-
-## Supported data adaptors
-
-Middleware functions are compatible with various DataManager adaptors, including [WebApiAdaptor](./adaptors#web-api-adaptor), [ODataAdaptor](./adaptors#odata-adaptor), and [CustomAdaptor](./adaptors#customadaptor). They support both local and remote data processing. By leveraging middleware, you can improve the flexibility, security, and efficiency of data handling within your application.
-
-The following code example demonstrates how to use Syncfusion's `WebApiAdaptor` while applying middleware logic to modify requests and responses. Before sending a request to the backend, the [applyPreRequestMiddlewares](../api/data/dataManager/#applyprerequestmiddlewares) method retrieves an authentication token from an external middleware server and adds it to the request headers. If the middleware server fails to return a valid token, the `dataManagerFailure` event is triggered to handle the error.
-
-The [applyPostRequestMiddlewares](../api/data/dataManager/#applypostrequestmiddlewares) method processes the server response before updating the component. This allows for any necessary transformations, such as filtering or reformatting, to be applied before the data is bound to the UI. These middleware methods enhance request lifecycle management, improve security, and offer greater control over data manipulation in applications.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/supported-adaptors/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/supported-adaptors/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/supported-adaptors" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/supported-adaptors/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/supported-adaptors/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/supported-adaptors" %}
-{% endif %}  
-
-**Pre middlewares request response:**
-![Pre-Middlewares-Request](./image/pre-request-adaptors.png)
-**Post middlewares request response:**
-![Post-Middlewares-Request](./image/Post-request-adaptors.png)
-
-## Custom headers
-
-The Syncfusion ##Platform_Name## DataManager allows you to add custom HTTP headers to each request, enabling advanced scenarios such as:
-
-* **Authentication** – for example, adding a JWT token to verify the user.
-
-* **Multi-tenant access** – such as including a tenant ID to identify which tenant the request belongs to.
-
-* **Feature control or localization** – like enabling specific features or setting language preferences.
-
-* **Content negotiation or routing** – to handle different content types or direct requests based on custom logic
-
-When making cross-origin requests with custom headers, browsers will automatically issue a `preflight (options)` request to verify server permissions.
-
-**Ways to add custom headers:**
-
-* Static headers during DataManager initialization.
-
-* Dynamic headers via [applyPreRequestMiddlewares](../api/data/dataManager/#applyprerequestmiddlewares).
-
-* Custom adaptor-level injection for advanced control.
-
-### Using the headers property
-
-You can assign custom headers directly during the initialization of the DataManager by using the `headers` property. This approach is ideal when you have static or pre-defined headers such as authorization tokens or tenant IDs.
-
-This method ensures that all requests made by the DataManager automatically include these headers without the need for additional logic or middleware handling. This is useful for sending static API keys, including content-type headers, applying application-level custom identifiers.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/custom-header/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/custom-header/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/custom-header" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/custom-header/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/custom-header/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/custom-header" %}
-{% endif %}
-
-![Custom-header](./image/custom-headers.png)
-
-### Using beforeSend
-
-The `beforeSend` callback allows you to dynamically modify request headers just before the request is dispatched. This is useful when headers depend on runtime information, such as freshly fetched tokens or user specific data.
-
-**Parameters:**
-
-It accepts an three arguments:
-
-* **DataManager (dm):** Provides the datasource and adaptor value.
-
-* **Request (request):** Used to send custom headers, such as setting the Authorization header.
-
-* **Settings (settings)**: An optional argument that allows additional configurations.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/custom-header-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/custom-header-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/custom-header-cs2" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/custom-header-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/custom-header-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/custom-header-cs2" %}
-{% endif %}
-
-![custom-header-beforeSend](./image/beforesend-headers.png)
-
-## Sending additional parameters to server
-
-When working with remote data sources, it is often necessary to send additional parameters to the server, such as filtering values, paging limits, or culture settings. The DataManager supports this by allowing custom parameters to be appended to the query string of the request using the [addParams](../api/data/query/#addparams) method.
-
-The `addParams` method of the [Query](../api/data/query/) class is used to append custom query string parameters to the request sent by the DataManager. These parameters are useful when you want to pass additional data required by the server to process the request.
-
-The following example demonstrates how to send an additional parameter `($top)` to limit the number of records retrieved from the server:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/additional-parameter-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/additional-parameter-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/additional-parameter-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/additional-parameter-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/additional-parameter-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/additional-parameter-cs1" %}
-{% endif %}
-
-![Additional-parameter](./image/additional-parameter.png)
\ No newline at end of file
diff --git a/ej2-javascript/data/cache.md b/ej2-javascript/data/cache.md
new file mode 100644
index 000000000..eeb09958e
--- /dev/null
+++ b/ej2-javascript/data/cache.md
@@ -0,0 +1,141 @@
+---
+layout: post
+title: ##Platform_Name## DataManger - Cache | Syncfusion
+description: Improve performance in Syncfusion ##Platform_Name## DataManager by enabling cache to avoid redundant requests for paged data.
+control: Cache 
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Cache in ##Platform_Name## DataManager
+
+The Syncfusion<sup style="font-size:70%">&reg;</sup> DataManager provides the `enableCache` property, which enhances performance by reducing redundant HTTP requests for previously visited pages. When caching is enabled, the [DataManager](https://ej2.syncfusion.com/documentation/api/data/dataManager) retrieves data from the cache instead of sending a new request, minimizing server load and improving experience.
+
+**How it works**
+
+* When `enableCache` property is set to "true", the DataManager generates a unique ID at initialization and uses it to store previously loaded page data in cache memory. This enables efficient data retrieval without redundant server requests.
+
+* The cache is automatically cleared when data actions such as sorting, filtering, grouping, searching, or CRUD operations (Create, Read, Update, Delete) are performed.
+
+* This feature is supported by all adaptors in Syncfusion<sup style="font-size:70%">&reg;</sup> DataManager, ensuring consistent caching behavior across different data sources.
+
+The following code demonstrates how to enable caching using the `enableCache` property in the Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## DataManager:
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% raw %}
+
+import { Grid } from '@syncfusion/ej2-grids';
+import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
+
+let data: Object = new DataManager({
+  url: "https://services.syncfusion.com/js/production/api/orders",
+  adaptor: new WebApiAdaptor(),
+  crossDomain: true,
+  enableCache: true // Enables caching to prevent repeated HTTP requests.
+});
+
+let grid: Grid = new Grid({
+  dataSource: data,
+  columns: [
+    { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, type: 'number' },
+    { field: 'CustomerID', width: 100, headerText: 'Customer ID', type: 'string' },
+    { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 100 },
+    { field: 'OrderDate', headerText: 'Order Date', format: 'yMd', width: 120, textAlign: 'Right', type:'Date' },
+  ],
+});
+
+grid.appendTo('#Grid');
+
+{% endraw %}
+{% endhighlight %}
+
+{% highlight html tabtitle="index.html" %}
+{% raw %}
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link rel="shortcut icon" href="resources/favicon.ico" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    ....
+    ....
+  </head>
+
+  <body>
+    <div>
+      <!--HTML grid element, which is going to render as Essential JS 2 Grid-->
+      <div id="Grid"></div>
+    </div>
+  </body>
+</html>
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% raw %}
+
+var data = new ej.data.DataManager({
+  url: "https://services.syncfusion.com/js/production/api/orders",
+  adaptor: new ej.data.WebApiAdaptor(),
+  crossDomain: true,
+  enableCache: true // Enables caching to prevent repeated HTTP requests.
+});
+
+var grid = new ej.grids.Grid({
+  dataSource: data,
+  columns: [
+    { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, type: 'number' },
+    { field: 'CustomerID', width: 100, headerText: 'Customer ID', type: 'string' },
+    { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 100 },
+    { field: 'OrderDate', headerText: 'Order Date', format: 'yMd', width: 120, textAlign: 'Right', type:'Date' },
+  ],
+});
+
+grid.appendTo('#Grid');
+
+{% endraw %}
+{% endhighlight %}
+
+{% highlight html tabtitle="index.html" %}
+{% raw %}
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link rel="shortcut icon" href="resources/favicon.ico" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    ....
+    ....
+  </head>
+
+  <body>
+    <div>
+      <!--HTML grid element, which is going to render as Essential JS 2 Grid-->
+      <div id="Grid"></div>
+    </div>
+  </body>
+</html>
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/data/crud-operations.md b/ej2-javascript/data/crud-operations.md
index 1dd1832f3..eecd5c3a4 100644
--- a/ej2-javascript/data/crud-operations.md
+++ b/ej2-javascript/data/crud-operations.md
@@ -1,258 +1,155 @@
 ---
 layout: post
-title: Manipulation in ##Platform_Name## DataManager | Syncfusion
-description: Learn here all about Manipulation in Syncfusion ##Platform_Name## DataManager of Syncfusion Essential JS 2 and more.
+title: ##Platform_Name## DataManager - Manipulation | Syncfusion
+description: Perform CRUD operations in Syncfusion ##Platform_Name## DataManager insert, update, remove records and batch edits.
+control: Manipulation
+publishingplatform: ##Platform_Name## 
 platform: ej2-javascript
-control: Manipulation 
-publishingplatform: ##Platform_Name##
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# CRUD operations in Syncfusion ##Platform_Name## DataManager
+# Manipulation in ##Platform_Name## DataManager
 
-The Syncfusion ##Platform_Name## DataManager enables seamless Create, Read, Update, and Delete (CRUD) operations on data, whether it is stored locally in the browser or remotely on a server. You can manipulate data using the DataManager by calling its built-in methods and then binding it to UI components such as Grid, Gantt, or Scheduler. These components automatically trigger CRUD actions based on user interactions, such as editing a row or deleting a record.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## DataManager enables easy data manipulation, including creating, updating, and deleting records. It works with both local and remote data sources and offers a consistent interface for handling data operations.
 
-Each datasource type handles CRUD operations differently. To manage this, DataManager uses data adaptors translate DataManager actions into the appropriate format for the target datasource.
+Data manipulation refers to performing CRUD (Create, Read, Update, Delete) actions on a data source. These operations are crucial for managing application data. [DataManager](../api/data/dataManager) streamlines this process by providing a unified approach to executing CRUD operations across different data sources.
 
-**Data Adaptors and CRUD Translation:**
+## Insert
 
-| Adaptor Type           | Target DataSource     | Notes                                                                 |
-|------------------------|------------------------|-----------------------------------------------------------------------|
-| `JsonAdaptor`          | Local JSON data        | All changes are made in-memory. Useful for offline scenarios.        |
-| `UrlAdaptor`           | RESTful WebAPIs endpoints      | Sends GET/POST/PUT/DELETE requests to remote URLs.                   |
-| `WebApiAdaptor`        | ASP.NET Web API        | Formats requests per Web API standards (e.g., OData-style queries).  |
-| `ODataAdaptor` / V4    | OData services         | Compatible with OData-compliant services and supports query options. |
-| `RemoteSaveAdaptor`    | Remote, batch updates  | Batches multiple CRUD operations into a single request.              |
-| `CustomAdaptor`        | Developer-defined      | Extend the base class to fully control how CRUD requests behave.     |
-
-## Performing CRUD operations
-
-The process of performing CRUD operations varies depending on the datasource:
-
-* For local data, operations are performed directly on in-memory or client-side collections.
-
-* For remote data, CRUD actions are translated into HTTP requests sent to specified service endpoints, allowing interaction with centralized servers or cloud databases.
-
-### Local data
-
-Local data CRUD operations allow you to efficiently manage and manipulate data stored in your application without the need for external servers or APIs. This is useful for smaller applications, offline use cases, or situations where you want to quickly manipulate temporary datasets within your application.
-
-To perform CRUD operations on local data using Syncfusion ##Platform_Name## DataManager, follow these steps:
-
-**1. Initialize the DataManager with local data:**
-
-  You can initialize the DataManager with a dataset by either:
-
-  * Assigning a JavaScript object array to the `json` property.
-    
-  * Passing the dataset directly to the `DataManager` constructor.
-
-**2. Perform CRUD operations using the following DataManager methods:**
-
-  * [insert](../api/data/dataManager/#insert) : The JSON data passed as a parameter to the insert method that is inserted to the datasource of the dataManager.
-
-  * [update](../api/data/dataManager/#update): Modifies or updates an existing record in the datasource using a unique key.
-
-  * [remove](../api/data/dataManager/#remove) : Removes a record from the local datasource using a unique key.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> DataManager provides a way to add new records to a data source. The [insert](../api/data/dataManager#insert) method allows new entries to be added programmatically.
 
+Insert operations in DataManager enable adding new records by collecting input from form elements and triggering the insertion programmatically, as shown in the example below.
 
 {% if page.publishingplatform == "typescript" %}
 
 {% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/manipulation-cs4/index.ts %}
+{% include code-snippet/data/manipulation-cs1/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/manipulation-cs4/index.html %}
+{% include code-snippet/data/manipulation-cs1/index.html %}
 {% endhighlight %}
 {% endtabs %}
         
-{% previewsample "page.domainurl/code-snippet/data/manipulation-cs4" %}
+{% previewsample "page.domainurl/code-snippet/data/manipulation-cs1" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/manipulation-cs4/index.js %}
+{% include code-snippet/data/manipulation-cs1/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/manipulation-cs4/index.html %}
+{% include code-snippet/data/manipulation-cs1/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/data/manipulation-cs4" %}
+{% previewsample "page.domainurl/code-snippet/data/manipulation-cs1" %}
 {% endif %}
 
-> * Primary key name is required by the [update](../api/data/dataManager/#update) method to find the record to be updated.
-> * Primary key name and its value are required to find the record to be removed.
-
-### Remote data
-
-Remote data CRUD operations allow you to manage data hosted on a remote server or external API using the Syncfusion ##Platform_Name## DataManager. This is especially useful for modern web applications that interact with centralized databases or cloud services, ensuring seamless synchronization between client and server.
-
-To perform CRUD operations on remote data using DataManager, follow these steps:
+> In remote data sources, when the primary key field is an identity field, then it is advised to return the created data in the response.
 
-**1. Initialize the DataManager with remote data:**
+## Update
 
-  You can bind the DataManager to a remote datasource by specifying the service endpoint URL in the `url` property. Additionally, to handle CRUD operations properly, you should specify separate URLs for insert, update, and remove actions using the properties:
+The Syncfusion<sup style="font-size:70%">&reg;</sup> DataManager provides a powerful way to update existing records in a data source without replacing the entire dataset.
 
-   * `insertUrl`: The endpoint URL to insert (create) new records.
+Update operations allow modifying specific records through the [update](../api/data/dataManager#update) method in the [DataManager](../api/data/dataManager) class, ensuring accuracy and consistency in the data. To use the `update` method, a "KeyField (primary key)" must be defined. This unique identifier allows `DataManager` to accurately locate and update the corresponding record.
 
-   * `updateUrl`: The endpoint URL to update existing records.
-
-   * `removeUrl`: The endpoint URL to delete records.
-
-  The **DataManager** uses these URLs to perform the respective operations by sending appropriate HTTP requests to the server.
-
-  To retrieve data from the remote server, use the DataManager’s [executeQuery](../api/data/dataManager/#executequery) method. This method converts the **Query** object into a server request and sends it to the specified endpoint. It then waits for the server response in JSON format and returns the resulting data.
-
-**2. Perform CRUD operations using the following DataManager methods:**
-
-  Use the following DataManager methods to perform client-side CRUD actions, which are automatically translated into HTTP requests to the corresponding remote URLs:
-
-| Method | Description                                                                                   |
-|--------|-----------------------------------------------------------------------------------------------|
-| [insert](../api/data/dataManager/#insert) | Sends a POST request to `insertUrl` to create a new record.                                    |
-| [update](../api/data/dataManager/#update) | Sends a PUT/PATCH request to `updateUrl` to modify an existing record, identified by a primary key. |
-| [remove](../api/data/dataManager/#remove) | Sends a DELETE request to `removeUrl` to remove a record, using a primary key to identify it.  |
+The example includes an input box for editing values and a button that triggers the `update` method to apply the changes efficiently.
 
 {% if page.publishingplatform == "typescript" %}
 
 {% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/manipulation-remote/index.ts %}
+{% include code-snippet/data/manipulation-cs2/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/manipulation-remote/index.html %}
-{% endhighlight %}
-{% highlight cs tabtitle="OrderController.cs" %}
-{% include code-snippet/data/manipulation-remote/OrderController.cs %}
-{% endhighlight %}
-{% highlight cs tabtitle="OrdersDetails.cs" %}
-{% include code-snippet/data/manipulation-remote/OrdersDetails.cs %}
+{% include code-snippet/data/manipulation-cs2/index.html %}
 {% endhighlight %}
 {% endtabs %}
         
+{% previewsample "page.domainurl/code-snippet/data/manipulation-cs2" %}
+
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/manipulation-remote/index.js %}
+{% include code-snippet/data/manipulation-cs2/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/manipulation-remote/index.html %}
-{% endhighlight %}
-{% highlight cs tabtitle="OrderController.cs" %}
-{% include code-snippet/data/manipulation-remote/OrderController.cs %}
-{% endhighlight %}
-{% highlight cs tabtitle="OrdersDetails.cs" %}
-{% include code-snippet/data/manipulation-remote/OrdersDetails.cs %}
+{% include code-snippet/data/manipulation-cs2/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
+{% previewsample "page.domainurl/code-snippet/data/manipulation-cs2" %}
 {% endif %}
 
-> * The [update](../api/data/dataManager/#update) method requires the primary key name to locate the record to be modified, while the remove method requires both the primary key name and its value to identify the record to be deleted.
->* In remote datasources, when the primary key field is an identity field, then it is advised to return the created data in the response.
-
-## Handling batch operations
-
-The Syncfusion ##Platform_Name## DataManager supports batch operations, allowing multiple CRUD actions such as create, update, and delete to be submitted in a single request. This feature improves performance by minimizing the number of HTTP requests sent to the datasource, reducing network overhead and enhancing efficiency.
-
-Use the [saveChanges](../api/data/dataManager/#savechanges) method to commit all pending changes (insertions, updates, and deletions) in a single call. This eliminates the need for individual requests for each action.
-
-**How Batch processing works:**
-
-Batch processing involves maintaining three separate arrays to track different types of data modifications:
+> Primary key name is required by the `update` method to find the record to be updated.
 
-* **addedRecords** — Records to add.
+## Remove
 
-* **changedRecords** — Records to update.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> DataManager provides a seamless way to delete specific records from a data source without affecting the entire dataset. The [remove](../api/data/dataManager#remove) method handles this operation, and defining a "KeyField (primary key)" is required to uniquely identify each record.
 
-* **deletedRecords** — Records to delete.
-
-These arrays are then passed to the DataManager’s `saveChanges` method along with the primary key field name, which uniquely identifies each record.
-
-Below is an example demonstrating batch CRUD operations using local data:
+The KeyField parameter enables the `remove` method to accurately locate and delete the intended entry. The example demonstrates how to delete a record using `DataManager`, with an input box to enter the KeyField value and a button that triggers the remove method.
 
 {% if page.publishingplatform == "typescript" %}
+
 {% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/manipulation-local-batch/index.ts %}
+{% include code-snippet/data/manipulation-cs3/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/manipulation-local-batch/index.html %}
+{% include code-snippet/data/manipulation-cs3/index.html %}
 {% endhighlight %}
 {% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/manipulation-local-batch" %}
+        
+{% previewsample "page.domainurl/code-snippet/data/manipulation-cs3" %}
 
 {% elsif page.publishingplatform == "javascript" %}
+
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/manipulation-local-batch/index.js %}
+{% include code-snippet/data/manipulation-cs3/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/manipulation-local-batch/index.html %}
+{% include code-snippet/data/manipulation-cs3/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/data/manipulation-local-batch" %}
+{% previewsample "page.domainurl/code-snippet/data/manipulation-cs3" %}
 {% endif %}
 
-## Handling server errors
-
-When performing data operations using Syncfusion's DataManager, such as fetching, inserting, updating, or deleting data from a remote server, these operations are asynchronous and can encounter errors due to server issues, network problems, or invalid requests.
-
-To manage these failures effectively, you can use the [catch](../api/data/deferred/#catch) method available on the promise returned by the DataManager operation. The `catch` block allows you to gracefully handle errors by:
-
-* Identify and capture failures caused by unreachable endpoints, timeouts, or server-side issues.
-
-* Prevent application crashes by safely intercepting unhandled promise rejections.
+> Primary key name and its value are required to find the record to be removed.
 
-* Display user-friendly error messages (e.g., "Failed to load data. Please try again later.") to inform the user of the problem.
+## Batch edit operation
 
-* Log error details for developers to analyze, helping with faster debugging and resolution.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> DataManager provides built‑in support for batch processing of CRUD (Create, Read, Update, Delete) operations, enabling efficient handling of multiple edits in a single request. This approach improves performance by grouping multiple add, update, and remove actions, thereby reducing server interactions and overall network overhead.
 
-* Trigger fallback logic, such as retry mechanisms or offline storage access.
-
-The following sample demonstrates how to use the `catch` block to manage errors during DataManager operations.
+Batch edits are managed through the [saveChanges](../api/data/dataManager#savechanges) method, which processes all pending operations together. The example demonstrates this workflow by using input fields to gather the required data for each action and buttons to enqueue the corresponding operations. Finally, the Save Changes button commits all modifications to the data source through the `saveChanges` method.
 
 {% if page.publishingplatform == "typescript" %}
-
 {% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/manipulation-error/index.ts %}
+{% include code-snippet/data/manipulation-local-batch/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/manipulation-error/index.html %}
-{% endhighlight %}
-{% highlight cs tabtitle="OrderController.cs" %}
-{% include code-snippet/data/manipulation-error/OrderController.cs %}
-{% endhighlight %}
-{% highlight cs tabtitle="OrdersDetails.cs" %}
-{% include code-snippet/data/manipulation-error/OrdersDetails.cs %}
+{% include code-snippet/data/manipulation-local-batch/index.html %}
 {% endhighlight %}
 {% endtabs %}
-        
-{% elsif page.publishingplatform == "javascript" %}
 
+{% previewsample "page.domainurl/code-snippet/data/manipulation-local-batch" %}
+
+{% elsif page.publishingplatform == "javascript" %}
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/manipulation-error/index.js %}
+{% include code-snippet/data/manipulation-local-batch/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/manipulation-error/index.html %}
-{% endhighlight %}
-{% highlight cs tabtitle="OrderController.cs" %}
-{% include code-snippet/data/manipulation-error/OrderController.cs %}
-{% endhighlight %}
-{% highlight cs tabtitle="OrdersDetails.cs" %}
-{% include code-snippet/data/manipulation-error/OrdersDetails.cs %}
+{% include code-snippet/data/manipulation-local-batch/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
+{% previewsample "page.domainurl/code-snippet/data/manipulation-local-batch" %}
 {% endif %}
 
-![Handling server errors](./image/error-handling.gif)
diff --git a/ej2-javascript/data/data-binding.md b/ej2-javascript/data/data-binding.md
index 028ef0541..46b733bff 100644
--- a/ej2-javascript/data/data-binding.md
+++ b/ej2-javascript/data/data-binding.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Data binding in ##Platform_Name## DataManager | Syncfusion
-description: Learn here all about Data binding in Syncfusion ##Platform_Name## DataManager of Syncfusion Essential JS 2 and more.
+title: ##Platform_Name## DataManger - Data Binding | Syncfusion
+description: Explore local and remote data binding in Syncfusion ##Platform_Name## DataManager, bind JavaScript arrays or REST APIs with executeLocal and executeQuery.
 platform: ej2-javascript
 control: Data binding 
 publishingplatform: ##Platform_Name##
@@ -9,53 +9,23 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Data Binding in Syncfusion ##Platform_Name## DataManager
+# Data Binding in ##Platform_Name## DataManager
 
-This section explains how to perform data binding using both local and remote datasources with the Syncfusion DataManager in ##Platform_Name## applications.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## DataManager enables efficient data management in ##Platform_Name## applications. It supports both RESTful JSON data services binding and local JavaScript object array binding, providing flexibility to handle and manipulate data.
 
-## Data Binding
+Data binding is the process of connecting Syncfusion ##Platform_Name## components with data sources, allowing the UI to reflect changes in the data automatically. [DataManager](https://ej2.syncfusion.com/documentation/api/data/dataManager) simplifies this process by providing seamless integration with ##Platform_Name## components, enabling efficient data binding without unnecessary code.
 
-The Syncfusion ##Platform_Name## DataManager enables efficient data management in ##Platform_Name## applications. It supports both RESTful WebAPIs that return JSON data and local JavaScript object array binding, providing flexibility to handle and manipulate data.
+## Local data binding
 
-Data binding is the process of connecting UI elements with datasources, allowing the UI to reflect changes in the data automatically. The [DataManager](../api/data/dataManager/) abstracts this process by managing CRUD operations, query building, and communication with local or remote datasources.
+Local data binding allows to bind [DataManager](https://ej2.syncfusion.com/documentation/api/data/dataManager) directly to an array of JavaScript objects stored within the application. This approach is simple and efficient for small datasets or static data that does not need to be fetched from a server.
 
-For example, consider an HR dashboard that displays a list of employees, including fields such as Name, Department, Role, and Status. Instead of writing custom code to fetch and manage data manually, the developer binds the Grid to a DataManager instance.
+DataManager initialization enables binding local data by assigning the array of JavaScript objects to the `json` property or passing them to the constructor during instantiation. Once initialized, the array of JavaScript objects becomes the datasource for `DataManager`, enabling seamless querying and data manipulation. Follow these steps to bind local data using Syncfusion<sup style="font-size:70%">&reg;</sup> `DataManager`:
 
-The DataManager handles all data operations efficiently, including:
+1. Define a local array of objects.
+2. Initialize DataManager with the `json` property set to that array.
+3. Use the `executeLocal` method of DataManager to run queries and perform data operations directly on local datasets.
 
-* Fetching records from a remote Web API,
-
-* Filtering employees by department or status,
-
-* Sorting by name or other fields,
-
-* Performing CRUD actions (Create, Read, Update, and Delete) seamlessly.
-
-By leveraging DataManager, the application ensures cleaner code, better maintainability, and a consistent data-handling experience across components.
-
-It supports two kinds of data binding methods:-
-
-1. Local data
-2. Remote data
-
-### Local data binding
-
-Local data binding allows you to bind the Syncfusion ##Platform_Name## DataManager directly to an array of JavaScript objects stored within the application. This method is particularly useful for small to medium-scale applications, static or preloaded datasets, scenarios where external API calls are unnecessary or undesired.
-
-It provides a simple and efficient way to manage client-side data, enabling built-in data operations such as filtering, sorting, grouping, and paging without relying on a remote server.
-
-For example, consider an employee directory for a small company where the employee data is fixed and stored locally within the application as an array of objects. Instead of making API calls each time sorting or filtering is needed, the local data can be bound to the DataManager to perform all operations instantly on the client side. This approach minimizes server load and enhances the application's responsiveness.
-
-To achieve this:
-
-* You can initialize the `DataManager` with a local data source by either:
-
-    1. Assigning a JavaScript object array to the `json` property.
-    2. Pass the array directly to the `DataManager` constructor during instantiation.
-
-* After binding the local data to the DataManager, you can query and manipulate the data using the built-in **Query** class in combination with the [executeLocal](../api/data/dataManager/#executelocal)  method.
-
-The following example demonstrates how to bind JSON data using the `executeLocal` method of DataManager:
+The following example demonstrates how to bind JSON data using the [executeLocal](../api/data/dataManager#executelocal) method of `DataManager`.
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -84,19 +54,19 @@ The following example demonstrates how to bind JSON data using the `executeLocal
 {% previewsample "page.domainurl/code-snippet/data/getting-started-cs5" %}
 {% endif %}
 
-### Remote data binding
+## Remote data binding
 
-Remote data binding refers to connecting a UI component to data retrieved from an external source such as a RESTful WebAPIs, web service, or cloud database. This technique is especially useful in scenarios where large datasets need to be fetched from a server, real-time data updates are required, or data needs to be accessed from an external API or database.
+Remote data binding is particularly useful in scenarios where large datasets need to be fetched from a server, real-time data updates are required, or data needs to be accessed from an external API or database.
 
-For example, consider an online store application where the product catalog is stored on a remote server. Since the product data is frequently updated and can be very large, fetching it directly from the server ensures the latest information is always displayed. Remote data binding allows the application to request only the needed data, such as filtered or paged results, reducing the amount of data transferred and improving performance.
+Follow these steps to bind remote data using Syncfusion<sup style="font-size:70%">&reg;</sup> `DataManager`:
 
-Configure remote data binding with below steps:-
+1. Start by creating an instance of `DataManager` and assign the service endpoint URL to the `url` property.
 
-* To bind remote data, you can use the Syncfusion ##Platform_Name## DataManager by specifying the service endpoint URL in the `url` property. The DataManager handles all data interactions, including query serialization, server communication, and response parsing.
+2. Use the [executeQuery](../api/data/datamanager#executequery) method to send a [query](../api/data/query) to the server and fetch data in JSON format.
 
-* To retrieve data from the remote server, use the DataManager’s [executeQuery](../api/data/datamanager/#executequery) method. This method converts the **Query** object into a server request and sends it to the specified endpoint. It then waits for the server response in JSON format and returns the resulting data.
+3. After calling `executeQuery`, the DataManager waits for the server response, converts it into a JSON format, and returns the data to the UI.
 
-The following example demonstrates bind remote data using the `executeQuery` method of DataManager:
+The following example demonstrates how to bind JSON data using the `executeQuery` method of `DataManager`.
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -125,297 +95,16 @@ The following example demonstrates bind remote data using the `executeQuery` met
 {% previewsample "page.domainurl/code-snippet/data/getting-started-cs6" %}
 {% endif %}
 
-> The queried data will not be cached locally unless `offline` mode is enabled.
-
-## Component Binding
-
-The Syncfusion ##Platform_Name## DataManager provides an abstraction for handling data binding across various UI components, including [Grid](../../grid/getting-started), [DropDownList](../../drop-down-list/getting-started), [Charts](../../chart/getting-started), and HTML tables. It supports both local and remote datasources, enabling flexible integration with data services.
-
-With built-in support for operations such as filtering, sorting, grouping, paging, and CRUD actions, the DataManager streamlines the process of managing data logic in modern web applications.
-
-### Using with Grid
-
-The Syncfusion ##Platform_Name## `Grid` provides flexible support for binding data from multiple sources. You can use either a local JavaScript object array or connect to remote services using the `DataManager`.
-
-This section demonstrates how to bind data to the `Grid` using both local and remote sources.
-
-For complete setup instructions, refer to the [Grid Getting Started](../../grid/getting-started) documentation.
-
-**Binding local data:**
-
-Binding local data allows you to directly associate a JavaScript object array with the `Grid`. This is useful when working with small to medium-sized datasets stored locally.
-
-For example, consider an HR dashboard that displays a list of employees, including fields such as Name, Department, Role, and Status. Instead of writing custom code to fetch and manage data manually, the developer binds the `Grid` to a DataManager instance initialized with a local array of employee objects. This enables easy sorting by department or filtering by role directly within the grid UI without additional server calls.
-
-To bind local data to the `Grid`, you can directly assign a JavaScript object array to the [dataSource](../api/grid/#datasource) property. Alternatively, you can use an instance of the DataManager with a local data source.
-
-Here's an example demonstrating binding local data using the `DataManager`:
+> - The queried data will not be cached locally unless offline mode is enabled.
 
 {% if page.publishingplatform == "typescript" %}
 
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/data-binding-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/data-binding-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/data-binding-cs1" %}
+> - DataManager is directly bound to Syncfusion components such as the Grid through the [dataSource](https://ej2.syncfusion.com/documentation/api/grid#datasource) property rather than using `executeQuery`. Refer to the Grid data‑binding [documentation](https://ej2.syncfusion.com/documentation/grid/data-binding/data-binding).
 
 {% elsif page.publishingplatform == "javascript" %}
 
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/data-binding-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/data-binding-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/data-binding-cs1" %}
-{% endif %}
-
-**Binding remote data:**
-
-Binding remote Data allows you to connect the `Grid` to a remote data source, such as an API or service endpoint, to dynamically fetch and display large datasets from a server. This is useful when working with large datasets or when the data is hosted on a server.
-
-For example, in an e-commerce admin panel, the product inventory data can be very large and frequently updated. Binding the `Grid` to a remote service via DataManager allows the admin panel to fetch only the required pages of product data on demand, with built-in support for paging and sorting, ensuring performance and scalability.
-
-To bind remote data, you can configure the DataManager with the service endpoint URL and assign it to the `Grid's` [dataSource](../api/grid/#datasource) property.
-
-Here’s an example demonstrating binding remote data to the `Grid` using the `DataManager`:
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/data-binding-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/data-binding-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/data-binding-cs2" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/data-binding-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/data-binding-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/data-binding-cs2" %}
-{% endif %}
-
-### Using with DropDownList
-
-The Syncfusion ##Platform_Name## `DropDownList` provides flexible support for binding data from various sources. You can bind local JavaScript object arrays or connect to remote services to populate the list items.
-
-This section demonstrates how to bind data to the `DropDownList` using both local and remote sources.
-
-For complete setup instructions, refer to the [DropDownList Getting Started](../../drop-down-list/es5-getting-started) documentation.
-
-**Binding local data:**
-
-Binding local data allows you to directly associate a local dataset, such as a simple array or complex objects, with the `DropDownList`. This is useful when you have data available within your application and want to visualize it in the dropdown.
-
-For example, a form in a corporate intranet site may have a "Department" dropdown populated with a static list of departments such as HR, Sales, IT, and Marketing. Since these options rarely change, binding the DropDownList to a local array improves performance and eliminates unnecessary network requests.
-
-You can achieve this by making the `DropDownList` generate its list items from an array of complex data. To do this, map the appropriate fields using the [fields](../api/drop-down-list/#fields) property and assign the dataset to the [dataSource](../api/drop-down-list/#datasource) property.
-
-Additionally, the `DropDownList` supports binding an array of primitive data types such as strings or numbers.
-
-Here’s an example demonstrating how to bind local data from an array of JSON objects using the `DataManager`:
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/data-binding-cs3/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/data-binding-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/data-binding-cs3" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/data-binding-cs3/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/data-binding-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/data-binding-cs3" %}
-{% endif %}
-
-**Binding remote data:**
-
-Binding remote data allows you to fetch and display data dynamically from a remote server or web API. This is useful when working with large datasets or when the data is hosted externally.
-
-For example, an e-commerce website’s product filter dropdown fetches available product categories from a remote server. As categories update frequently, the `DropDownList`, bound to a remote DataManager, ensures the filter list always reflects the latest categories without requiring app redeployment.
-
-You can achieve this by retrieving data from remote services using the `DataManager`. The [query](../api/drop-down-list/#query) property is used to fetch and filter data from the service, and the resulting data can be bound to the `DropDownList` using [dataSource](../api/drop-down-list/#datasource) property .
-
-Here’s an example demonstrating how to bind remote data to the `DropDownList` using the `DataManager`:
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/data-binding-cs4/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/data-binding-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/data-binding-cs4" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/data-binding-cs4/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/data-binding-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/data-binding-cs4" %}
-{% endif %}
-
-### Using with Charts
-
-The Syncfusion ##Platform_Name## `Charts` provides powerful visualization capabilities that allow you to bind data from both local and remote sources. 
-
-This section demonstrates how to bind data to the `Charts` using both local and remote sources.
-
-For complete setup instructions, refer to the [Charts Getting Started](../../chart/es5-getting-started) documentation.
-
-**Binding local data:**
-
-Binding local data allows you to directly associate a local dataset (such as a simple JSON object or array) with the `Chart`. This is useful when you have data available locally within your application and want to visualize it in the chart. 
-
-For example, a small retail store manager’s dashboard displays daily sales data for the past week. Since the data is collected and stored locally on the device or in memory, the `Chart` binds directly to this local dataset to quickly visualize sales trends without needing server calls.
-
-You can bind a simple JSON data to the `Chart` using the [dataSource](../api/chart/series/#datasource) property in the series. Then, map the fields in the JSON data to the [xName](../api/chart/series/#xname) and [yName](../api/chart/series/#yname) properties to represent the `Chart's` x-axis and y-axis values.
-
-Here’s an example demonstrating binding local data using the `DataManager`:
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/data-binding-cs5/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/data-binding-cs5/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/data-binding-cs5" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/data-binding-cs5/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/data-binding-cs5/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/data-binding-cs5" %}
-{% endif %}
-
-**Binding remote data:**
-
-Binding remote data allows you to fetch and display data dynamically from a remote server or API.  This is useful when working with large datasets or when data is continuously updated on the server.
-
-For example, an online analytics dashboard shows live website traffic metrics. The `Chart` binds to a remote data source via DataManager, which continuously fetches real-time traffic data from a web API and updates the chart dynamically to reflect visitor trends.
-
-You can bind remote data to the `Chart` using the `DataManager`. The DataManager requires minimal configuration, such as the web service URL, adaptor, and cross-domain settings, to interact with the service endpoint properly. You can then assign the instance of DataManager to the [dataSource](../api/chart/series/#datasource) property in the series and map the fields of the data to the [xName](../api/chart/series/#xname) and [yName](../api/chart/series/#yname) properties. Additionally, you can use the [query](../api/chart/series/#query) property to filter the data.
-
-Here’s an example demonstrating how to bind remote data using the `DataManager`:
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/data-binding-cs6/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/data-binding-cs6/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/data-binding-cs6" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/data-binding-cs6/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/data-binding-cs6/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/data-binding-cs6" %}
-{% endif %}
-
-### Normal HTML table
-
-Binding data to a normal HTML table can be done through both local and remote datasources. This allows for easy and dynamic population of table rows with data. This approach is particularly useful in scenarios such as dashboards, reports, or summary views, where the focus is on quickly rendering a set of records in a tabular format.
-
-For example, consider  you are building a simple order management dashboard that displays the latest orders to customer service agents. The dashboard needs to update frequently with new order data, either fetched from a local cache or a remote API, and display it quickly in a clean tabular format. Using a lightweight HTML table with  DataManager helps efficiently manage and render this data dynamically.
-
-To achieve this efficiently, you can use Syncfusion’s `DataManager` to manage and query data from either local or remote sources. Additionally, by leveraging the `compile` function from **@syncfusion/ej2-base**, you can dynamically generate HTML templates for each data row and render them into the table.
-
-Here’s an example demonstrating binding local data to an HTML table using the `DataManager`:
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/data-binding-cs7/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/data-binding-cs7/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/data-binding-cs7" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/data-binding-cs7/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/data-binding-cs7/index.html %}
-{% endhighlight %}
-{% endtabs %}
+> - DataManager is directly bound to Syncfusion components such as the Grid through the [dataSource](https://ej2.syncfusion.com/javascript/documentation/api/grid#datasource) property rather than using `executeQuery`. Refer to the Grid data‑binding [documentation](https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/data-binding).
 
-{% previewsample "page.domainurl/code-snippet/data/data-binding-cs7" %}
 {% endif %}
 
 ## See Also
diff --git a/ej2-javascript/data/how-to/adding-custom-headers.md b/ej2-javascript/data/how-to/adding-custom-headers.md
new file mode 100644
index 000000000..8588dd0c7
--- /dev/null
+++ b/ej2-javascript/data/how-to/adding-custom-headers.md
@@ -0,0 +1,98 @@
+---
+layout: post
+title: ##Platform_Name## DataManager - Custom headers | Syncfusion
+description: Send custom HTTP headers (e.g., authentication tokens, API keys) with Syncfusion ##Platform_Name## DataManager using the headers property.
+platform: ej2-javascript
+control: Adding custom headers in ##Platform_Name## DataManager
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Custom headers for ##Platform_Name## DataManager
+
+Custom headers provide a mechanism to send additional information along with HTTP requests made by the Syncfusion<sup style="font-size:70%">&reg;</sup> [DataManager](../api/data/datamanager). These headers can include authentication tokens, API keys, session identifiers, or any other metadata required by the server to validate and process the request correctly.
+
+The Syncfusion<sup style="font-size:70%">&reg;</sup> DataManager supports custom headers through its `headers` property, enabling secure and flexible communication between the client application and the server. This feature is particularly useful when requests must carry additional information for authentication, authorization, or contextual processing.
+
+Steps to integrate custom headers into DataManager requests:
+
+1. Create a new instance of `DataManager` with the required `URL` and `adaptor`.
+
+2. Assign the custom headers to the `headers` property of the `DataManager` instance. 
+
+3. Trigger the [executeQuery](../api/data/dataManager/executequery) method to send the request to the server with the custom headers.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% raw %}
+
+import { DataManager, ReturnOption, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
+import { compile } from '@syncfusion/ej2-base';
+
+let template: string = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';
+
+let compiledFunction: Function = compile(template);
+
+const SERVICE_URL: string =  'https://services.syncfusion.com/js/production/api/Orders';
+
+let table: HTMLElement = (<HTMLElement>document.getElementById('datatable'));
+
+let dataManager: DataManager = new DataManager({ 
+  url: SERVICE_URL, 
+  adaptor: new ODataV4Adaptor(), 
+  headers: [{ 'syncfusion-data-manager': 'true' }] 
+});
+
+dataManager.executeQuery(new Query()).then((e: ReturnOption) => {
+  (<Object[]>e.result).forEach((data: Object) => {
+    table.appendChild(compiledFunction(data)[0]);
+  });
+});
+
+{% endraw %}
+{% endhighlight %}
+
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/data/getting-started-cs7/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% raw %}
+
+var template = '<tr><td>${OrderID}</td><td>${CustomerID}</td><td>${EmployeeID}</td></tr>';
+
+var compiledFunction = ej.base.compile(template);
+
+const SERVICE_URL =  'https://services.syncfusion.com/js/production/api/Orders';
+
+var table = (document.getElementById('datatable'));
+
+var dm = new ej.data.DataManager({ 
+  url: SERVICE_URL, 
+  adaptor: new ej.data.ODataV4Adaptor, 
+  headers: [{ 'syncfusion-data-manager': 'true' }] 
+});
+
+dm.executeQuery(new ej.data.Query()).then((e) => {
+  (e.result).forEach((data) => {
+    table.appendChild(compiledFunction(data)[0]);
+  });
+});
+
+
+{% endraw %}
+{% endhighlight %}
+
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/data/getting-started-cs7/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
diff --git a/ej2-javascript/data/how-to/sending-additional-parameters.md b/ej2-javascript/data/how-to/sending-additional-parameters.md
new file mode 100644
index 000000000..34fb27c58
--- /dev/null
+++ b/ej2-javascript/data/how-to/sending-additional-parameters.md
@@ -0,0 +1,45 @@
+---
+layout: post
+title: ##Platform_Name## DataManager - Sending Additional Parameters to Server | Syncfusion
+description: Pass additional custom parameters to the server with Syncfusion ##Platform_Name## DataManager using addParams method.
+platform: ej2-javascript
+control: Sending additional parameters to server in ##Platform_Name## DataManager
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Sending additional parameters to server with ##Platform_Name## DataManager
+
+In ##Platform_Name## applications, when working with remote data sources, it's often necessary to pass additional parameters to the server to customize the data retrieval process. These parameters could include filters, sorting criteria, or any other information required for server-side processing. 
+
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [DataManager](../api/data/datamanager) provides a convenient method for including custom parameters in data requests, allowing for enhanced server-side processing. By utilizing the [addParams](../api/data/query/addparams) method of the [query](../api/data/query) class, helps to seamlessly integrate additional information into the data requests.
+
+In the following example, the top 15 records of the service are displayed in the table using the `addParams` method of `query` class.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/data/getting-started-cs8/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/data/getting-started-cs8/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs8" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/data/getting-started-cs8/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/data/getting-started-cs8/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs8" %}
+{% endif %}
diff --git a/ej2-javascript/data/how-to/working-in-offline-mode.md b/ej2-javascript/data/how-to/working-in-offline-mode.md
new file mode 100644
index 000000000..999890dfc
--- /dev/null
+++ b/ej2-javascript/data/how-to/working-in-offline-mode.md
@@ -0,0 +1,64 @@
+---
+layout: post
+title: ##Platform_Name## DataManager - Working in Offline Mode | Syncfusion
+description: Use offline mode in Syncfusion ##Platform_Name## DataManager to load data once and process queries client-side.
+platform: ej2-javascript
+control: Working in offline mode in ##Platform_Name## DataManager
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Offline mode with ##Platform_Name## DataManager
+
+In ##Platform_Name## applications, remote data binding with DataManager typically sends a request to the server each time the `executeQuery` method is invoked. This repeated communication can increase latency and place additional load on the server.
+
+To improve efficiency, DataManager provides an offline property. When enabled, all data is loaded during initialization, and subsequent query processing is handled on the client side. This eliminates unnecessary server calls, resulting in faster response times and reduced server overhead.
+
+To enable offline mode in DataManager, set the `offline` property to `true` during initialization. This is demonstrated in the below code example.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/data/getting-started-cs7/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/data/getting-started-cs7/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs7" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/data/getting-started-cs7/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/data/getting-started-cs7/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs7" %}
+{% endif %}
+
+> The loaded data will be cached in the **json** property of `DataManager`.
+
+## When to use Offline mode
+
+Offline mode is most effective when:
+
+- The dataset is moderately sized and can be loaded during initialization.
+- Data does not change frequently, reducing the risk of stale results.
+- Client-side query processing provides a performance advantage.
+
+## When to avoid Offline mode
+
+Offline mode should be avoided in scenarios such as:
+
+- Large datasets: Loading all records at once may cause performance issues in the browser.
+- Frequently changing data: Cached data may become outdated quickly.
+- Real-time requirements: Applications that depend on live or streaming data need server-side queries.
+- Sensitive data: Storing all records on the client side may expose information unnecessarily.
diff --git a/ej2-javascript/data/querying.md b/ej2-javascript/data/querying.md
index 12387b4a0..680eafe46 100644
--- a/ej2-javascript/data/querying.md
+++ b/ej2-javascript/data/querying.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Querying in ##Platform_Name## DataManager | Syncfusion
-description: Learn here all about querying in Syncfusion ##Platform_Name## DataManager of Syncfusion Essential JS 2 and more.
+title: ##Platform_Name## DataManager - Querying | Syncfusion
+description: Learn here all about Querying in Syncfusion ##Platform_Name## DataManager for filtering, sorting, paging, searching, grouping, aggregation, projection, expand, and hierarchical data.
 platform: ej2-javascript
 control: Querying 
 publishingplatform: ##Platform_Name##
@@ -11,124 +11,24 @@ domainurl: ##DomainURL##
 
 # Querying in ##Platform_Name## DataManager
 
-The Syncfusion ##Platform_Name## DataManager includes a [Query](../api/data/query/) class for building and executing LINQ-style or chainable queries on local arrays, RESTful Web APIs and Odata Services.
+The `Query` class in Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## DataManager is used to build structured queries that interact with a data source. The queries define operations such as filtering, sorting, paging, and grouping, making it easier to retrieve and manipulate data in a consistent way.
 
-A `Query` is a set of instructions that defines what data to retrieve from a datasource and how the returned data should be structured and organized. Using `Query` class in DataManager, you can build simple and complex queries in a streamlined manner, enabling consistent and efficient data access.
+By combining DataManager with the `Query` class, data operations can be executed either locally or against a remote service, depending on the configuration. This approach ensures that data handling remains efficient and flexible across different scenarios.
 
-For example, using the `Query` class is like ordering food from a digital menu. You can filter for vegetarian items, sort them by price, and pick the top few and the system instantly gives you only the results you need, without going through everything manually.
+Key capabilities of `Query` class:
 
-## How query processing works
+- **Filtering**: Retrieve records that match specific conditions.
+- **Sorting**: Arrange records in ascending or descending order.
+- **Paging**: Limit the number of records returned at once.
+- **Grouping**: Organize records into logical categories.
 
-The [Query](../api/data/query/) class in Syncfusion ##Platform_Name## DataManager provides a fluent interface for defining and executing complex data operations, such as filtering, sorting, grouping, and paging. Each method in the `Query` class adds a logical layer of transformation, and the entire query is processed through the [executeQuery()](../api/data/dataManager/#executequery) method.
+## Specifying resource name using `from`
 
-The processing flow generally follows these steps:
-
-* **Query definition:**
-
-  Construct your query using chained methods such as:
-
-    1. [from](../api/data/query/#from) – Defines the datasource.
-
-    2. [select](../api/data/query/#select) – Specifies the fields to retrieve.
-
-    3. [where](../api/data/query/#where) – Filters records based on conditions.
-
-    4. [sortBy](../api/data/query/#sortby) – Sorts the data by one or more fields.
-
-    5. [take](../api/data/query/#take) – Limits the number of records returned.
-
-* **Execution:**
-
-  * The query is then passed to DataManager's method such as `executeLocal` and `executeQuery` for processing.(either local or remote)
-  * Then the Adaptor of DataManager converts query into format compatible with dataservices (such as RESTful Web APIs, OData, or other Web APIs).
-
-* **Result handling:**
-
-  Once the response is received, the DataManager processes and maps the data to match the query structure. The result can then be rendered or further processed in your application.
-
-This modular and extensible approach simplifies data interactions, promotes maintainability, and supports dynamic data shaping tailored to your application’s needs.
-
-## Creating and executing queries
-
-The Syncfusion [Query](../api/data/query/) class, available in the [@syncfusion/ej2-data package](https://www.npmjs.com/package/@syncfusion/ej2-data), provides a flexible way to construct data queries using methods like `select`, `from`, `take`, `skip`, and `using`. It also enables powerful data operations such as filtering, sorting, grouping, and aggregation. These queries can be applied to data before binding it to UI components like Grids, Lists, or Charts, ensuring efficient and dynamic data handling.
-
-Queries are executed using the [executeQuery](../api/data/dataManager/#executequery) or [executeLocal](../api/data/query/#executelocal) methods of the DataManager, depending on whether you're using a remote or local datasource.
-
-| Method         | Usage              | Description                                                                                                                 |
-| -------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------- |
-| `executeQuery` | Local datasource and Remote datasource | Sends the query to a remote server or web service and gets the results asynchronously.                 |
-| `executeLocal` | Local datasource  | Runs the query directly on local data in memory, processing it instantly without server calls. |
-
-The `Query` class provides several methods to build and manipulate data queries. Below is a list of the available query methods that help shape data before it's used in UI components.
-
-## select
-
-The [select](../api/data/query/#select) method is helpful for displaying a specific number of columns from a large dataset with multiple columns, which reduces the amount of data transferred and improves the performance of your application.
-
-{% if page.publishingplatform == "typescript" %}
- 
-```ts
-let query = new Query().select(['OrderID', 'CustomerID', 'EmployeeID']);
-``` 
-
-{% elsif page.publishingplatform == "javascript" %}
- 
-```js
-let query = new ej.data.Query().select(['OrderID', 'CustomerID', 'EmployeeID']);
-``` 
- 
-{% endif %}
-
-## using
-
-The `using` method is used to associate a query with a specific DataManager instance. This is useful when you want to execute a query using a particular datasource or configuration. 
-
-{% if page.publishingplatform == "typescript" %}
- 
-```ts
-let dataManager = new DataManager({
-    url: SERVICE_URI,
-    adaptor: new ODataV4Adaptor()
-});
-
-let query = new Query().using(dataManager);
-```
-
-{% elsif page.publishingplatform == "javascript" %}
- 
-```js
-let dataManager = new ej.data.DataManager({
-    url: SERVICE_URI,
-    adaptor: new ej.data.ODataV4Adaptor()
-});
-
-let query = new ej.data.Query().using(dataManager);
-``` 
-{% endif %}
-
-## from
-
-The [from](../api/data/query/#from) method in the Syncfusion ##Platform_Name## DataManager `Query` class is used to specify the primary resource or table name for data retrieval during query execution. This is particularly useful when you need to fetch data from a specific table or resource in your datasource.
-
-{% if page.publishingplatform == "typescript" %}
- 
-```ts
-let query = new Query().from('Orders');
-``` 
-
-{% elsif page.publishingplatform == "javascript" %}
- 
-```js
-let query = new ej.data.Query().from('Orders');
-``` 
- 
-{% endif %}
-
-The following example demonstrates how the datasource (**Orders**) is specified using the `from` method, how the **OrderID**, **CustomerID**, and **EmployeeID** columns are selected using the `select` method, and how the `using` method is used to fetch the datasource by associating the query with a specific `DataManager` instance:
+The `Query` class allows defining the source from which data should be retrieved. The `from` method specifies the resource name, such as a table or endpoint, and sets the context for all subsequent query operations. Once the resource is defined, filtering, sorting, paging, and other operations can be applied seamlessly to that target source.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/data/querying-cs1/index.ts %}
 {% endhighlight %}
@@ -153,225 +53,108 @@ The following example demonstrates how the datasource (**Orders**) is specified
 {% previewsample "page.domainurl/code-snippet/data/querying-cs1" %}
 {% endif %}
 
-## Eager loading navigation properties
-
-Eager loading navigation properties in Syncfusion ##Platform_Name## DataManager allows you to retrieve related data along with the primary data in a single query. This improves performance by reducing the frequency of trips to the server. It enhances the experience by providing comprehensive data views without additional server requests. 
+## Projection using `select`
 
-To achieve this, you can use the `expand` method of the `Query` class, which facilitates eager loading of navigation properties to fetch related data. Navigation property values are accessed using appropriate field names separated by a dot (.) sign.
-
-The following example demonstrates how to retrieve **Orders** along with the related **Employee.FirstName**  using the `expand` method:
+The `select` method in the `Query` class is used to project specific fields from a data source. Instead of retrieving all columns, select allows choosing only the required fields. This reduces the amount of data returned, minimizes payload size, and improves performance by limiting unnecessary information.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/getting-started-cs18/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/getting-started-cs18/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/getting-started-cs18" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
 {% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/getting-started-cs18/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/getting-started-cs18/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/getting-started-cs18" %}
-{% endif %}
-
-## Sorting
-
-Sorting in Syncfusion ##Platform_Name## DataManager allows you to organize data in a specified order, enhancing both readability and data analysis. You can arrange data in either ascending or descending order based on defined criteria.
-
-This can be achieved using the [sortBy](../api/data/query/#sortby) method of the `Query` class. This method facilitates the sorting of data based on specified fields and order. By default, sorting is in **ascending** order. To change the sort order, you can either pass **descending** as the second argument to `sortBy` or use the [sortByDesc](../api/data/query/#sortbydesc) method directly.
-
-The following example demonstrates how to sort data based on the **CustomerID** field in **descending** order using the `sortBy` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/getting-started-cs19/index.ts %}
+{% include code-snippet/data/querying-cs30/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/getting-started-cs19/index.html %}
+{% include code-snippet/data/querying-cs30/index.html %}
 {% endhighlight %}
 {% endtabs %}
         
-{% previewsample "page.domainurl/code-snippet/data/getting-started-cs19" %}
+{% previewsample "page.domainurl/code-snippet/data/querying-cs30" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/getting-started-cs19/index.js %}
+{% include code-snippet/data/querying-cs30/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/getting-started-cs19/index.html %}
+{% include code-snippet/data/querying-cs30/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/data/getting-started-cs19" %}
+{% previewsample "page.domainurl/code-snippet/data/querying-cs30" %}
 {% endif %}
 
-### Custom sorting
-
-The Syncfusion ##Platform_Name## DataManager supports applying custom sorting logic locally after data is retrieved from the server.
+## Loading related data with `expand`
 
-This is particularly useful when you need to enforce complex business rules that go beyond basic field based sorting, such as prioritizing certain values, sorting based on derived fields, or applying multi level sort criteria dynamically.
-
-The following example demonstrates how to fetch records from the server and manually sort the data by **CustomerID** in `descending` order:
+The `expand` method in the `Query` class is used to include related records when retrieving data. This technique, known as eager loading, ensures that navigation properties are fetched along with the main dataset. By expanding relationships, hierarchical or associated data can be accessed directly using dot‑separated field notation, making complex data retrieval more efficient.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs2" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
 {% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs2" %}
-{% endif %}
-
-### sortByDesc
-
-The [sortByDesc](../api/data/query/#sortbydesc) method in Syncfusion ##Platform_Name## DataManager allows you to sort data by a specific field in **descending** order by default. This is useful when you want to prioritize records with higher or later values first such as sorting by date, ID, or alphabetical fields in reverse order.
-
-The following example demonstrates how to fetch data and sort it by the **CustomerID** field in **descending** order using `sortByDesc` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs9/index.ts %}
+{% include code-snippet/data/getting-started-cs18/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs9/index.html %}
+{% include code-snippet/data/getting-started-cs18/index.html %}
 {% endhighlight %}
 {% endtabs %}
         
-{% previewsample "page.domainurl/code-snippet/data/querying-cs9" %}
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs18" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs9/index.js %}
+{% include code-snippet/data/getting-started-cs18/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs9/index.html %}
+{% include code-snippet/data/getting-started-cs18/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/data/querying-cs9" %}
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs18" %}
 {% endif %}
 
-### Multi sorting
-
-The Syncfusion ##Platform_Name## DataManager supports multi sorting, allowing you to sort records by multiple fields with different sort directions. This is especially useful when you want to sort by one field first, and then use another field to determine the order of records that have the same value in the first field.
-
-To achieve this, multi-sorting can be performed by chaining multiple [sortBy](../api/data/query/#sortby) methods.
+## Sorting
 
-The following example demonstrates how to apply multi-sorting using the `sortBy` method, with **CustomerID** sorted in **descending** order and **EmployeeID** in **ascending** order:
+The `sortBy` method in the `Query` class arranges records in "ascending" order by default, while `sortByDesc` applies "descending" order. Alternatively, the descending parameter in sortBy can be used to specify sort direction. These methods enable precise control over data ordering based on selected fields.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs10/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs10/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs10" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
 {% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs10/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs10/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs10" %}
-{% endif %}
-
-### Dynamic sort
-
-The Syncfusion ##Platform_Name## DataManager supports dynamic sorting by allowing a field to be specified at runtime. This is particularly useful when the sort criteria need to be updated based on user interaction.
-
-To implement this functionality, a field is selected from a [DropDownList](../../documentation/drop-down-list/getting-started), and the `sortBy` method is used to fetch the data in ascending order when a [Button click](../api/button/#click) event is triggered.
-
-The following example demonstrates how to dynamically sort data in ascending order based on a field selected from a `DropDownList`:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs11/index.ts %}
+{% include code-snippet/data/getting-started-cs19/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs11/index.html %}
+{% include code-snippet/data/getting-started-cs19/index.html %}
 {% endhighlight %}
 {% endtabs %}
         
-{% previewsample "page.domainurl/code-snippet/data/querying-cs11" %}
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs19" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs11/index.js %}
+{% include code-snippet/data/getting-started-cs19/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs11/index.html %}
+{% include code-snippet/data/getting-started-cs19/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/data/querying-cs11" %}
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs19" %}
 {% endif %}
 
-## Filtering
-
-Filtering with the Syncfusion ##Platform_Name## DataManager allows you to efficiently retrieve only the necessary data from the server, reducing the amount of data transferred and enhancing overall performance. This fundamental operation allows you to obtain a reduced view of data based on specified filter criteria, essential for efficiently managing and displaying large datasets.
+> Multi sorting can be performed by simply chaining the multiple `sortBy` methods.
 
-A filter expression can be easily constructed using the [where](../api/data/query/#where) method of the `Query` class. This method allows you to define filter conditions based on various fields and operators.
+## Filtering
 
-The following example demonstrates how to filter data based on the **EmployeeID** field equal to **3**:
+The `where` method in the `Query` class defines filter conditions to retrieve records that match specific criteria. Multiple filters can be combined using chainable syntax, enabling precise and efficient queries for complex scenarios.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/data/getting-started-cs20/index.ts %}
 {% endhighlight %}
@@ -396,1087 +179,187 @@ The following example demonstrates how to filter data based on the **EmployeeID*
 {% previewsample "page.domainurl/code-snippet/data/getting-started-cs20" %}
 {% endif %}
 
-### Filter operators
-
-Filter operators in Syncfusion ##Platform_Name## DataManager allow you to specify the filter type for querying data. These operators enable you to define various conditions to filter data effectively. Below is a comprehensive list of filter operators supported by Syncfusion ##Platform_Name## DataManager.
-
-| Operator             | Description                               |
-|----------------------|-------------------------------------------|
-| `equal`              | Matches exact value                       |
-| `notEqual`           | Excludes matching value                   |
-| `greaterThan`        | Values greater than a specified value     |
-| `greaterThanOrEqual` | Greater than or equal to a specified value|
-| `lessThan`           | Less than a specified value               |
-| `lessthanOrEqual`    | Less than or equal to a specified value   |
-| `startswith`         | Starts with a substring                   |
-| `endswith`           | Ends with a substring                     |
-| `contains`           | Contains a substring                      |
-
-Use the following `Query` format to apply any filter condition by updating the field name, operator, and value:
+### Filter Operators
 
-{% if page.publishingplatform == "typescript" %}
+Filter operators are generally used to specify the filter type. The various filter operators supported by DataManager is listed below.
 
-```ts
-let query = new Query().where(field, operator, value);
-```
+* greaterthan
+* greaterthanorequal
+* lessthan
+* lessthanorequal
+* equal
+* notequal
+* startswith
+* endswith
+* contains
 
-{% elsif page.publishingplatform == "javascript" %}
+> These filter operators are used for creating filter query using `where` method and `Predicate` class.
 
-```js
-let query = new ej.data.Query().where(field, operator, value);
-```
-{% endif %}
+### Complex filter criteria using `Predicate`
 
-The following example demonstrates how to filter records where the **CustomerID** contains the substring **VI**:
+The `Predicate` class enables advanced filtering by combining multiple conditions using logical operators like AND and OR. It offers a structured approach to building complex queries beyond simple chaining, supporting powerful and flexible data filtering.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs8/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs8/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs8" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
 {% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs8/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs8/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs8" %}
-{% endif %}
-
-> These filter operators are used for creating filter query using [where](../api/data/query/#where) method and [Predicate](../api/data/predicate/) class.
-
-### lessThan
-
-The Syncfusion ##Platform_Name## DataManager supports the `lessThan` operator, which retrieves records where the specified field's value is `lessThan` the given filter value. This is particularly useful for range-based filtering, such as identifying records below a certain threshold, filtering earlier dates, or applying upper-bound conditions in analytics and reporting.
-
-To achieve this, you can use the `lessThan` operator within the `where` method of the `Query` class.
-
-The following example demonstrates how to filter records where **OrderID** is less than **10252** using the `lessThan` operator with the `where` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs12/index.ts %}
+{% include code-snippet/data/getting-started-cs21/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs12/index.html %}
+{% include code-snippet/data/getting-started-cs21/index.html %}
 {% endhighlight %}
 {% endtabs %}
         
-{% previewsample "page.domainurl/code-snippet/data/querying-cs12" %}
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs21" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs12/index.js %}
+{% include code-snippet/data/getting-started-cs21/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs12/index.html %}
+{% include code-snippet/data/getting-started-cs21/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/data/querying-cs12" %}
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs21" %}
 {% endif %}
 
-### greaterThan
-
-The Syncfusion ##Platform_Name## DataManager supports the `greaterThan` operator, which retrieves records where the specified field's value is greater than the given filter value. This is particularly useful for threshold-based filtering, such as identifying high-value transactions, recent dates, or any data that exceeds a specific limit.
-
-To achieve this, you can use the `greaterThan` operator within the `where` method of the `Query` class.
+## Searching
 
-The following example demonstrates how to filter records where **OrderID** is greater than **10263** using the `greaterThan` operator with the `where` method:
+The `search` method in the `Query` class  performs a global search by applying a keyword across all fields in the dataset. It retrieves records with matches in any column, enabling broad and efficient data exploration beyond field‑specific filtering.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs13/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs13/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs13" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
 {% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs13/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs13/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs13" %}
-{% endif %}
-
-### lessThanOrEqual
-
-The Syncfusion ##Platform_Name## DataManager supports the `lessThanOrEqual` operator, which retrieves records where the specified field’s value is less than or equal to the given filter value. This is particularly useful for range-based filtering, such as displaying records below a certain threshold, filtering dates, or applying upper-limit conditions in reports and dashboards. 
-
-To achieve this, you can use the `lessThanOrEqual` operator within the `where` method of the `Query` class.
-
-The following example demonstrates how to filter records where **OrderID** is less than or equal to **10251** using the `lessThanOrEqual` operator with the `where` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs14/index.ts %}
+{% include code-snippet/data/getting-started-cs22/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs14/index.html %}
+{% include code-snippet/data/getting-started-cs22/index.html %}
 {% endhighlight %}
 {% endtabs %}
         
-{% previewsample "page.domainurl/code-snippet/data/querying-cs14" %}
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs22" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs14/index.js %}
+{% include code-snippet/data/getting-started-cs22/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs14/index.html %}
+{% include code-snippet/data/getting-started-cs22/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/data/querying-cs14" %}
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs22" %}
 {% endif %}
 
-### greaterThanOrEqual
-
-The Syncfusion ##Platform_Name## DataManager supports the `greaterThanOrEqual` operator, which retrieves records where the specified field’s value is greater than or equal to the given filter value. This is particularly useful for range-based filtering, such as displaying records above a certain threshold, filtering dates, or applying minimum value conditions in dashboards and reports.
+> To perform a search on specific fields, provide an array of field names as the second argument to the [search](../api/data/query#search) method.
 
-To achieve this, you can use the `greaterThanOrEqual` operator within the `where` method of the `Query` class.
+## Grouping
 
-The following example demonstrates how to filter records where **OrderID** is greater than or equal to **10256** using the `greaterThanOrEqual` operator with the `where` method:
+The `group` method in the `Query` class organizes records into logical categories based on specified fields. This enables hierarchical structuring of data, making it easier to aggregate and present related records together. When combined with the DataManager, grouping supports efficient data analysis and visualization.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs15/index.ts %}
+{% include code-snippet/data/getting-started-cs23/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs15/index.html %}
+{% include code-snippet/data/getting-started-cs23/index.html %}
 {% endhighlight %}
 {% endtabs %}
         
-{% previewsample "page.domainurl/code-snippet/data/querying-cs15" %}
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs23" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs15/index.js %}
+{% include code-snippet/data/getting-started-cs23/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs15/index.html %}
+{% include code-snippet/data/getting-started-cs23/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/data/querying-cs15" %}
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs23" %}
 {% endif %}
 
-### equal
+> Multiple grouping can be done by simply chaining the `group` method.
 
-The Syncfusion ##Platform_Name## DataManager supports the `equal` operator, which is used to retrieve records where a specified field’s value exactly matches the given filter value. This is particularly useful for precise filtering, such as retrieving records for a specific ID, status, or category.
-
-To achieve this, you can use the `equal` operator within the `where` method of the `Query` class.
+## Paging
 
-The following example demonstrates how to filter records where **EmployeeID** is equal to **6** using the `equal` operator with the `where` method:
+The `page` method in the `Query` class retrieves records based on a specified page index and page size. This approach divides large datasets into smaller segments, improving performance and reducing memory consumption by loading only the required portion of data at a time.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs16/index.ts %}
+{% include code-snippet/data/getting-started-cs24/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs16/index.html %}
+{% include code-snippet/data/getting-started-cs24/index.html %}
 {% endhighlight %}
 {% endtabs %}
         
-{% previewsample "page.domainurl/code-snippet/data/querying-cs16" %}
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs24" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs16/index.js %}
+{% include code-snippet/data/getting-started-cs24/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs16/index.html %}
+{% include code-snippet/data/getting-started-cs24/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/data/querying-cs16" %}
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs24" %}
 {% endif %}
 
-### notEqual
+## Aggregation
 
-The Syncfusion ##Platform_Name## DataManager supports the `notEqual` operator, which retrieves records where the specified field's value does not match the given filter value. This is particularly useful for excluding specific entries, filtering out unwanted data, or creating custom views that omit certain values.
+The `aggregate` method in the `Query` class computes statistical summaries such as sum, average, count, minimum, and maximum for specified fields within a dataset. This enables concise metric derivation, supporting analytical evaluation and reporting without requiring manual calculations.
 
-To achieve this, you can use the `notEqual` operator within the `where` method of the `Query` class.
+The built-in aggregate types are,
 
-The following example demonstrates how to filter records where **CustomerID** is not equal to **VINET** using the `notEqual` operator with the `where` method:
+* sum
+* average
+* min
+* max
+* count
+* truecount
+* falsecount
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs17/index.ts %}
+{% include code-snippet/data/getting-started-cs25/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs17/index.html %}
+{% include code-snippet/data/getting-started-cs25/index.html %}
 {% endhighlight %}
 {% endtabs %}
         
-{% previewsample "page.domainurl/code-snippet/data/querying-cs17" %}
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs25" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs17/index.js %}
+{% include code-snippet/data/getting-started-cs25/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs17/index.html %}
+{% include code-snippet/data/getting-started-cs25/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/data/querying-cs17" %}
+{% previewsample "page.domainurl/code-snippet/data/getting-started-cs25" %}
 {% endif %}
-
-### contains
-
-The Syncfusion ##Platform_Name## DataManager supports the `contains` operator, which is used to retrieve records where the value of a specified field contains a given substring. This is particularly useful for keyword-based searches, partial matches, or search-as-you-type functionalities.
-
-To achieve this, you can use the `contains` operator within the `where` method of the `Query` class.
-
-The following example demonstrates how to filter records where **CustomerID** contains **V** using the `contains` operator with the `where` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs18/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs18/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs18" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs18/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs18/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs18" %}
-{% endif %}
-
-### startswith
-
-The Syncfusion ##Platform_Name## DataManager supports the `startswith` operator, which filters records where the value of a specified field begins with the given substring. This is especially useful for implementing features like incremental search, auto-complete, or prefix-based filtering in large datasets.
-
-To achieve this, you can use the `startswith` operator within the `where` method of the `Query` class.
-
-The following example demonstrates how to filter records where **CustomerID** is starts with **V** using the `startswith` operator with the `where` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs19/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs19/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs19" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs19/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs19/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs19" %}
-{% endif %}
-
-### endswith
-
-The Syncfusion ##Platform_Name## DataManager supports the `endswith` operator, which is used to retrieve records where the value of a specified field ends with a given substring. This is particularly useful for scenarios such as suffix-based filtering, search suggestions, or validating data patterns.
-
-To achieve this, you can use the `endswith` operator within the `where` method of the `Query` class.
-
-The following example demonstrates how to filter records where **CustomerID** value ends with **T** using the `endswith` operator with the `where` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs20/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs20/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs20" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs20/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs20/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs20" %}
-{% endif %}
-
-### Build complex filter criteria using `Predicate`
-
-The Syncfusion ##Platform_Name## DataManager offers extensive capabilities for handling and manipulating data from various sources. While the `where` method is suitable for basic filtering requirements, there are situations where more complex filter criteria are needed.
-
-The `Predicate` class of DataManager provides a solution for complex filter cases. It allows developers to construct composite filter criteria, enabling precise data filtering in complex scenarios. The `Predicate` consists of multiple conditions chained together using logical operators like `and`, `or`, `andNot`, or `orNot`.
-
-The DataManager supports various `Predicate` methods:
-
-| Method               | Description                                                                                  |
-| -------------------- | -------------------------------------------------------------------------------------------- |
-| **and**              | Combines another condition with the current one using `AND`.                                 |
-| **andNot**           | Combines another condition using `AND NOT`.                                                  |
-| **or**               | Combines another condition using `OR`.                                                       |
-| **orNot**            | Combines another condition using `OR NOT`.                                                   |
-| **toJson**           | Converts the `Predicate` to a plain JavaScript object for serialization.                       |
-| **validate(record)** | Checks if a data record matches the `Predicate`. Returns a `boolean`.                          |
-| **fromJson(json)**   | Converts plain JavaScript objects back into `Predicate` instances. Useful for deserialization. |
-
-The following example demonstrates how to filter complex data based on the **EmployeeID** field equal to **3** and **ShipCountry** field equal to **Germany** using the `Predicate` method of DataManager:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/getting-started-cs21/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/getting-started-cs21/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/getting-started-cs21" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/getting-started-cs21/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/getting-started-cs21/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/getting-started-cs21" %}
-{% endif %}
-
-## Searching
-
-The Syncfusion ##Platform_Name## DataManager provides a robust built-in search method that enables you to search for specific data across all fields in the datasource. This feature enhances the efficiency of filtering records based on user-defined search criteria, making it easier to locate relevant information within large datasets. It is particularly useful when you need to find records containing a specific keyword anywhere in the displayed data.
-
-To achieve this, the [search](../api/data/query/#search) method of the `Query` class allows you to define search criteria that apply to all fields within the datasource. This method is ideal for implementing keyword based search experiences, especially in user driven scenarios like live search boxes or global table filters.
-
-The following example demonstrates how to search for records where the **CustomerID** field contains the substring **VI** using the `search` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/getting-started-cs22/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/getting-started-cs22/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/getting-started-cs22" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/getting-started-cs22/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/getting-started-cs22/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/getting-started-cs22" %}
-{% endif %}
-
-> You can search particular fields by passing the field name collection in the second argument of [search](../api/data/query/#search) method.
-
-## Grouping
-
-Grouping in Syncfusion ##Platform_Name## DataManager allows you to organize records by category based on specified criteria, facilitating structured data organization. This is especially useful for reporting, data summarization, and categorization, where related records need to be logically organized based on shared field values.
-
-To achieve this, the [group](../api/data/query/#group) method of the `Query` class enables you to seamlessly apply grouping functionality to your datasource.
-
-The following example demonstrates how to group data based on the **CustomerID** field using the `group` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/getting-started-cs23/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/getting-started-cs23/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/getting-started-cs23" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/getting-started-cs23/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/getting-started-cs23/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/getting-started-cs23" %}
-{% endif %}
-
-> Multiple grouping can be done by simply chaining the [group](../api/data/query/#group) method.
-
-## Paging
-
-Paging in Syncfusion ##Platform_Name## DataManager allows you to organize and retrieve data in smaller, manageable chunks or pages. This is especially useful when working with large collections of data, helping your application stay fast and responsive.
-
-To achieve this, the [page](../api/data/query/#page) method of the `Query` class is used. This method allows you specify the page size and page index, enabling you to query a specific subset of records from the dataset.
-
-The page method takes two arguments:
-
-| Parameter   | Type   | Description                               |
-| ----------- | ------ | ----------------------------------------- |
-| `pageIndex` | number | The page number to retrieve               |
-| `pageSize`  | number | The number of records to display per page |
-
-The following example demonstrates how to set the page index to **2** and the page size to **8** using the `page` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/getting-started-cs24/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/getting-started-cs24/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/getting-started-cs24" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/getting-started-cs24/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/getting-started-cs24/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/getting-started-cs24" %}
-{% endif %}
-
-### skip
-
-The Syncfusion ##Platform_Name## DataManager provides the `skip` method, which is essential for efficiently navigating large datasets. This method allows you to omit a specified number of records from the beginning of a dataset, making it particularly useful for implementing pagination or loading data in chunks.
-
-The following example demonstrates how to skip the first **80** records using `skip` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs28/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs28/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs28" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs28/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs28/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs28" %}
-{% endif %}
-
-### take
-
-The Syncfusion ##Platform_Name## DataManager provides the [take](../api/data/query/#take) method, which is used to limit the number of records retrieved from a datasource. This is essential for implementing efficient data handling, especially when working with large datasets.
-
-The following example demonstrates how to retrieve **8** records using `take` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs29/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs29/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs29" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs29/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs29/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs29" %}
-{% endif %}
-
-### range
-
-The Syncfusion ##Platform_Name## DataManager provides the [range(start, end)](../api/data/query/#range) method to retrieve records within a specific index range. This method internally applies both `skip` method and `take` method logic, offering a concise and efficient way to fetch a slice of data.
-
-This method is especially useful in scenarios such as infinite scrolling or virtual paging, where you need to load data in chunks rather than all at once. By specifying a start and end index, you can efficiently retrieve just the portion of data needed for display.
-
-The following example demonstrates how to retrieve records from the **5th** to the **15th** position using the `range` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs6/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs6/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs6" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs6/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs6/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs6" %}
-{% endif %}
-
-### requiresCount
-
-The Syncfusion ##Platform_Name## DataManager provides the [requiresCount](../api/data/query/#requirescount) method to instruct the server to return the total number of available records in addition to the paginated result set.
-
-This method is essential for implementing pagination or infinite scrolling in UI components like Grid or ListView, where the total number of items is required to:
-
-* Display accurate pagination controls.
-
-* Render the correct page numbers.
-
-The following example demonstrates how to get the total record count from the server using the `requiresCount` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs5/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs5/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs5" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs5/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs5/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs5" %}
-{% endif %}
-
-![requireCount](./image/query-requireCount.png)
-
-### Custom paging
-
-The Syncfusion ##Platform_Name## DataManager supports custom paging, allowing you to control which records are fetched from the datasource by passing custom parameters such as `PageNumber` and `PageSize`.  This is useful when implementing server-side paging manually or when you need precise control over data retrieval.
-
-To achieve this, you can use the [addParams](../api/data/query/#addparams) method to append custom parameters to the query. This enables fine-tuned control over the paging process.
-
-The following example demonstrates how to retrieve a limited set of order records using `addParams` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs27/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs27/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs27" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs27/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs27/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs27" %}
-{% endif %}
-
-## Aggregation
-
-The aggregates in Syncfusion ##Platform_Name## DataManager facilitate the calculation of summarized values for specific fields based on predefined types. This functionality is particularly useful when you need to analyze numerical or boolean data within your dataset. It enables you to derive valuable information by summarizing and analyzing the data based on different criteria such as total sum, average value, minimum and maximum values, and counts of specific conditions.
-
-To utilize the aggregation, you can use the [aggregate](../api/data/query/#aggregate) method of the DataManager class. This method allows you to specify the field for aggregation and the type of aggregation to perform.
-
-Aggregates supports the follwing built-in types:
-
-| Aggregate Type | Description                      |
-| -------------- | -------------------------------- |
-| `sum`          | Calculate the total sum of numeric values in the column.|
-| `average`      | Compute the average value of numeric data in the column. |
-| `min`          | Determine the minimum value among the numeric data in the column. |
-| `max`          | Identify the maximum value among the numeric data in the column         |
-| `count`        | Count the total number of records in the column.                |
-| `truecount`    | Count the occurrences of **true** boolean values in the column.     |
-| `falsecount`   | Count the occurrences of **false** boolean values in the column.    |
-
-The following example demonstrates how to retrieve and display the minimum **EmployeeID** value from the first 5 records using the `aggregate` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/getting-started-cs25/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/getting-started-cs25/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/getting-started-cs25" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/getting-started-cs25/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/getting-started-cs25/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/getting-started-cs25" %}
-{% endif %}
-
-### sum
-
-The Syncfusion ##Platform_Name## DataManager supports the use of the `sum` aggregate operator to calculate the total value of a numeric field from a datasource. This is particularly useful for summarizing values such as freight charges, total costs, or other numerical metrics directly within the query.
-
-To achieve this, you can use the `aggregate` method in combination with the `sum` operator. 
-
-The following example demonstrates how to compute the total sum of the **Freight** field using `aggregate` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs21/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs21/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs21" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs21/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs21/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs21" %}
-{% endif %}
-
-### min
-
-The Syncfusion ##Platform_Name## DataManager supports the `min` aggregate operator, which allows you to compute the minimum value of a numeric field directly from the datasource. This is particularly useful for identifying the lowest values in metrics such as freight charges, product prices, or other numerical fields.
-
-To achieve this, you can use the `aggregate` method in combination with the `min` operator. 
-
-The following example demonstrates how to compute the minimum value of the **Freight** field using `aggregate` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs22/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs22/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs22" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs22/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs22/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs22" %}
-{% endif %}
-
-### max
-
-The Syncfusion ##Platform_Name## DataManager supports the `max` aggregate operator, which allows you to determine the highest value of a numeric field directly from the datasource. This is particularly useful for identifying peak values such as maximum freight charges, highest sales totals, or other maximum metrics within a dataset.
-
-To achieve this, you can use the `aggregate` method in combination with the `max` operator. 
-
-The following example demonstrates how to compute the maximum value of the **Freight** field using `aggregate` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs23/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs23/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs23" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs23/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs23/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs23" %}
-{% endif %}
-
-### average
-
-The Syncfusion ##Platform_Name## DataManager supports the `average` aggregate operator to compute the mean value of a numeric field from a datasource. This is particularly useful for gaining insights into typical values, such as average freight charges, average sales totals, or other mean based metrics within a dataset.
-
-To achieve this, you can use the `aggregate` method in combination with the `average` operator. 
-
-The following example demonstrates how to compute the average value of the **Freight** field using `aggregate` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs24/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs24/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs24" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs24/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs24/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs24" %}
-{% endif %}
-
-### count
-
-The Syncfusion ##Platform_Name## DataManager supports the `count` aggregate operator to determine the total number of values for a specified field within a dataset. This is useful for calculating how many records contain a value in a given column, such as the number of freight entries, product sales, or other relevant numeric or non-null values.
-
-To achieve this, you can use the `aggregate` method in combination with the `count` operator. 
-
-The following example demonstrates how to compute the count of the **Freight** field using `aggregate` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs26/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs26/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs26" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs26/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs26/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs26" %}
-{% endif %}
-
-### Distinct
-
-The Syncfusion ##Platform_Name## DataManager supports the distinct operation to extract unique records based on a specific field from a dataset. This is especially useful when you want to eliminate duplicates and display only one entry per unique value.
-
-To perform this operation, you can use the `DataUtil.distinct` method after retrieving the data. 
-
-The following example demonstrates how to extract distinct values based on the **EmployeeID** field:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs25/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs25/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs25" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs25/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs25/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs25" %}
-{% endif %}
-
-## addParams
-
-The [addParams](../api/data/query/#addparams) method in Syncfusion ##Platform_Name## DataManager allows you to append custom parameters to a query. These parameters are included in the server request and are particularly useful for extending the query beyond standard filtering or sorting.
-
-You can use `addParams` to:
-
-* Sending dynamic user context (e.g., user ID, role, language).
-
-* Passing authentication tokens or API keys.
-
-* Applying server-side filters that are outside the standard query schema.
-
-The following example demonstrates how to add custom parameters to a query request:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs3/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs3" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs3/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs3" %}
-{% endif %}
-
-![addParams](./image/query-addparams.png)
-
-## clone
-
-The Syncfusion ##Platform_Name## DataManager provides the [clone](../api/data/query/#clone) method, which allows you to create a deep copy of the current `Query` object. This is particularly useful when you want to reuse a base query and apply slight modifications without altering the original.
-
-This method is ideal for scenarios like tabbed views or pagination, where the base query stays the same, but different tabs or pages require small changes.
-
-The following example demonstrates how to clone a base query, skip the first five records, and retrieve the next five orders:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs4/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs4" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs4/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs4" %}
-{% endif %}
-
-## setKey
-
- The Syncfusion ##Platform_Name## DataManager includes the [setKey(fieldName)](../api/data/query/#setkey) method to specify the primary key field for your dataset. This is crucial for enabling accurate CRUD operations such as update or delete where each record must be uniquely identifiable.
-
-The following example demonstrates how to define **OrderID** as the primary key for the query using the `setKey` method:
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/data/querying-cs7/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs7/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/data/querying-cs7" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/data/querying-cs7/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/data/querying-cs7/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/data/querying-cs7" %}
-{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/gantt/accessibility.md b/ej2-javascript/gantt/accessibility.md
index 3f68ba08e..9cbf222e2 100644
--- a/ej2-javascript/gantt/accessibility.md
+++ b/ej2-javascript/gantt/accessibility.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Accessibility in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Accessibility in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Accessibility in ##Platform_Name## Gantt Chart Control | Syncfusion
+description: Learn here all about Accessibility in Syncfusion ##Platform_Name## Gantt Chart Control of Syncfusion Essential JS 2 and more.
 platform: ej2-javascript
 control: Accessibility 
 publishingplatform: ##Platform_Name##
@@ -9,106 +9,246 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Accessibility in ##Platform_Name## Gantt control
+# Accessibility in ##Platform_Name## Gantt Chart Control
 
-The Gantt component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov), [Section 508](https://www.section508.gov), [WCAG 2.2](https://www.w3.org/TR/WCAG22) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles) that are commonly used to evaluate accessibility.
+The ##Platform_Name## Gantt Chart control is designed with comprehensive accessibility support, adhering to established guidelines and standards including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles). This ensures the control is usable by individuals with disabilities and meets legal accessibility requirements for enterprise applications.
 
-The accessibility compliance for the Gantt component is outlined below.
+## Accessibility compliance
 
-| Accessibility Criteria | Compatibility |
-| -- | -- |
-| [WCAG 2.2](https://www.w3.org/TR/WCAG22) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
-| [Section 508](https://www.section508.gov) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| Screen Reader Support | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
-| Right-To-Left Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| Color Contrast | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| Mobile Device Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| Keyboard Navigation Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Accessibility Checker](https://www.npmjs.com/package/accessibility-checker) Validation | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Axe-core](https://www.npmjs.com/package/axe-core) Accessibility Validation | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes">
-|
+The accessibility compliance for the Gantt Chart control provides detailed insight into supported features and current limitations. Understanding these compliance levels helps developers implement appropriate accessibility measures and identify areas requiring additional attention.
 
 <style>
-    .post .post-content img {
-        display: inline-block;
-        margin: 0.5em 0;
-    }
+  .post .post-content img {
+      display: inline-block;
+      margin: 0.5em 0;
+  }
 </style>
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the control meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the control do not meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The control does not meet the requirement.</div>
+
+| Accessibility Criteria                                                                  | Compatibility                                                                                      |
+| --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support                                       | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
+| [Section 508](https://www.section508.gov/) Support                                      | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes">             |
+| Screen Reader Support                                                                   | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
+| Right-To-Left Support                                                                   | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes">             |
+| Color Contrast                                                                          | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes">             |
+| Mobile Device Support                                                                   | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes">             |
+| Keyboard Navigation Support                                                             | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes">             |
+| [Accessibility Checker](https://www.npmjs.com/package/accessibility-checker) Validation | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes">             |
+| [Axe-core](https://www.npmjs.com/package/axe-core) Accessibility Validation             | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes">             |
+
+### WCAG 2.2 compliance details
+
+The Gantt Chart control achieves **Level AA compliance** for most WCAG 2.2 criteria. The **Intermediate** rating reflects specific limitations including complex data relationships where advanced dependency visualizations may not provide complete programmatic relationships for assistive technologies, dynamic content updates where certain real-time data changes in large datasets may require additional ARIA live region implementation, and custom templates where user-defined templates may require additional accessibility considerations depending on content complexity.
 
 ## WAI-ARIA attributes
 
-The Gantt component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns) patterns to meet the accessibility. The following ARIA attributes are used in the Gantt component:
+The Gantt Chart control implements comprehensive [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns) patterns to ensure optimal accessibility. These attributes provide semantic information to assistive technologies and enhance the user experience for individuals with disabilities.
+
+### Core ARIA implementation
+
+| Attributes            | Purpose                                                                                                   | Implementation Context                                  |
+| --------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+| `grid (role)`         | Applied to the `e-table` element representing the Grid portion of the Gantt Chart control               | Provides semantic structure for the data grid area      |
+| `gridcell (role)`     | Applied to `td` elements within the `e-table`, representing individual work cells in the Gantt grid       | Enables cell-by-cell navigation for screen readers      |
+| `columnheader (role)` | Applied to `th` elements within the `e-table`, representing header cells in the Grid table                | Provides column identification and sorting information  |
+| `separator (role)`    | Applied to the `e-split-bar` element, representing the splitter between the Grid table and Chart sections | Indicates resizable boundary between interface sections |
+| `dialog (role)`       | Applied to the `e-dialog` element, representing modal dialog boxes                                        | Manages focus and provides modal interaction patterns   |
+| `toolbar (role)`      | Applied to the `e-gantt-toolbar` element, representing the control's toolbar                            | Groups related actions and provides toolbar navigation  |
 
-The following ARIA attributes are used in Gantt:
+### Dynamic ARIA properties
 
-| Attributes | Purpose |
-| --- | --- |
-| `grid (role)` | This attribute is added to the `e-table` element present in the Gantt, which represents Grid part |
-| `gridcell (role)` | This attribute is added to the `td` elements present within the `e-table`, which represents the work cells of Gantt |
-| `columnheader (role)` | This attribute is added to the `th` elements within the `e-table`, which represents the header cells of Grid table |
-| `separator (role)` | This attribute is added to the `e-split-bar` element, which represents the splitter between the Grid table and Chart |
-| `dialog (role)` | This attribute is added to the `e-dialog` element, which represents the pop-up dialog |
-| `toolbar (role)` | This attribute is added to the `e-gantt-toolbar` element, which represents the toolbars of Gantt |
-| `aria-label` | It indicates the element's information`<br>` It is assigned to the Gantt UI elements such as timeline cell, taskbar, left label, right label, dependency line, and event markers. |
-| `aria-selected` | This attribute is assigned to the Gantt chart row, and it defaults to `false`. The value is changed to `true` when the user selects a grid cell or task |
-| `aria-expanded` | This attribute is assigned to the Gantt chart parent task row. The value is changed to `true` when the user clicks a parent taskbar to expand. After the user clicked a parent taskbar to collapse, the attribute value is changed to `false` |
-| `aria-grabbed` | This attribute is assigned to the taskbars of Gantt when the user tries to achieve taskbar editing |
+| Attributes         | Purpose                                                                                                                          | Dynamic Behavior                                                            |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `aria-label`       | Provides descriptive information for UI elements including timeline cells, taskbars, labels, dependency lines, and event markers | Dynamically updates based on task names, dates, progress, and relationships |
+| `aria-selected`    | Applied to Gantt chart rows with a default value of **false**. Changes to **true** when users select a grid cell or task         | Updates during selection changes to maintain current selection state        |
+| `aria-expanded`    | Applied to parent task rows. Value changes to **true** when expanding and **false** when collapsing parent tasks                 | Reflects hierarchical task structure state changes                          |
+| `aria-grabbed`     | Applied to taskbars during taskbar editing operations to indicate drag state                                                     | Activated during drag-and-drop operations for accessibility feedback        |
+| `aria-describedby` | Links tasks to detailed descriptions, tooltips, or error messages                                                                | Dynamically associates contextual information with interactive elements     |
+| `aria-rowindex`    | Applied to grid rows to indicate position within the complete dataset                                                            | Updates based on current view and virtualization state                      |
+| `aria-colindex`    | Applied to grid cells to indicate column position                                                                                | Maintains column identification during horizontal scrolling                 |
 
 ## Keyboard navigation
 
-The Gantt component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns) guideline, ensuring accessibility for users of assistive technologies (AT) and those who rely solely on keyboard navigation. The following keyboard shortcuts are supported by the Gantt component:
-
-| **Press** | **To do this** |
-| --- | --- |
-| <kbd>Alt + J</kbd> | Focus Gantt component. |
-| <kbd>Tab / Shift + Tab</kbd> | Focus the next or previous element. |
-| <kbd>Home</kbd> | Selects the first row. |
-| <kbd>End</kbd> | Selects the last row. |
-| <kbd>DownArrow</kbd> | Moves the row selection downward. |
-| <kbd>UpArrow</kbd> | Moves the row  selection upward. |
-| <kbd>LeftArrow</kbd> | Moves the cell focus/cell selection left side. |
-| <kbd>RightArrow</kbd> | Moves the cell focus/cell selection right side. |
-| <kbd>Ctrl + Up Arrow</kbd> | Collapses all tasks. |
-| <kbd>Ctrl + Down Arrow</kbd> | Expands all tasks. |
-| <kbd>Ctrl + Shift + Up Arrow</kbd> | Collapses the selected row. |
-| <kbd>Ctrl + Shift + Down Arrow</kbd> | Expands the selected row. |
-| <kbd>Enter</kbd> | Saves request. |
-| <kbd>Esc</kbd> | Cancels request. |
-| <kbd>Insert</kbd> | Adds a new row. |
-| <kbd>Ctrl + Insert</kbd> | Opens addRowDialog. |
-| <kbd>Ctrl + F2</kbd> | Opens editRowDialog. |
-| <kbd>Delete</kbd> | Deletes the selected row. |
-| <kbd>Shift + F5</kbd> | FocusTask |
-| <kbd>Ctrl + Shift + F</kbd> | Focus search |
-| <kbd>Shift + DownArrow</kbd> | Extends the cell selection downwards. |
-| <kbd>Shift + UpArrow</kbd> | Extends the cell selection upwards. |
-| <kbd>Shift + LeftArrow</kbd> | Extends the cell selection to the left side. |
-| <kbd>Shift + RightArrow</kbd> | Extends the cell selection to the right side. |
-| <kbd>Ctrl + Z</kbd> | Undo the last action. |
-| <kbd>Ctrl + Y</kbd> | Redo the last action. |
-
-**Navigate between toolbar items using keyboard**
-
-In the Gantt component, follow these steps to navigate between toolbar items using the keyboard:
-
-**Step 1**: Press `ALT + J` to focus on the gantt component.
-**Step 2**: Press the `Tab` key to navigate to the first item in the toolbar.
-**Step 3**: Use the `LeftArrow` or `RightArrow` keys to move between toolbar items.
-**Step 4**: Press `Tab` key again to remove focus from the toolbar and return focus to the Gantt component.
-
-## Ensuring accessibility
-
-The Gantt component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
-
-The accessibility compliance of the Gantt component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/gantt.html) in a new window to evaluate the accessibility of the Gantt component with accessibility tools.
+The Gantt Chart control provides comprehensive keyboard navigation support following [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns) guidelines. This ensures full functionality for users relying on assistive technologies or keyboard-only navigation patterns.
+
+| **Press**                            | **To do this**                                 | **Context**                 |
+| ------------------------------------ | ---------------------------------------------- | --------------------------- |
+| <kbd>Alt + J</kbd>                   | Focus Gantt Chart control                    | Global application shortcut |
+| <kbd>Tab / Shift + Tab</kbd>         | Focus the next or previous element             | Standard tab navigation     |
+| <kbd>Home</kbd>                      | Selects the first row                          | Grid and chart areas        |
+| <kbd>End</kbd>                       | Selects the last row                           | Grid and chart areas        |
+| <kbd>DownArrow</kbd>                 | Moves the row selection downward               | Row navigation              |
+| <kbd>UpArrow</kbd>                   | Moves the row selection upward                 | Row navigation              |
+| <kbd>LeftArrow</kbd>                 | Moves the cell focus/cell selection left side  | Cell navigation             |
+| <kbd>RightArrow</kbd>                | Moves the cell focus/cell selection right side | Cell navigation             |
+| <kbd>Ctrl + Up Arrow</kbd>           | Collapses all tasks                            | Hierarchy management        |
+| <kbd>Ctrl + Down Arrow</kbd>         | Expands all tasks                              | Hierarchy management        |
+| <kbd>Ctrl + Shift + Up Arrow</kbd>   | Collapses the selected row                     | Individual task control     |
+| <kbd>Ctrl + Shift + Down Arrow</kbd> | Expands the selected row                       | Individual task control     |
+| <kbd>Enter</kbd>                     | Saves request                                  | During edit operations      |
+| <kbd>Esc</kbd>                       | Cancels request                                | During edit operations      |
+| <kbd>Insert</kbd>                    | Adds a new row                                 | Quick task creation         |
+| <kbd>Ctrl + Insert</kbd>             | Opens addRowDialog                             | Detailed task creation      |
+| <kbd>Ctrl + F2</kbd>                 | Opens editRowDialog                            | Task editing                |
+| <kbd>Delete</kbd>                    | Deletes the selected row                       | Task removal                |
+| <kbd>Shift + F5</kbd>                | Focus specific task                            | Task location               |
+| <kbd>Ctrl + Shift + F</kbd>          | Focus search functionality                     | Data filtering              |
+| <kbd>Ctrl + Z</kbd>                  | Undo the last action                           | Operation reversal          |
+| <kbd>Ctrl + Y</kbd>                  | Redo the last action                           | Operation restoration       |
+| <kbd>Shift + DownArrow</kbd>         | Extends the cell selection downwards           | Multi-cell selection        |
+| <kbd>Shift + UpArrow</kbd>           | Extends the cell selection upwards             | Multi-cell selection        |
+| <kbd>Shift + LeftArrow</kbd>         | Extends the cell selection to the left side    | Multi-cell selection        |
+| <kbd>Shift + RightArrow</kbd>        | Extends the cell selection to the right side   | Multi-cell selection        |
+
+## Error handling and validation accessibility
+
+The Gantt Chart control provides accessible error handling and validation feedback patterns for Gantt-specific scenarios including dependency validation, resource conflicts, and date constraint violations.
+
+{% if page.publishingplatform == "typescript" %}
+
+```ts
+import { Gantt, Edit, Selection, FailureEventArgs, TaskFieldsModel, EditSettingsModel } from '@syncfusion/ej2-gantt';
+import { data } from './datasource';
+
+Gantt.Inject(Edit, Selection);
+
+const taskFields: TaskFieldsModel = {
+  id: 'TaskID',
+  name: 'TaskName',
+  startDate: 'StartDate',
+  duration: 'Duration',
+  progress: 'Progress',
+  parentID: 'ParentID'
+};
+
+const editSettings: EditSettingsModel = {
+  allowEditing: true,
+  allowAdding: true,
+  allowDeleting: true
+};
+
+function formatErrorMessage(error: any): string {
+  const msg = (error && error.message) ? error.message : 'Unknown error';
+  return `Error: ${msg}. Please review your input and try again.`;
+}
+
+function manageFocusForError(args: FailureEventArgs): void {
+  const anyArgs: any = args as any;
+  const taskId = anyArgs?.data?.taskId ?? anyArgs?.data?.TaskID;
+  if (!taskId) { return; }
+
+  const targetElement = document.querySelector<HTMLElement>(`[data-task-id="${taskId}"]`);
+  if (targetElement) {
+    targetElement.focus();
+  }
+}
+
+function onActionFailure(args: FailureEventArgs): void {
+  const errorMessage = formatErrorMessage((args as any)?.error);
+  const region = document.getElementById('error-region');
+  if (region) {
+    region.textContent = errorMessage;
+  }
+  manageFocusForError(args);
+}
+
+const gantt: Gantt = new Gantt({
+  dataSource: data,
+  taskFields,
+  editSettings,
+  actionFailure: onActionFailure
+});
+
+gantt.appendTo('#Gantt');
+```
+
+{% elsif page.publishingplatform == "javascript" %}
+
+```js
+var taskFields = {
+  id: 'TaskID',
+  name: 'TaskName',
+  startDate: 'StartDate',
+  duration: 'Duration',
+  progress: 'Progress',
+  parentID: 'ParentID'
+};
+
+var editSettings = {
+  allowEditing: true,
+  allowAdding: true,
+  allowDeleting: true
+};
+
+function formatErrorMessage(error) {
+  var msg = (error && error.message) ? error.message : 'Unknown error';
+  return 'Error: ' + msg + '. Please review your input and try again.';
+}
+
+function manageFocusForError(args) {
+  var taskId = args && args.data && (args.data.taskId || args.data.TaskID);
+  if (!taskId) { return; }
+
+  var targetElement = document.querySelector('[data-task-id="' + taskId + '"]');
+  if (targetElement && typeof targetElement.focus === 'function') {
+    targetElement.focus();
+  }
+}
+
+function onActionFailure(args) {
+  var errorMessage = formatErrorMessage(args && args.error);
+  var region = document.getElementById('error-region');
+  if (region) {
+    region.textContent = errorMessage;
+  }
+  manageFocusForError(args);
+}
+
+ej.gantt.Gantt.Inject(ej.gantt.Edit, ej.gantt.Selection);
+
+var gantt = new ej.gantt.Gantt({
+  dataSource: data,
+  taskFields: taskFields,
+  editSettings: editSettings,
+  actionFailure: onActionFailure
+});
+
+gantt.appendTo('#Gantt');
+```
+{% endif %}
+
+## Mobile and touch accessibility
+
+The Gantt Chart control provides comprehensive accessibility support for mobile and touch devices through the [enableAdaptiveUI](../../api/gantt#enableadaptiveui) property, ensuring individuals with disabilities can effectively interact with the control across all device types.
+
+Touch gesture accessibility includes single tap equivalent to click for task selection and activation, double tap to open task editing dialog or activate focused elements, long press to open context menu with full keyboard navigation support, swipe gestures for horizontal scrolling through timeline with appropriate announcements, and pinch to zoom for timeline scaling with accessibility feedback. These gestures are optimized for assistive touch technologies and provide haptic feedback where supported by the device platform.
+
+## Testing accessibility
+
+The Gantt Chart control's accessibility compliance is validated through automated testing using [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) tools. These tools help ensure the control meets established accessibility standards during development and testing phases, providing comprehensive coverage of WCAG guidelines and Section 508 compliance requirements.
+
+## Voluntary Product Accessibility Template (VPAT)
+
+The Syncfusion ##Platform_Name## Gantt Chart control includes comprehensive VPAT documentation detailing accessibility conformance across international standards. This documentation provides structured information about compliance with Section 508, WCAG 2.2, and EN 301 549 requirements.
+
+For detailed accessibility conformance information, refer to the [Syncfusion VPAT document](https://ej2.syncfusion.com/accessibility/Syncfusion-VPAT2.5.docx) which provides specific compliance details for all Syncfusion components including the Gantt chart.
+
+## Live accessibility sample
+
+The accessibility compliance of the Gantt Chart control is demonstrated in the following comprehensive sample. This sample showcases all accessibility features, keyboard navigation patterns, and assistive technology support.
 
 {% previewsample "https://ej2.syncfusion.com/accessibility/gantt.html" %}
 
+The sample demonstrates complete keyboard navigation functionality, screen reader announcements and ARIA implementation, focus management during complex operations, accessible error handling and validation, mobile and touch accessibility support, and real-time content update accessibility with appropriate ARIA live region announcements for virtualized content and dynamic data changes.
+
 ## See also
 
-* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## components](../common/accessibility)
\ No newline at end of file
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## components](../common/accessibility)
+* [Keyboard Navigation in ##Platform_Name## Gantt Chart control](./keyboard-navigation)
+* [WCAG 2.2 Guidelines](https://www.w3.org/TR/WCAG22/)
+* [Section 508 Standards](https://www.section508.gov/)
\ No newline at end of file
diff --git a/ej2-javascript/gantt/columns/check-box-columns.md b/ej2-javascript/gantt/columns/check-box-columns.md
index dd571118a..79ea30311 100644
--- a/ej2-javascript/gantt/columns/check-box-columns.md
+++ b/ej2-javascript/gantt/columns/check-box-columns.md
@@ -15,7 +15,7 @@ To render boolean values as checkbox in columns, you need to set [displayAsCheck
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/checkbox-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/columns/column-menu.md b/ej2-javascript/gantt/columns/column-menu.md
index b199b4385..afe2ec80c 100644
--- a/ej2-javascript/gantt/columns/column-menu.md
+++ b/ej2-javascript/gantt/columns/column-menu.md
@@ -15,17 +15,17 @@ The column menu has options to integrate features like sorting, filtering, and a
 
 The default items are displayed in the following table:
 
-| Item | Description |
-|-----|-----|
-| `SortAscending` | Sort the current column in ascending order. |
-| `SortDescending` | Sort the current column in descending order. |
-| `AutoFit` | Auto fit the current column. |
-| `AutoFitAll` | Auto fit all columns. |
-| `Filter` | Show the filter option as given in the `filterSettings.type` property. |
+| Item             | Description                                                            |
+| ---------------- | ---------------------------------------------------------------------- |
+| `SortAscending`  | Sort the current column in ascending order.                            |
+| `SortDescending` | Sort the current column in descending order.                           |
+| `AutoFit`        | Auto fit the current column.                                           |
+| `AutoFitAll`     | Auto fit all columns.                                                  |
+| `Filter`         | Show the filter option as given in the `filterSettings.type` property. |
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/columns-cs1/index.ts %}
 {% endhighlight %}
@@ -61,7 +61,7 @@ During the resizing action, the gantt component triggers the below two events.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/columnMenu-events-cs1/index.ts %}
 {% endhighlight %}
@@ -92,7 +92,7 @@ Custom column menu items can be added by defining the [columnMenuItems](../../ap
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/columnMenu-custom-item-cs1/index.ts %}
 {% endhighlight %}
@@ -125,7 +125,7 @@ The following sample, **Filter** item was hidden in column menu when opens for t
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/colMenu-customAction-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/columns/column-reordering.md b/ej2-javascript/gantt/columns/column-reordering.md
index d45bf8bcc..94c1a8fdb 100644
--- a/ej2-javascript/gantt/columns/column-reordering.md
+++ b/ej2-javascript/gantt/columns/column-reordering.md
@@ -18,7 +18,7 @@ To use the column reordering feature, inject the `Reorder` module to the Gantt c
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/columns-cs2/index.ts %}
 {% endhighlight %}
@@ -51,7 +51,7 @@ Multiple columns can be reordered at a time by using the [reorderColumns](../../
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/multipleReorder-cs1/index.ts %}
 {% endhighlight %}
@@ -86,7 +86,7 @@ During the reorder action, the gantt component triggers the below three events.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/reorder-events-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/columns/column-resizing.md b/ej2-javascript/gantt/columns/column-resizing.md
index 16c6a18e0..fc83d7117 100644
--- a/ej2-javascript/gantt/columns/column-resizing.md
+++ b/ej2-javascript/gantt/columns/column-resizing.md
@@ -17,7 +17,7 @@ To resize the column, inject the `Resize` module into the Gantt control.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/columns-cs3/index.ts %}
 {% endhighlight %}
@@ -52,7 +52,7 @@ In the following example, the minimum and maximum widths are defined for the `Du
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/columns-cs4/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/columns/column-spanning.md b/ej2-javascript/gantt/columns/column-spanning.md
index 27a72c3b3..9a967342c 100644
--- a/ej2-javascript/gantt/columns/column-spanning.md
+++ b/ej2-javascript/gantt/columns/column-spanning.md
@@ -11,13 +11,13 @@ domainurl: ##DomainURL##
 
 # Column spanning in ##Platform_Name## Gantt control
 
-The gantt has option to span the adjacent cells. You need to define the [colSpan](../../api/gantt/queryCellInfoEventArgs#colspan) attribute to span cells in the [QueryCellInfo](../../api/gantt/queryCellInfoEventArgs) event.
+The gantt has option to span the adjacent cells. You need to define the [colSpan](../../api/gantt/querycellinfoeventargs#colspan) attribute to span cells in the [QueryCellInfo](../../api/gantt/querycellinfoeventargs) event.
 
 In the following demo, **Work 1**  cells have been spanned.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/column-span-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/columns/column-template.md b/ej2-javascript/gantt/columns/column-template.md
index c7fb531cd..feed5abda 100644
--- a/ej2-javascript/gantt/columns/column-template.md
+++ b/ej2-javascript/gantt/columns/column-template.md
@@ -15,7 +15,7 @@ A column template is used to customize the column’s look. The following code e
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/columnTemplate-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/columns/columns.md b/ej2-javascript/gantt/columns/columns.md
index 00d3fb3f1..84da6ff74 100644
--- a/ej2-javascript/gantt/columns/columns.md
+++ b/ej2-javascript/gantt/columns/columns.md
@@ -19,11 +19,11 @@ The [treeColumnIndex](../../api/gantt#treecolumnindex) property is used to defin
 
 ## Defining columns
 
-Using the [columns](../../api/gantt#columns) property, you can define the columns in Gantt. If the columns are not defined, then the default columns will be rendered based on the mapped data source fields in the [taskFields](../../api/gantt/taskFields) property. Refer to the following code example for defining the columns in Gantt along with their widths.
+Using the [columns](../../api/gantt#columns) property, you can define the columns in Gantt. If the columns are not defined, then the default columns will be rendered based on the mapped data source fields in the [taskFields](../../api/gantt/taskfields) property. Refer to the following code example for defining the columns in Gantt along with their widths.
 
  {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/columns-cs5/index.ts %}
 {% endhighlight %}
@@ -54,7 +54,7 @@ The column header text can be defined using the [headerText](../../api/gantt/col
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/headerTemplate-cs1/index.ts %}
 {% endhighlight %}
@@ -85,7 +85,7 @@ To format the cell values based on a specific culture, use the [columns.format](
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/columns-cs6/index.ts %}
 {% endhighlight %}
@@ -116,11 +116,11 @@ To format the cell values based on a specific culture, use the [columns.format](
 
 The number or integer values can be formatted using the following format strings.
 
-Format |Description |Remarks
------|-----
-N | Denotes numeric type. | The numeric format is followed by an integer value like N2 or N3, which denotes the number of precisions to be allowed.
-C | Denotes currency type. | The currency format is followed by an integer value like C2 or C3, which denotes the number of precisions to be allowed.
-P | Denotes percentage type | The percentage format expects the input value to be in the range of 0 to 100. For example, the cell value `0.2` is formatted as `20%`. The percentage format is followed by an integer value like P2, P3, which denotes the number of precisions to be allowed.
+| Format | Description             | Remarks                                                                                                                                                                                                                                                         |
+| ------ | ----------------------- |
+| N      | Denotes numeric type.   | The numeric format is followed by an integer value like N2 or N3, which denotes the number of precisions to be allowed.                                                                                                                                         |
+| C      | Denotes currency type.  | The currency format is followed by an integer value like C2 or C3, which denotes the number of precisions to be allowed.                                                                                                                                        |
+| P      | Denotes percentage type | The percentage format expects the input value to be in the range of 0 to 100. For example, the cell value `0.2` is formatted as `20%`. The percentage format is followed by an integer value like P2, P3, which denotes the number of precisions to be allowed. |
 
 ### Date formatting
 
@@ -130,17 +130,17 @@ For the built-in date format, you can specify the [columns.format](../../api/gan
 
 You can also use the custom format string to format the date values. Some of the custom formats and the formatted date values are given in the following table.
 
-Format | Formatted value
------|-----
-{ type:'date', format:'dd/MM/yyyy' } | 04/07/2019
-{ type:'date', format:'dd.MM.yyyy' } | 04.07.2019
-{ type:'date', skeleton:'short' } | 7/4/19
-{ type: 'dateTime', format: 'dd/MM/yyyy hh:mm a' } | 04/07/2019 12:00 AM
-{ type: 'dateTime', format: 'MM/dd/yyyy hh:mm:ss a' } | 07/04/2019 12:00:00 AM
+| Format                                                | Formatted value        |
+| ----------------------------------------------------- | ---------------------- |
+| { type:'date', format:'dd/MM/yyyy' }                  | 04/07/2019             |
+| { type:'date', format:'dd.MM.yyyy' }                  | 04.07.2019             |
+| { type:'date', skeleton:'short' }                     | 7/4/19                 |
+| { type: 'dateTime', format: 'dd/MM/yyyy hh:mm a' }    | 04/07/2019 12:00 AM    |
+| { type: 'dateTime', format: 'MM/dd/yyyy hh:mm:ss a' } | 07/04/2019 12:00:00 AM |
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/columns-cs7/index.ts %}
 {% endhighlight %}
@@ -171,7 +171,7 @@ The tree/expander column is a column in the Gantt control, that has icons to exp
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/columns-cs9/index.ts %}
 {% endhighlight %}
@@ -202,7 +202,7 @@ You can show or hide gantt columns dynamically using external buttons by invokin
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/show-hide-cs1/index.ts %}
 {% endhighlight %}
@@ -233,7 +233,7 @@ You can enable or disable gantt action for a particular column by setting the [a
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/Grid-actions-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/columns/responsive-columns.md b/ej2-javascript/gantt/columns/responsive-columns.md
index c6d9fcf65..654217883 100644
--- a/ej2-javascript/gantt/columns/responsive-columns.md
+++ b/ej2-javascript/gantt/columns/responsive-columns.md
@@ -15,7 +15,7 @@ You can toggle the column visibility based on media queries, which are defined i
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/columns-cs8/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/context-menu.md b/ej2-javascript/gantt/context-menu.md
index e10949092..07007bf8c 100644
--- a/ej2-javascript/gantt/context-menu.md
+++ b/ej2-javascript/gantt/context-menu.md
@@ -17,24 +17,24 @@ To use the context menu, inject the [ContextMenu](../api/gantt#contextmodule) mo
 
 The default items are listed in the following table.
 
-Items| Description
-----|----
-`AutoFit`|  Auto-fits the current column.
-`AutoFitAll` | Auto-fits all columns.
-`SortAscending` | Sorts the current column in ascending order.
-`SortDescending` | Sorts the current column in descending order.
-`TaskInformation`|  Edits the current task.
-`Add` | Adds a new row to the Gantt.
-`Indent` | Indent the selected record to one level.
-`Outdent` | Outdent the selected record to one level.
-`DeleteTask` | Deletes the current task.
-`Save` | Saves the edited task.
-`Cancel` | Cancels the edited task.
-`DeleteDependency` | Deletes the current dependency task link.
-`Convert` | Converts current task to milestone or vice-versa.
+| Items              | Description                                       |
+| ------------------ | ------------------------------------------------- |
+| `AutoFit`          | Auto-fits the current column.                     |
+| `AutoFitAll`       | Auto-fits all columns.                            |
+| `SortAscending`    | Sorts the current column in ascending order.      |
+| `SortDescending`   | Sorts the current column in descending order.     |
+| `TaskInformation`  | Edits the current task.                           |
+| `Add`              | Adds a new row to the Gantt.                      |
+| `Indent`           | Indent the selected record to one level.          |
+| `Outdent`          | Outdent the selected record to one level.         |
+| `DeleteTask`       | Deletes the current task.                         |
+| `Save`             | Saves the edited task.                            |
+| `Cancel`           | Cancels the edited task.                          |
+| `DeleteDependency` | Deletes the current dependency task link.         |
+| `Convert`          | Converts current task to milestone or vice-versa. |
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/contextMenu-cs1/index.ts %}
 {% endhighlight %}
@@ -69,7 +69,7 @@ The following sample shows context menu item for parent rows to expand or collap
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/customContextMenu-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/data-binding.md b/ej2-javascript/gantt/data-binding.md
index eef47fb06..25f8f8c15 100644
--- a/ej2-javascript/gantt/data-binding.md
+++ b/ej2-javascript/gantt/data-binding.md
@@ -34,7 +34,7 @@ The following code example shows how to bind the hierarchical local data into th
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/databinding-cs1/index.ts %}
 {% endhighlight %}
@@ -68,7 +68,7 @@ The Gantt control can be bound with self-referential data by mapping the data so
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/databinding-cs2/index.ts %}
 {% endhighlight %}
@@ -99,7 +99,7 @@ To bind remote data to the Gantt component, assign service data as an instance o
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/databinding-cs3/index.ts %}
 {% endhighlight %}
@@ -644,7 +644,7 @@ The argument passed to the `actionFailure` event contains the error details retu
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/actionfailure-cs1/index.ts %}
 {% endhighlight %}
@@ -675,7 +675,7 @@ You can use Gantt [dataSource](../api/gantt#datasource) property to bind the dat
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/bindajax-cs1/index.ts %}
 {% endhighlight %}
@@ -726,7 +726,7 @@ To split a task at load time in hierarchical way, we need to define the segment
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/split-task-cs1/index.ts %}
 {% endhighlight %}
@@ -771,7 +771,7 @@ We can also define segment details as a flat data and this collection can be map
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/split-task-cs2/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/data-markers.md b/ej2-javascript/gantt/data-markers.md
index 6144501d3..ee67f9cfc 100644
--- a/ej2-javascript/gantt/data-markers.md
+++ b/ej2-javascript/gantt/data-markers.md
@@ -26,7 +26,7 @@ The following code example demonstrates how to implement data markers in the Gan
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/data-markers-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/event-markers.md b/ej2-javascript/gantt/event-markers.md
index 371851cb1..c1e7cd9b4 100644
--- a/ej2-javascript/gantt/event-markers.md
+++ b/ej2-javascript/gantt/event-markers.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Event markers in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Event markers in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Eventmarkers in ##Platform_Name## Gantt Chart Control | Syncfusion
+description: Learn here all about Eventmarkers in Syncfusion ##Platform_Name## Gantt Chart control of Syncfusion Essential JS 2 and more.
 platform: ej2-javascript
 control: Event markers 
 publishingplatform: ##Platform_Name##
@@ -9,15 +9,39 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Event markers in ##Platform_Name## Gantt control
+# Event Markers in ##Platform_Name## Gantt Chart Control
 
-The event markers in the Gantt control is used to highlight the important events in a project. Event markers can be initialized by using the [eventMarkers](../api/gantt/eventMarker) property, and you can define date and label for the event markers using the [day](../api/gantt/eventMarker#day) and [label](../api/gantt/eventMarker#label) properties. You can also customize it using the [cssClass](../api/gantt/eventMarker#cssclass) properties. The following code example shows how to add event markers in the Gantt control.
+Event markers highlight significant project events by displaying vertical timeline indicators that span across the entire Gantt chart. These markers identify critical dates, milestones, deadlines, or important project events that affect multiple tasks or the overall project timeline, providing visual reference points for project-wide activities.
 
-To highlight the days, inject the [DayMarkers](../api/gantt#daymarkersmodule) module into the Gantt control.
+Understanding event markers implementation enables effective visualization of project-critical dates and enhances timeline awareness across all project phases.
+
+Event markers utilize specific properties to define their positioning, appearance, and identification within the project timeline:
+
+**Date positioning**: The [day](../../api/gantt/eventMarker#day) property establishes the exact timeline date where the marker appears. This date value determines marker placement across the entire vertical timeline, ensuring accurate project event representation.
+
+**Descriptive labeling**: The [label](../../api/gantt/eventMarker#label) property provides descriptive text that identifies the marker's purpose or significance. Labels enhance user understanding by clearly indicating what project event the marker represents.
+
+**Visual customization**: The [cssClass](../../api/gantt/eventMarker#cssclass) property enables custom styling through CSS class applications. This property allows distinctive visual treatment for different marker types, supporting color coding, styling variations, and brand consistency.
+
+**Vertical adjustment**: The [top](../../api/gantt/eventMarker#top) property specifies the vertical offset (in pixels) of the marker from the top of the chart pane's content area. This property helps prevent visual overlap when multiple markers share the same date, ensuring clear and organized marker placement.
+
+## Event marker configuration
+
+Event markers render as vertical lines positioned at specific dates across the entire Gantt chart timeline, distinguishing them from data markers which appear within individual task rows. This project-wide visibility ensures critical dates remain prominent regardless of the current view or task focus.
+
+**Timeline integration**: Event markers integrate seamlessly with the Gantt chart timeline, appearing as vertical indicators that extend from the top to the bottom of the chart area. This comprehensive visibility ensures important dates remain visible during scrolling, zooming, or filtering operations.
+
+**Configuration requirements**: Event markers require the `DayMarkers` injection in the AppModule providers section to enable rendering functionality. This service manages marker positioning, styling, and timeline integration logic.
+
+**Multiple marker support**: The control supports multiple event markers simultaneously, allowing comprehensive tracking of various project-critical dates within the same timeline view. Each marker maintains independent configuration while sharing the common timeline space.
+
+**Service integration**: Event marker functionality requires the [eventMarkers](../../api/gantt#eventmarkers) property initialization combined with `DayMarkers` injection to enable proper rendering and timeline integration.
+
+The following implementation demonstrates event marker integration within a Gantt chart, showcasing timeline-wide event highlighting:
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/event-markers-cs1/index.ts %}
 {% endhighlight %}
@@ -42,64 +66,41 @@ To highlight the days, inject the [DayMarkers](../api/gantt#daymarkersmodule) mo
 {% previewsample "page.domainurl/code-snippet/gantt/event-markers-cs1" %}
 {% endif %}
 
-## Displaying eventMarkers in stacked manner
+## Programmatically show and hide event markers
 
-When [eventMarkers](../api/gantt/eventMarker) are given in consecutive dates and zoomToFit is performed, they may overlap. To avoid this, you can update the position of the eventMarkers in the [dataBound](../api/gantt#databound) and [actionComplete](../api/gantt#actioncomplete) events so that they are not overlapped and are visible to read.
+You can programmatically show or hide event markers in the Gantt chart by updating the [eventMarkers](../../api/gantt#eventmarkers) property.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/event-markers-cs2/index.ts %}
+{% include code-snippet/gantt/event-markers-cs3/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/event-markers-cs2/index.html %}
+{% include code-snippet/gantt/event-markers-cs3/index.html %}
 {% endhighlight %}
 {% endtabs %}
         
-{% previewsample "page.domainurl/code-snippet/gantt/event-markers-cs2" %}
+{% previewsample "page.domainurl/code-snippet/gantt/event-markers-cs3" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/event-markers-cs2/index.js %}
+{% include code-snippet/gantt/event-markers-cs3/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/event-markers-cs2/index.html %}
+{% include code-snippet/gantt/event-markers-cs3/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/gantt/event-markers-cs2" %}
+{% previewsample "page.domainurl/code-snippet/gantt/event-markers-cs3" %}
 {% endif %}
 
-## Managing event marker overlapping in ##Platform_Name## gantt control
-
-In the EJ2 Gantt control, it is possible to customize multiple [eventMarkers](../api/gantt/eventMarker) for the same date. However, by default, in such scenarios, these markers may overlap each other, resulting in visual clutter. To manage this, the following sample code demonstrates how to utilize the Gantt dataBound function to obtain label and arrow classes. It performs a loop action to fulfill the current requirement and to avoid overlapping. For further clarification, the code snippet below illustrates the flow of its implementation.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/eventmarkeroverlap-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/eventmarkeroverlap-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/gantt/eventmarkeroverlap-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
+## See Also
 
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/eventmarkeroverlap-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/eventmarkeroverlap-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/gantt/eventmarkeroverlap-cs1" %}
-{% endif %}
+- [How to bind data to the Gantt chart?](../../gantt/data-binding)
+- [How to enable context menu in Gantt chart?](../../gantt/context-menu)
+- [How to compare planned vs. actual schedules?](../../gantt/baseline)
+- [How to visualize critical tasks in Gantt chart?](../../gantt/critical-path)
+- [How to highlight task-specific events?](../../gantt/data-markers)
\ No newline at end of file
diff --git a/ej2-javascript/gantt/excel-export/custom-data-source.md b/ej2-javascript/gantt/excel-export/custom-data-source.md
deleted file mode 100644
index dcb98d75c..000000000
--- a/ej2-javascript/gantt/excel-export/custom-data-source.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: Custom data source in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Custom data source in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Custom data source 
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Custom data source in ##Platform_Name## Gantt control
-
-The excel export provides an option to define datasource dynamically before exporting. To export data dynamically, define the `dataSource` in `exportProperties`.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/excel-export-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-export-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/excel-export-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-export-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs1" %}
-{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/gantt/excel-export/excel-export-options.md b/ej2-javascript/gantt/excel-export/excel-export-options.md
new file mode 100644
index 000000000..0904fb61f
--- /dev/null
+++ b/ej2-javascript/gantt/excel-export/excel-export-options.md
@@ -0,0 +1,294 @@
+---
+layout: post
+title: Excel Export Options in ##Platform_Name## Gantt Chart Control | Syncfusion
+description: Learn here all about Excel export in Syncfusion ##Platform_Name## Gantt Chart control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Excel Export Options
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Excel Export Options in ##Platform_Name## Gantt Chart Control
+
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## Gantt Chart control provides configurable options for Excel or CSV export through the [ExcelExportProperties](../../api/grid/excelExportProperties) object. You can customize column selection, include hidden columns, define a custom data source, apply filters, and format exported data. It also supports setting file names, adding headers and footers, and exporting multiple Gantt Charts.
+
+## Export selected records
+
+You can export selected records to Excel or CSV by using [getSelectedRecords](../../api/treegrid#getselectedrecords) to retrieve the required data and assigning it to [ExportProperties.dataSource](../../api/grid/excelExportProperties#datasource) within the [toolbarClick](../../gantt/events#toolbarclick) event. Once the data source is set, initiate the export using [excelExport](../../api/gantt#excelexport) or [csvExport](../../api/gantt#csvexport) method.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-export-cs14/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs14/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs14" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-export-cs14/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs14/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs14" %}
+{% endif %}
+
+## Show or hide columns during export
+
+To show or hide specific columns during Excel export in Gantt, use the [toolbarClick](../../gantt/events#toolbarclick) event to check `args.item.id` and update the [columns.visible](../../api/grid/column#visible) property to **true** or **false** . After the export is complete, restore the original column visibility using the [excelExportComplete](../../gantt/events#excelexportcomplete) event.
+
+The following example demonstrates how the **StartDate** column is made visible and the **Duration** column is excluded from the exported Excel file.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-export-cs4/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs4/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs4" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-export-cs4/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs4/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs4" %}
+{% endif %}
+
+## Include hidden columns in export
+
+To include hidden columns during Excel export in the Gantt Chart control, set [ExportProperties.includeHiddenColumn](../../api/grid/excelExportProperties#includehiddencolumn) to **true** in the export configuration. This ensures that hidden columns are included in the exported data.
+
+The following example demonstrates that the hidden **StartDate** column is included in the exported file.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-export-cs3/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs3" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-export-cs3/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs3" %}
+{% endif %}
+
+## Enable filtering in exported Excel
+
+To enable filtering in exported Excel or CSV files in Gantt Chart control, set the [enableFilter](../../api/grid/excelExportProperties#enablefilter) property to **true** within [ExcelExportProperties](../../api/grid/excelExportProperties). Additionally, ensure that filtering is enabled in the Gantt configuration by setting [allowFiltering](../../api/gantt#allowfiltering) to **true**.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-export-cs15/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs15/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs15" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-export-cs15/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs15/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs15" %}
+{% endif %}
+
+## Set custom file name
+
+To specify a custom name for the exported Excel or CSV file in the Gantt Chart control, set the [fileName](../../api/grid/excelExportProperties#filename) property within the [ExcelExportProperties](../../api/grid/excelExportProperties) configuration. This defines the name assigned to the file when the export is triggered.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-export-cs8/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs8/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs8" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-export-cs8/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs8/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs8" %}
+{% endif %}
+
+## Customize exported columns
+
+The Gantt Chart control supports customizing column settings during Excel or CSV export by configuring the [ExcelExportProperties.columns](../../api/grid/excelExportProperties#columns) property. You can specify attributes such as `field`, `headerText`, and `textAlign` to define the structure and formatting of each column in the exported file, aligning the exported content with specific layout and styling preferences.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/gantt/excel-export-cs13/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/gantt/excel-export-cs13/app/index.tsx %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs13/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs13" %}
+
+## Add header and footer to export
+
+To add header and footer content to exported Excel or CSV files in the Gantt Chart control, configure the [header](../../api/grid/excelExportProperties#header) and [footer](../../api/grid/excelExportProperties#footer) properties within [ExcelExportProperties](../../api/grid/excelExportProperties) during the [toolbarClick](../../gantt/events#toolbarclick) event. This allows you to define custom content that appears at the top and bottom of the exported document.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-export-cs7/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs7/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs7" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-export-cs7/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs7/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs7" %}
+{% endif %}
+
+## Apply font and color themes
+
+The Excel or CSV export feature in Gantt supports applying custom themes to the exported document, helping maintain a consistent and visually structured appearance.
+
+To configure a theme, set the [theme](../../api/grid/excelExportProperties#theme) property within [ExcelExportProperties](../../api/grid/excelExportProperties). This allows customization of styles for the following sections in the exported file
+
+- **caption**: Defines the style for the caption, typically used for titles or descriptions at the top of the sheet.
+- **header**: Specifies the styling for column headers.
+- **record**: Applies formatting to the data rows exported from the Gantt Chart.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-export-cs6/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs6/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs6" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-export-cs6/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs6/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs6" %}
+{% endif %}
+
+> By default, tailwind3 theme is applied to the exported Excel document.
+
+## Apply conditional formatting
+
+You can customize Gantt cells in exported Excel or CSV documents using the [excelQueryCellInfo](../../gantt/events#excelquerycellinfo) event. This event is triggered for each cell during export, allowing formatting to be conditionally applied based on the cell's content.
+
+In the example below, the background color is customized for the **Progress** column in the exported Excel or CSV file:
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-export-cs5/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs5" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-export-cs5/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs5" %}
+{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/gantt/excel-export/excel-export.md b/ej2-javascript/gantt/excel-export/excel-export.md
index d032ed2f1..112f218c7 100644
--- a/ej2-javascript/gantt/excel-export/excel-export.md
+++ b/ej2-javascript/gantt/excel-export/excel-export.md
@@ -1,7 +1,8 @@
 ---
 layout: post
-title: Excel export in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Excel export in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Excel Export Options in ##Platform_Name## Gantt Chart Control | Syncfusion
+description: Learn here all about Excel export in Syncfusion ##Platform_Name## Gantt Chart control of Syncfusion Essential JS 2 and more.
+platform: ej2-react
 platform: ej2-javascript
 control: Excel export 
 publishingplatform: ##Platform_Name##
@@ -9,15 +10,17 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Excel export in ##Platform_Name## Gantt control
+# Excel Export in ##Platform_Name## Gantt Chart Control
 
-Gantt supports client-side exporting, which allows you to export its data to the Excel and CSV formats. Use the [excelExport](../../api/gantt#excelexport) and [csvExport](../../api/gantt#csvexport) methods for exporting. To enable Excel export in the Gantt, set the [allowExcelExport](../../api/gantt#allowexcelexport) to true.
+The Syncfusion ##Platform_Name## Gantt Chart control supports exporting project data to Excel and CSV formats, enabling seamless sharing, reporting, and offline analysis.
 
-To export data to Excel and CSV, inject the `ExcelExport` module in Gantt.
+To enable Excel or CSV export functionality, set the [allowExcelExport](../../api/gantt#allowexcelexport) property to **true** and inject the `ExcelExport` service into the control's `providers` array.
+
+You can trigger export operations using the [excelExport](../../api/gantt#excelexport) or [csvExport](../../api/gantt#csvexport) methods, typically within the [toolbarClick](../../gantt/events#toolbarclick) event.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/excel-export-cs2/index.ts %}
 {% endhighlight %}
@@ -25,7 +28,7 @@ To export data to Excel and CSV, inject the `ExcelExport` module in Gantt.
 {% include code-snippet/gantt/excel-export-cs2/index.html %}
 {% endhighlight %}
 {% endtabs %}
-        
+
 {% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs2" %}
 
 {% elsif page.publishingplatform == "javascript" %}
@@ -40,4 +43,227 @@ To export data to Excel and CSV, inject the `ExcelExport` module in Gantt.
 {% endtabs %}
 
 {% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs2" %}
+{% endif %}
+
+## Binding custom data source while exporting
+
+You can bind a custom data source for Excel or CSV export in the ##Platform_Name## Gantt Chart control by assigning it dynamically before the export begins. To achieve this, set the required data to the [dataSource](../../api/grid/excelExportProperties#datasource) property within the [ExcelExportProperties](../../api/grid/excelExportProperties) configuration.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-export-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-export-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs1" %}
+{% endif %}
+
+## Exporting with cell and row spanning
+
+To export merged cells and rows in Excel or CSV files using the ##Platform_Name## Gantt Chart control, handle the [excelQueryCellInfo](../../gantt/events#excelquerycellinfo) event and apply `rowSpan` and `colSpan` during the export process. The [queryCellInfo](../../gantt/events#querycellinfo) event can be used to customize cell rendering within the Gantt view.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-export-cs9/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs9/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs9" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-export-cs9/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs9/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs9" %}
+{% endif %}
+
+## Show spinner while exporting
+
+To indicate progress during the export operation in the ##Platform_Name## Gantt Chart control, use the [showSpinner](../../api/gantt#showspinner) method within the [toolbarClick](../../gantt/events#toolbarclick) event when initiating Excel or CSV export. After the export process completes, hide the spinner by calling the [hideSpinner](../../api/gantt#hidespinner) method inside the [excelExportComplete](../../gantt/events#excelexportcomplete) event.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-export-cs10/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs10/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs10" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-export-cs10/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs10/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs10" %}
+{% endif %}
+
+## Exporting with custom date format
+
+To apply a custom date format to columns during Excel or CSV export in the ##Platform_Name## Gantt Chart control, define the desired format using the [format](../../api/gantt/column#format) property in the column configuration.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-export-cs11/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs11/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs11" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-export-cs11/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs11/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs11" %}
+{% endif %}
+
+## Exporting multiple Gantt charts
+
+The ##Platform_Name## Gantt Chart control supports exporting multiple Gantt Charts either into a single worksheet or across separate sheets when generating Excel or CSV files.
+
+### Same sheet
+
+To export multiple datasets into a single worksheet, set [multipleExport.type](../../api/grid/excelExportProperties#multipleexport) to **AppendToSheet** within the [ExcelExportProperties](../../api/grid/excelExportProperties) configuration. To add spacing between datasets, define the number of blank rows using the [multipleExport.blankRows](../../api/grid/multipleExport#blankrows) property.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-multiple-export-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-multiple-export-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/excel-multiple-export-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-multiple-export-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-multiple-export-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-multiple-export-cs1" %}
+{% endif %}
+
+>By default, `multipleExport.blankRows` value is 5.
+
+### New sheet
+
+To export each Gantt to a separate worksheet, set [multipleExport.type](../../api/grid/excelExportProperties#multipleexport) to **NewSheet** in the [ExcelExportProperties](../../api/grid/excelExportProperties) configuration. This ensures each dataset is placed on its own sheet.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-multiple-export-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-multiple-export-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/excel-multiple-export-cs2" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-multiple-export-cs2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-multiple-export-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-multiple-export-cs2" %}
+{% endif %}
+
+## Export Gantt data as a Blob
+
+To export Gantt data as a Blob object for advanced processing or custom download workflows, set the `isBlob` parameter to **true** in the [excelExport](../../api/gantt#excelexport) or [csvExport](../../api/gantt#csvexport) method. Use the [excelExportComplete](../../gantt/events#excelexportcomplete) event to access the Blob and implement custom logic.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-export-cs12/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs12/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs12" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-export-cs12/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-export-cs12/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs11" %}
 {% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/gantt/excel-export/multiple-gantt-exporting.md b/ej2-javascript/gantt/excel-export/multiple-gantt-exporting.md
deleted file mode 100644
index 2f94f16d6..000000000
--- a/ej2-javascript/gantt/excel-export/multiple-gantt-exporting.md
+++ /dev/null
@@ -1,278 +0,0 @@
----
-layout: post
-title: Multiple gantt exporting in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Multiple gantt exporting in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Multiple gantt exporting 
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Multiple gantt exporting in ##Platform_Name## Gantt control
-
-In Gantt, the Excel export provides support to export multiple Gantt data in new sheet or same sheet.
-
-## Same sheet
-
-The Excel export provides support to export multiple Gantt data in the same sheet. To export in same sheet, define `multipleExport.type` as `AppendToSheet` in `ExcelExportProperties`. You can also provide blank rows between exported multiple Gantt data. These blank rows count can be defined using `multipleExport.blankRows`.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/excel-multiple-export-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-multiple-export-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/gantt/excel-multiple-export-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/excel-multiple-export-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-multiple-export-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/gantt/excel-multiple-export-cs1" %}
-{% endif %}
-
->By default, `multipleExport.blankRows` value is 5.
-
-## New sheet
-
-The Excel exporting provides support to export multiple Gantt in new sheet. To export in new sheet, define `multipleExport.type` as `NewSheet` in `ExcelExportProperties`.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/excel-multiple-export-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-multiple-export-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/gantt/excel-multiple-export-cs2" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/excel-multiple-export-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-multiple-export-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/gantt/excel-multiple-export-cs2" %}
-{% endif %}
-
-## Customize the Excel export
-
-Gantt Excel export allows the users to customize the exported document based on requirement.
-
-### Export hidden columns
-
-In Gantt, the Excel export provides an option to export hidden columns by defining `includeHiddenColumn` as `true`.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/excel-export-cs3/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-export-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs3" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/excel-export-cs3/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-export-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs3" %}
-{% endif %}
-
-### Show or hide columns on exported Excel
-
-In Gantt, while exporting, you can show a hidden column or hide a visible column using the [toolbarClick](../../api/gantt#toolbarclick) and [excelExportComplete](../../api/gantt#excelexportcomplete) events.
-
-In the `toolbarClick` event, using the `args.item.id` property, you can show or hide columns by setting the `column.visible` property to `true` or `false` respectively.
-
-Similarly, in the `excelExportComplete` event, you can revert the columns visibility back to the previous state.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/excel-export-cs4/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-export-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs4" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/excel-export-cs4/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-export-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs4" %}
-{% endif %}
-
-### Cell formatting during export
-
-In Gantt, you can customize the TreeGrid cells in the exported document using the [excelQueryCellInfo](../../api/gantt#excelquerycellinfo) event. In this event, you can format the TreeGrid cells of exported Excel and CSV documents based on the required condition.
-
-In the following sample, the background color has been customized for `TaskID` column in the exported Excel using the `args.style` and `backColor` properties.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/excel-export-cs5/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-export-cs5/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs5" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/excel-export-cs5/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-export-cs5/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs5" %}
-{% endif %}
-
-### Theme
-
-The Excel export also provides an option to include custom theme for exported Excel document.
-
-To apply theme in exported Excel, define the `theme` in `ExcelExportProperties`.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/excel-export-cs6/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-export-cs6/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs6" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/excel-export-cs6/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-export-cs6/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs6" %}
-{% endif %}
-
-> By default, tailwind3 theme is applied to the exported Excel document.
-
-### Add header and footer
-
-The Excel export also allows users to include header and footer contents to the exported Excel document.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/excel-export-cs7/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-export-cs7/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs7" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/excel-export-cs7/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-export-cs7/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs7" %}
-{% endif %}
-
-### File name for exported document
-
-You can set the required file name for the exported document by defining the `fileName` property in `ExcelExportProperties`.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/excel-export-cs8/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-export-cs8/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs8" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/excel-export-cs8/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/excel-export-cs8/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/gantt/excel-export-cs8" %}
-{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/gantt/filtering/excel-like-filter.md b/ej2-javascript/gantt/filtering/excel-like-filter.md
index effd870dd..9bce162af 100644
--- a/ej2-javascript/gantt/filtering/excel-like-filter.md
+++ b/ej2-javascript/gantt/filtering/excel-like-filter.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Excel like filter in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Excel like filter in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Excel Like Filter in Gantt Chart Control | Syncfusion
+description: Learn here all about excel like filter in Syncfusion ##Platform_Name## Gantt Chart control of Syncfusion Essential JS 2 and more.
 platform: ej2-javascript
 control: Excel like filter 
 publishingplatform: ##Platform_Name##
@@ -9,33 +9,168 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Excel like filter in ##Platform_Name## Gantt control
+# Excel-like Filtering in ##Platform_Name## Gantt Chart Control
 
-You can enable Excel like filter by defining [filterSettings.type](https://ej2.syncfusion.com/documentation/api/gantt/filtersettings#type) as `Excel`. The excel menu contains an option such as Sorting, Clear filter, Sub menu for advanced filtering.
+The Excel-like filter in Syncfusion<sup style="font-size:70%">&reg;</sup> Gantt Chart control enables column-level filtering similar to Microsoft Excel. It supports sorting, clearing filters, and applying advanced conditions through a submenu available in each column header. This feature is highly effective for working with large datasets and applying multiple filter criteria.
 
-{% if page.publishingplatform == "typescript" %}
+To enable this feature, configure [filterSettings.type](../../api/gantt/filtersettings#type) as **Excel** and set [allowFiltering](../../api/gantt#allowfiltering) to **true**.
 
- {% tabs %}
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-filter-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-filter-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/excel-filter-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-filter-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-filter-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-filter-cs1" %}
+{% endif %}
+
+## Show customized text in checkbox list data
+
+To customize the text displayed in a checkbox list, use `filterItemTemplate` and assign it to the desired column. This allows rendering custom content for each item in the filter list.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-filter-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-filter-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/excel-filter-cs2" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-filter-cs2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-filter-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-filter-cs2" %}
+{% endif %}
+
+## Hide Excel filter dialog elements
+
+You can hide elements such as the context menu, search box, sorting options, and checkbox list in the Gantt Excel filter dialog using the following CSS:
+
+```css
+.e-gantt .e-excelfilter .e-contextmenu-wrapper {
+    display: none;
+}
+```
+
+If you want to hide only the built-in sorting options (ascending, descending, and separator), apply the following CSS:
+
+```css
+ .e-excel-ascending,
+ .e-excel-descending,
+ .e-separator.e-excel-separator {
+    display: none;
+  }
+
+```
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-filter-cs3/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-filter-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/excel-filter-cs3" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-filter-cs3/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-filter-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-filter-cs3" %}
+{% endif %}
+
+## Customize filter choice count
+
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Gantt Chart control displays up to 1000 distinct values per column in the filter dialog by default. These values are taken from the first 1000 records bound to the control and shown as checkbox list items to maintain optimal performance. Additional values can be accessed using the search option within the filter dialog.
+
+To customize this behavior, the `filterChoiceCount` property can be adjusted to increase or decrease the number of distinct values displayed, depending on the dataset size and filtering requirements.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/excel-filter-cs4/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-filter-cs4/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/excel-filter-cs4" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/excel-filter-cs4/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/excel-filter-cs4/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/excel-filter-cs4" %}
+{% endif %}
+
+## Bind custom remote data source for Excel-like filtering
+
+You can dynamically bind a custom remote data source to the Excel filter in the Gantt Chart control by using a [DataManager](../../data/getting-started) with [WebApiAdaptor](../../data/adaptors#web-api-adaptor). This can be done by assigning the data source directly or storing fetched data in a global variable. Then, bind it to the filter module's `dataSource` within the [actionBegin](../../gantt/events#actionbegin) event when `requestType` is **filterBeforeOpen**.
+
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/initialLoadFiltering-cs1/index.ts %}
+{% include code-snippet/gantt/excel-filter-cs5/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/initialLoadFiltering-cs1/index.html %}
+{% include code-snippet/gantt/excel-filter-cs5/index.html %}
 {% endhighlight %}
 {% endtabs %}
         
-{% previewsample "page.domainurl/code-snippet/gantt/initialLoadFiltering-cs1" %}
+{% previewsample "page.domainurl/code-snippet/gantt/excel-filter-cs5" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/initialLoadFiltering-cs1/index.js %}
+{% include code-snippet/gantt/excel-filter-cs5/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/initialLoadFiltering-cs1/index.html %}
+{% include code-snippet/gantt/excel-filter-cs5/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/gantt/initialLoadFiltering-cs1" %}
+{% previewsample "page.domainurl/code-snippet/gantt/excel-filter-cs5" %}
 {% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/gantt/filtering/filter-menu.md b/ej2-javascript/gantt/filtering/filter-menu.md
index def2e989c..af5ac6666 100644
--- a/ej2-javascript/gantt/filtering/filter-menu.md
+++ b/ej2-javascript/gantt/filtering/filter-menu.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Filter menu in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Filter menu in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Filter Menu in ##Platform_Name## Gantt Chart Control | Syncfusion
+description: Learn here all about filter menu in Syncfusion ##Platform_Name## Gantt Chart control of Syncfusion Essential JS 2 and more.
 platform: ej2-javascript
 control: Filter menu 
 publishingplatform: ##Platform_Name##
@@ -9,13 +9,13 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Filter menu in ##Platform_Name## Gantt control
+# Filter Menu in ##Platform_Name## Gantt Chart Control
 
-The Gantt control provides the menu filtering support for each column. You can enable the filter menu by setting the [allowFiltering](../../api/gantt#allowfiltering) to `true`. The filter menu UI will be rendered based on its column type, which allows you to filter data. You can filter the records with different operators.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## Gantt Chart control offers a filter menu for each column, enabling you to filter data based on column type and supported operators such as equal, contains, greaterthan, etc. To enable this feature, set [allowFiltering](../../api/gantt#allowfiltering) to **true** and configure [filterSettings.type](../../api/gantt/filtersettings#type) as **Menu**.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/initialLoadFiltering-cs2/index.ts %}
 {% endhighlight %}
@@ -40,24 +40,21 @@ The Gantt control provides the menu filtering support for each column. You can e
 {% previewsample "page.domainurl/code-snippet/gantt/initialLoadFiltering-cs2" %}
 {% endif %}
 
->The [allowFiltering](../../api/gantt#allowfiltering) property should be set to `true` to enable the filter menu.
->Setting the [columns.allowFiltering](../../api/gantt/column#allowfiltering) property to `false` prevents rendering filter menu for a particular column.
-
-## Custom component in filter menu
+> To prevent the filter menu from rendering for a specific column, set [columns.allowFiltering](../../api/gantt/column#allowfiltering) to **false**.
 
-The [column.filter.ui](../../api/gantt/column#filter) is used to add custom filter components to a particular column.
+## Custom control in filter menu
 
-To implement custom filter ui, define the following functions:
+You can customize the filter menu in the Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## Gantt Chart control using the `column.filter.ui` property. This allows you to replace the default filter controls with custom components such as dropdowns or textboxes for specific columns. By default, the Gantt uses AutoComplete for string columns, NumericTextBox for number columns, DatePicker for date columns, DropDownList for boolean columns, and DateTimePicker for datetime columns.
 
-* `create`:  Creates custom component.
-* `write`: Wire events for custom component.
-* `read`: Read the filter value from custom component.
+The `column.filter.ui` property supports three essential functions:
 
-In the following sample, dropdown is used  as custom component in the TaskName column.
+1. `create`- Initializes and renders the custom filter control inside the filter menu.
+2. `write`- Populates the control with the current filter value and attaches any necessary event handlers. 
+3. `read` - Retrieves the selected value from the control and applies the filter to the column.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/initialLoadFiltering-cs3/index.ts %}
 {% endhighlight %}
@@ -80,4 +77,118 @@ In the following sample, dropdown is used  as custom component in the TaskName c
 {% endtabs %}
 
 {% previewsample "page.domainurl/code-snippet/gantt/initialLoadFiltering-cs3" %}
+{% endif %}
+
+## Hide default filter icon while perform filtering through method
+
+To hide the default filter icon from the UI when filtering is performed programmatically, apply the following CSS: 
+ 
+```css
+.e-filtermenudiv.e-icons.e-icon-filter {
+      display: none;
+    }
+```
+
+You can perform filtering programmatically by checking if `args.currentTarget.id` equals **performFilter**, and then calling [filterByColumn](../../api/gantt#filterbycolumn) method. If the condition is not met, use [clearFiltering](../../api/gantt#clearfiltering) to reset filters via a button click.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/filter-menu-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/filter-menu-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/filter-menu-cs2" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/filter-menu-cs2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/filter-menu-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/filter-menu-cs2" %}
+{% endif %}
+
+## Customize the default input control of filter menu dialog
+
+To customize the default input components in the filter menu dialog, use the `params` property inside the column's [filter](../../api/gantt/column#filter) configuration. This allows you to override default settings such as autofill, spin buttons, and sort order. This allows you to override default settings based on the column type.
+
+You can refer to the table below for supported column types, their default components, customization examples, and API references:
+
+| Column Type | Default control                                        | Customization                            | API Reference                                                 |
+| ----------- | ------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------- |
+| String      | [AutoComplete](../../auto-complete/getting-started)    | Eg: { params: { autofill: false }}       | [AutoComplete API](../../api/auto-complete/autoCompleteModel) |
+| Number      | [NumericTextBox](../../numerictextbox/getting-started) | Eg: { params: { showSpinButton: false }} | [NumericTextBox API](../../api/numerictextbox)                |
+| Boolean     | [DropDownList](../../drop-down-list/getting-started)   | Eg: { params: { sortOrder:'Ascending'}}  | [DropDownList API](../../api/drop-down-list)                  |
+| Date        | [DatePicker](../../datepicker/getting-started)         | Eg: { params: { weekNumber: true }}      | [DatePicker API](../../api/datepicker)                        |
+| DateTime    | [DateTimePicker](../../datetimepicker/getting-started) | Eg: { params: { showClearButton: true }} | [DateTimePicker API](../../api/datetimepicker)                |
+
+The following sample demonstrates how to disable the autofill feature by setting the `autofill` property to **false** for the **TaskName** column, and how to disable the spin button by setting `showSpinButton` to **false** for the **TaskID** column.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/filter-menu-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/filter-menu-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/filter-menu-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/filter-menu-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/filter-menu-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/filter-menu-cs1" %}
+{% endif %}
+
+## Customizing filter menu operators list
+
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## Gantt Chart control allows customization of the default filter operator list using the [filterSettings.operators](../../api/gantt/filterSettings#operators) property. This allows you to define a custom set of operators shown in the filter menu for each column type, improving usability and relevance.
+
+You can configure operators for different types using the following options: 
+
+- **stringOperator** – Custom operators for string columns.  
+- **numberOperator** – Custom operators for number columns.  
+- **dateOperator** – Custom operators for date columns.  
+- **booleanOperator** – Custom operators for boolean columns.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/filter-menu-cs3/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/filter-menu-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/filter-menu-cs3" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/filter-menu-cs3/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/filter-menu-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/filter-menu-cs3" %}
 {% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/gantt/filtering/filtering.md b/ej2-javascript/gantt/filtering/filtering.md
index 7ea91413c..374a2a492 100644
--- a/ej2-javascript/gantt/filtering/filtering.md
+++ b/ej2-javascript/gantt/filtering/filtering.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Filtering in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Filtering in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Filtering in ##Platform_Name## Gantt Chart Control | Syncfusion
+description: Learn here all about filtering in Syncfusion ##Platform_Name## Gantt Chart control of Syncfusion Essential JS 2 and more.
 platform: ej2-javascript
 control: Filtering 
 publishingplatform: ##Platform_Name##
@@ -9,111 +9,117 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Filtering in ##Platform_Name## Gantt control
+# Filtering in ##Platform_Name## Gantt Chart Control
 
-Filtering allows you to view specific or related records based on filter criteria. This can be done in the Gantt control by using the filter menu support and toolbar search support. To enable filtering in the Gantt control, set the [allowFiltering](../../api/gantt#allowfiltering) to true. Menu filtering support can be configured using the [filterSettings](../../api/gantt/filterSettings) property and toolbar searching can be configured using the [searchSettings](../../api/gantt/searchSettings) property.
+Filtering allows you to view specific or related records based on defined criteria. The Gantt Chart control supports options like filter menu, Excel-like filtering, and toolbar search to narrow down visible data.
 
-To use filter, inject the [Filter](../../api/gantt#filtermodule) module into the Gantt control.
+To enable filtering, set [allowFiltering](../../api/gantt#allowfiltering) to **true** in the Gantt configuration. You can define filter options using [filterSettings](../../api/gantt/filterSettings) and configure toolbar search using [searchSettings](../../api/gantt/searchSettings) property.
 
-## Filter hierarchy modes
+To activate filtering functionality, inject the `Filter` service into the control.
 
-The Gantt supports a set of filtering modes with the [filterSettings.hierarchyMode](../../api/gantt/filterSettings#hierarchymode) property. The following are the types of filter hierarchy modes available in the Gantt control:
+> * The filtering UI is rendered based on the column type, allowing data to be filtered using appropriate operators.
+> * The filter menu is enabled by default. To disable the filtering option for a specific column, set the `allowFiltering` property of the `column` to **false**.
 
-* `Parent`: This is the default filter hierarchy mode in Gantt. The filtered records are displayed with its parent records. If the filtered records do not have any parent record, then only the filtered records will be displayed.
+## Apply initial filter on load
 
-* `Child`: Displays the filtered records with its child record. If the filtered records do not have any child record, then only the filtered records will be displayed.
-
-* `Both`: Displays the filtered records with its both parent and child records. If the filtered records do not have any parent and child records, then only the filtered records will be displayed.
-
-* `None`: Displays only the filtered records.
+To apply filtering during the initial render of the Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## Gantt Chart control, define the filter conditions using a **predicate** object within the [filterSettings.columns](../../api/gantt/filterSettings#columns) property.
 
+The following sample demonstrates how to apply an initial filter where **TaskName** starts with **Identify** and **TaskID** equals **2**, using a `Predicate` condition set to **and**.
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/filtering-cs1/index.ts %}
+{% include code-snippet/gantt/initialLoadFiltering-cs4/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/filtering-cs1/index.html %}
+{% include code-snippet/gantt/initialLoadFiltering-cs4/index.html %}
 {% endhighlight %}
 {% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/gantt/filtering-cs1" %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/initialLoadFiltering-cs4" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/filtering-cs1/index.js %}
+{% include code-snippet/gantt/initialLoadFiltering-cs4/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/filtering-cs1/index.html %}
+{% include code-snippet/gantt/initialLoadFiltering-cs4/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/gantt/filtering-cs1" %}
+{% previewsample "page.domainurl/code-snippet/gantt/initialLoadFiltering-cs4" %}
 {% endif %}
 
-## Initial filter
+## Supported filter operators
+
+Filter operators can be set using the `filterSettings.columns.operator` property to define the comparison logic for each column.
+
+The available operators and their supported data types are:
+
+| Operator           | Description                                          | Supported Types               |
+| ------------------ | ---------------------------------------------------- | ----------------------------- |
+| startswith         | Matches values beginning with the specified value.   | String                        |
+| endswith           | Matches values ending with the specified value.      | String                        |
+| contains           | Matches values that include the specified value.     | String                        |
+| equal              | Matches values exactly equal to the specified value. | String, Number, Boolean, Date |
+| notequal           | Matches values not equal to the specified value.     | String, Number, Boolean, Date |
+| greaterthan        | Matches values greater than the specified value.     | Number, Date                  |
+| greaterthanorequal | Matches values greater than or equal to the value.   | Number, Date                  |
+| lessthan           | Matches values less than the specified value.        | Number, Date                  |
+| lessthanorequal    | Matches values less than or equal to the value.      | Number, Date                  |
+
+> By default, the `filterSettings.columns.operator` value is `equal`
+
+## Hierarchy-based filtering modes
+
+The ##Platform_Name## Gantt Chart control supports multiple filtering modes, which can be configured using the [filterSettings.hierarchyMode](../../api/gantt/filterSettings#hierarchymode) property. The available modes are:
+
+- **Parent**: This is the default mode. Filtered records are displayed along with their parent records. If no parent exists, only the filtered records are shown.
+
+- **Child**: Displays filtered records along with their child records. If no child exists, only the filtered records are shown.
 
-To apply the filter at initial rendering, set the filter to `predicate` object in the [filterSettings.columns](../../api/gantt/filterSettings#columns) property.
+- **Both**: Displays filtered records along with both parent and child records. If neither exists, only the filtered records are shown.
+
+- **None**: Displays only the filtered records without any parent or child context.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/initialLoadFiltering-cs4/index.ts %}
+{% include code-snippet/gantt/filtering-cs1/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/initialLoadFiltering-cs4/index.html %}
+{% include code-snippet/gantt/filtering-cs1/index.html %}
 {% endhighlight %}
 {% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/gantt/initialLoadFiltering-cs4" %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/filtering-cs1" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/initialLoadFiltering-cs4/index.js %}
+{% include code-snippet/gantt/filtering-cs1/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/initialLoadFiltering-cs4/index.html %}
+{% include code-snippet/gantt/filtering-cs1/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/gantt/initialLoadFiltering-cs4" %}
+{% previewsample "page.domainurl/code-snippet/gantt/filtering-cs1" %}
 {% endif %}
 
-## Filter operators
-
-The filter operator for a column can be defined in the `filterSettings.columns.operator` property.
-
-The available operators and its supported data types are:
-
-Operator |Description |Supported Types
------|-----|-----
-startswith |Checks whether the value begins with the specified value. |String
-endswith |Checks whether the value ends with the specified value. |String
-contains |Checks whether the value contains the specified value. |String
-equal |Checks whether the value is equal to the specified value. |String &#124; Number &#124; Boolean &#124; Date
-notequal |Checks for the values that are not equal to the specified value. |String &#124; Number &#124; Boolean &#124; Date
-greaterthan |Checks whether the value is greater than the specified value. |Number &#124; Date
-greaterthanorequal|Checks whether the value is greater than or equal to the specified value. |Number &#124; Date
-lessthan |Checks whether the value is less than the specified value. |Number &#124; Date
-lessthanorequal |Checks whether the value is less than or equal to the specified value. |Number &#124; Date
-
-> By default, the `filterSettings.columns.operator` value is `equal`
-
-## Diacritics
+## Enable diacritic-sensitive filtering
 
-By default, the Gantt control ignores the diacritic characters while filtering. To include diacritic characters, set the [filterSettings.ignoreAccent](../../api/gantt/filterSettings#ignoreaccent) to true.
+By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## Gantt Chart control ignores diacritic characters during filtering. To enable filtering with diacritic sensitivity, set the [filterSettings.ignoreAccent](../../api/gantt/filterSettings#ignoreaccent) property to **true**.
 
-In the following sample, type **Perform** in the **TaskName** column to filter diacritic characters.
+The following sample demonstrates this behavior: when filtering the **TaskName** column, entries containing diacritic characters (e.g., �Pr�ject�, �Proj�ct�) will be matched if you enter the base text **Project**.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/diacriticsFilter-cs1/index.ts %}
 {% endhighlight %}
@@ -121,7 +127,7 @@ In the following sample, type **Perform** in the **TaskName** column to filter d
 {% include code-snippet/gantt/diacriticsFilter-cs1/index.html %}
 {% endhighlight %}
 {% endtabs %}
-        
+
 {% previewsample "page.domainurl/code-snippet/gantt/diacriticsFilter-cs1" %}
 
 {% elsif page.publishingplatform == "javascript" %}
@@ -138,13 +144,15 @@ In the following sample, type **Perform** in the **TaskName** column to filter d
 {% previewsample "page.domainurl/code-snippet/gantt/diacriticsFilter-cs1" %}
 {% endif %}
 
-## Filtering a specific column by method
+## Programmatic filtering using method
+
+You can apply dynamic filtering in the Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## Gantt by using the [filterByColumn](../../api/gantt#filterbycolumn) method. This enables programmatic filtering without relying on UI interactions.
 
-You can filter the columns dynamically by using the [filterByColumn](../../api/gantt#filterbycolumn) method.
+The following sample demonstrates how to filter the **TaskName** and **TaskID** columns using single and multiple values. The filtering is triggered through an external button click by calling the `filterByColumn` method.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/filterByColumn-cs1/index.ts %}
 {% endhighlight %}
@@ -152,7 +160,7 @@ You can filter the columns dynamically by using the [filterByColumn](../../api/g
 {% include code-snippet/gantt/filterByColumn-cs1/index.html %}
 {% endhighlight %}
 {% endtabs %}
-        
+
 {% previewsample "page.domainurl/code-snippet/gantt/filterByColumn-cs1" %}
 
 {% elsif page.publishingplatform == "javascript" %}
@@ -169,14 +177,13 @@ You can filter the columns dynamically by using the [filterByColumn](../../api/g
 {% previewsample "page.domainurl/code-snippet/gantt/filterByColumn-cs1" %}
 {% endif %}
 
-## Clear filtered columns
+## Clear all applied filters
 
-You can clear all the filtering condition done in the Gantt control by using the [clearFiltering](../../api/gantt#clearfiltering) method.
-The following code snippet explains the above behavior.
+You can clear all the filtering conditions applied in the Gantt Chart contol by using the [clearFiltering](../../api/gantt#clearfiltering) method.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/clearFilter-cs1/index.ts %}
 {% endhighlight %}
@@ -184,7 +191,7 @@ The following code snippet explains the above behavior.
 {% include code-snippet/gantt/clearFilter-cs1/index.html %}
 {% endhighlight %}
 {% endtabs %}
-        
+
 {% previewsample "page.domainurl/code-snippet/gantt/clearFilter-cs1" %}
 
 {% elsif page.publishingplatform == "javascript" %}
@@ -199,4 +206,72 @@ The following code snippet explains the above behavior.
 {% endtabs %}
 
 {% previewsample "page.domainurl/code-snippet/gantt/clearFilter-cs1" %}
+{% endif %}
+
+## Set different filter types per column
+
+You can enable different filter types for individual columns in the Gantt Chart control by setting the `column.filter.type` property.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/filtering-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/filtering-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/filtering-cs2" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/filtering-cs2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/filtering-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/filtering-cs2" %}
+{% endif %}
+
+## Customize filtering behavior using events
+
+You can customize the filtering behavior in the  Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## Gantt using the [actionBegin](../../documentation/gantt/events#actionbegin) and [actionComplete](../../gantt/events#actioncomplete) events. These events allow you to inject custom logic at different stages of the filtering workflow.
+
+The following sample demonstrates how to handle different filtering stages using `args.requestType`:
+  
+- For **filterBeforeOpen**, customize filter operators based on `args.columnType` (number or string).  
+- For **filtering**, cancel the action if `args.currentFilteringColumn` is **StartDate**.  
+- For **filterAfterOpen**, apply background styling to the filter dialog content and footer.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/filter-events-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/filter-events-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/filter-events-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/filter-events-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/filter-events-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/filter-events-cs1" %}
 {% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/gantt/filtering/searching.md b/ej2-javascript/gantt/filtering/searching.md
index 76901526a..ba48b8e70 100644
--- a/ej2-javascript/gantt/filtering/searching.md
+++ b/ej2-javascript/gantt/filtering/searching.md
@@ -9,15 +9,15 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Searching in ##Platform_Name## Gantt control
+# Searching in ##Platform_Name## Gantt Chart Control
 
-You can search records in the Gantt control by using the [search](../../api/gantt#search) method with search key as a parameter. The Gantt control provides an option to integrate the search text box in the toolbar by adding the search item to the [toolbar](../../api/gantt#toolbar) property.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## Gantt Chart control allows quick filtering of records based on search input, improving access to relevant data in large datasets.
 
-To search records, inject the `Filter` module into the Gantt control.
+To enable search functionality, include the **Search** item in the [toolbar](../../api/gantt#toolbar) configuration and inject both `Filter` service and `Toolbar` service into the control's `providers` array.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/searching-cs1/index.ts %}
 {% endhighlight %}
@@ -44,11 +44,23 @@ To search records, inject the `Filter` module into the Gantt control.
 
 ## Initial search
 
-In the Gantt control, you can load a task with some search criteria and this can be done by using the [searchSettings](../../api/gantt/searchSettings) property. To apply search at initial rendering, set the value for [fields](../../api/gantt/searchSettings#fields), [operator](../../api/gantt/searchSettings#operator), [key](../../api/gantt/searchSettings#key), and [ignoreCase](../../api/gantt/searchSettings#ignorecase) in the [searchSettings](../../api/gantt/searchSettings) property.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## Gantt control allows applying search criteria during initial load using the [searchSettings](../../api/gantt/searchsettings) property.  
+
+To configure this feature, define the following properties:
+
+| Property       | Description                                                   |
+| -------------- | ------------------------------------------------------------- |
+| `fields`       | Defines the fields where the search should be applied.        |
+| `operator`     | Sets the condition for matching (e.g., `contains`, `equals`). |
+| `key`          | Specifies the value to search for.                            |
+| `ignoreCase`   | Determines if the search should be case-insensitive.          |
+| `ignoreAccent` | Ignores diacritic characters or accents during the search.    |
+
+The following sample demonstrates an initial search where `fields` is set to **TaskName**, `operator` is **contains**, `key` is **Pr�duct**, with `ignoreCase` set to **true** and `ignoreAccent` set to **true** (e.g., typing "product" will match "Pr�duct").
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/searching-cs2/index.ts %}
 {% endhighlight %}
@@ -77,19 +89,19 @@ In the Gantt control, you can load a task with some search criteria and this can
 
 ## Search operators
 
-The search operator can be defined in the [searchSettings.operator](../../api/gantt/searchSettings#operator) property to configure specific searching.
+Search operators specify the type of comparison used during a search. These are configured through the [searchSettings.operator](../../api/gantt/searchSettings#operator) property.
 
 The following operators are supported in searching:
 
-Operator |Description
------|-----
-startsWith |Checks whether a value begins with the specified value.
-endsWith |Checks whether a value ends with the specified value.
-contains |Checks whether a value contains the specified value.
-equal |Checks whether a value is equal to the specified value.
-notEqual |Checks for the values that are not equal to the specified value.
+| Operator   | Description                                           |
+| ---------- | ----------------------------------------------------- |
+| startsWith | Matches values that begin with the specified text.    |
+| endsWith   | Matches values that end with the specified text.      |
+| contains   | Matches values that include the specified text.       |
+| equal      | Matches values that exactly match the specified text. |
+| notEqual   | Matches values that do not match the specified text.  |
 
-> By default, the [searchSettings.operator](../../api/gantt/searchSettings#operator) value is `contains`.
+> The default value for `searchSettings.operator` is `contains`.
 
 ## Search by external button
 
@@ -97,7 +109,7 @@ To search the Gantt records from an external button, invoke the [search](../../a
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/externalSearch-cs1/index.ts %}
 {% endhighlight %}
@@ -122,15 +134,17 @@ To search the Gantt records from an external button, invoke the [search](../../a
 {% previewsample "page.domainurl/code-snippet/gantt/externalSearch-cs1" %}
 {% endif %}
 
->Note: You should set the [allowFiltering](../../api/gantt#allowfiltering) property to `true` for searching the content externally.
+> You should set the [allowFiltering](../../api/gantt#allowfiltering) property to **true** for searching the content externally.
 
 ## Search specific columns
 
-By default, the Gantt control searches all the columns. You can search specific columns by defining the specific column's field names in the [searchSettings.fields](../../api/gantt/searchSettings#fields) property.
+To search specific columns in the Gantt Chart control, use the [searchSettings.fields](../../api/gantt/searchSettings#fields) property. This allows you to define which column fields should be included in the search, instead of searching across all columns by default.
+
+This following sample demonstrates searching only within the **TaskName** and **Duration** columns.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/searching-cs3/index.ts %}
 {% endhighlight %}
@@ -155,15 +169,15 @@ By default, the Gantt control searches all the columns. You can search specific
 {% previewsample "page.domainurl/code-snippet/gantt/searching-cs3" %}
 {% endif %}
 
-> In above sample, you can search only **TaskName** and **Duration** column values.
-
 ## Clear search by external button
 
-You can set [searchSettings.key](../../api/gantt/searchSettings#key) property as `empty` string, to clear the searched Gantt records from external button.
+To clear the search results in the Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## Gantt from an external button, set the [searchSettings.key](../../api/gantt/searchSettings#key) property to an empty string. 
+ 
+Alternatively, you can invoke the [search](../../api/gantt#search) method with an empty string to reset the search.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/clear-search-cs1/index.ts %}
 {% endhighlight %}
@@ -186,4 +200,69 @@ You can set [searchSettings.key](../../api/gantt/searchSettings#key) property as
 {% endtabs %}
 
 {% previewsample "page.domainurl/code-snippet/gantt/clear-search-cs1" %}
+{% endif %}
+
+## Search on each key stroke
+
+You can enable instant filtering in the Syncfusion<sup style="font-size:70%">&reg;</sup> Gantt Chart control by calling the [search](../../api/gantt#search) method on each `keyup` event.  This can be configured within the component�s [created](../../gantt/events#created) event.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/searching-cs4/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/searching-cs4/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/searching-cs4" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/searching-cs4/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/searching-cs4/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/searching-cs4" %}
+
+{% endif %}
+
+## Highlight the search text
+
+The Syncfusion<sup style="font-size:70%">&reg;</sup> ##Platform_Name## Gantt Chart control supports highlighting matched search text within grid cells to improve visibility of search results. 
+
+This can be achieved using the [queryCellInfo](../../api/gantt#querycellinfo) event, which is triggered during cell rendering. Within this event, check if the cell belongs to the target column, retrieve the cell value and search keyword, and use the `includes` method to detect matches. If a match is found, wrap the matched text in a `<span>` with a custom CSS class for styling.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/searching-cs5/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/searching-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/searching-cs5" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/searching-cs5/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/searching-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/searching-cs5" %}
 {% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/gantt/global-local.md b/ej2-javascript/gantt/global-local.md
index d3003dcbb..e8d55a246 100644
--- a/ej2-javascript/gantt/global-local.md
+++ b/ej2-javascript/gantt/global-local.md
@@ -1,131 +1,322 @@
 ---
 layout: post
-title: Global local in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Global local in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Globalization and Localization in ##Platform_Name## Gantt Chart Component | Syncfusion
+description: Learn here all about globalization and localization in Syncfusion ##Platform_Name## Gantt Chart control of Syncfusion Essential JS 2 and more.
 platform: ej2-javascript
-control: Global local 
+control: Globalization and Localization 
 publishingplatform: ##Platform_Name##
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Global local in ##Platform_Name## Gantt control
-
-## Localization
-
-The [Localization](../common/localization) library allows you to localize default text content of the Gantt. The Gantt component has static text on some features (like toolbar area text, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the
-[locale](../api/gantt#locale) value and translation object.
-
-The following list of properties and its values are used in the Gantt.
-
-Locale key words |Text
------|-----
-emptyRecord |No records to display
-id |ID
-name |Name
-startDate |Start Date
-endDate |End Date
-duration |Duration
-progress |Progress
-dependency |Dependency
-notes |Notes
-baselineStartDate| Baseline Start Date
-baselineEndDate| Baseline End Date
-type| Type
-offset | Offset
-resourceName | Resources
-resourceID | Resource ID
-day | day
-hour | hour
-minute | minute
-days | days
-hours | hours
-minutes | minutes
-generalTab | General
-customTab | Custom Columns
-writeNotes | Write Notes
-addDialogTitle | New Task
-editDialogTitle | Task Information
-add | Add
-edit | Edit
-update | Update
-delete | Delete
-cancel | Cancel
-search | Search
-task | task
-tasks | tasks
-zoomIn | Zoom in
-zoomOut | Zoom out
-zoomToFit | Zoom to fit
-expandAll | Expand all
-collapseAll | Collapse all
-nextTimeSpan | Next timespan
-prevTimeSpan | Previous timespan
-saveButton | Save
-taskBeforePredecessor_FS | You moved "{0}" to start before "{1}" finishes and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
-taskAfterPredecessor_FS | You moved "{0}" away from "{1}" and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
-taskBeforePredecessor_SS | You moved "{0}" to start before "{1}" starts and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
-taskAfterPredecessor_SS | You moved "{0}" to start after "{1}" starts and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
-taskBeforePredecessor_FF | You moved "{0}" to finish before "{1}" finishes and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
-taskAfterPredecessor_FF | You moved "{0}" to finish after "{1}" finishes and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
-taskBeforePredecessor_SF | You moved "{0}" away from "{1}" to starts and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
-taskAfterPredecessor_SF | You moved "{0}" to finish after "{1}" starts and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
-okText | Ok
-confirmDelete | Are you sure you want to Delete Record?
-from | From
-to | To
-taskLink | Task Link
-lag | Lag
-start | Start
-finish | Finish
-enterValue | Enter the value
-taskInformation | Task Information
-deleteTask | Delete Task
-deleteDependency | Delete Dependency
-convert | Convert
-save | Save
-above | Above
-below | Below
-child | Child
-milestone | Milestone
-toTask | To Task
-toMilestone | To Milestone
-eventMarkers | Event markers
-leftTaskLabel | Left task label
-rightTaskLabel | Right task label
-timelineCell | Timeline cell
-confirmPredecessorDelete | Are you sure you want to remove dependency link?
-taskMode | Task Mode
-changeScheduleMode | Change Schedule Mode
-subTasksStartDate | SubTasks Start Date
-subTasksEndDate | SubTasks End Date
-scheduleStartDate | Schedule Start Date
-scheduleEndDate | Schedule End Date
-auto | Auto
-manual | Manual
-zoomToFit | Zoom to fit
-excelExport | Excel export
-csvExport | CSV export
-pdfExport | Pdf export
-unit | Unit
-work | Work
-taskType | Task Type
-unassignedTask | Unassigned Task
-group | Group
-FF | FF
-FS | FS
-SF | SF
-SS | SS
-
-### Loading translations
-
-To load translation object in an application use [load](https://ej2.syncfusion.com/documentation/api/base/l10n#load) function of [L10n](https://ej2.syncfusion.com/documentation/api/base/l10n) class.
-
-The below example demonstrates the Gantt in **Deutsch** culture.
+# Globalization and Localization in ##Platform_Name## Gantt Chart Control
+
+The ##Platform_Name## Gantt Chart control supports globalization to adapt project management interfaces to diverse languages, cultures, and regional preferences without code changes. Globalization encompasses localization for translating text elements like column headers and dialog titles, internationalization for formatting dates, numbers, and times in timelines and task fields, and Right-to-Left (RTL) support for languages like Arabic and Hebrew. These features ensure that task names, toolbar actions, and timeline displays align with users’ linguistic and cultural expectations, enhancing accessibility and usability in project management workflows for global users.
+
+## Key globalization features
+
+Globalization encompasses several critical components:
+
+- **Localization (L10N)**: Translating text content and adapting UI elements for specific cultures and languages
+- **Internationalization (I18N)**: Formatting dates, numbers, currencies, and other culture-specific data according to regional conventions
+- **Right-to-Left (RTL) Support**: Adapting layout and text direction for RTL languages like Arabic, Hebrew, and Urdu
+
+Implement globalization when targeting multilingual users, complying with regional standards, or expanding to international markets.
+
+## Localization implementation
+
+The [Localization](../common/localization) library allows you to localize default text content of the Gantt Chart control. Static text elements such as column headers, dialog titles, tooltips, toolbar items, and system messages can be translated to different languages by defining the [locale](../../api/gantt#locale) value and providing translation objects.
+
+1. **Import required libraries**:
+    {% if page.publishingplatform == "typescript" %}
+    ```typescript
+    import { L10n, setCulture } from '@syncfusion/ej2-base';
+    ```
+    {% elsif page.publishingplatform == "javascript" %}
+
+        ```js
+        ej.base.L10n.load({
+            'de-DE': {
+                'gantt': {
+                    "id": "Kennung",
+                    "name": "Name",
+                    "startDate": "Anfangsdatum",
+                    "duration": "Dauer",
+                    "progress": "Fortschritt"
+                }
+            }
+        });
+        ```
+    {% endif %}
+
+1. **Define translation objects** for your target languages with complete locale coverage
+
+2. **Load translations** using the `L10n.load()` method before component initialization
+
+3. **Set the locale property** on the Gantt Chart control to match your target culture
+
+4. **Configure culture settings** using `setCulture()` for number and date formatting
+
+### Localization keys
+
+The following tables organize all available locale keys by functional category:
+
+**Core task properties:**
+
+| Locale Key   | Default Text |
+| ------------ | ------------ |
+| id           | ID           |
+| name         | Name         |
+| startDate    | Start Date   |
+| endDate      | End Date     |
+| duration     | Duration     |
+| progress     | Progress     |
+| dependency   | Dependency   |
+| notes        | Notes        |
+| resourceName | Resources    |
+| resourceID   | Resource ID  |
+
+**Data rendering**
+
+| Locale Key           | Default Text                                                                                                       |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| EmptyRecord          | No records to display                                                                                              |
+| EmptyDataSourceError | DataSource must not be empty at initial load since columns are generated from dataSource in auto-generated columns |
+
+**Columns**
+
+| Locale Key    | Default Text     |
+| ------------- | ---------------- |
+| True          | true             |
+| False         | false            |
+| ColumnHeader  | column header    |
+| TemplateCell  | is template cell |
+| ClipBoard     | clipboard        |
+| CheckBoxLabel | checkbox         |
+
+**Filtering:**
+
+| Locale Key                  | Default Text                       |
+| --------------------------- | ---------------------------------- |
+| InvalidFilterMessage        | Invalid Filter Data                |
+| FilterbarTitle              | \s filter bar cell                 |
+| Matchs                      | No Matches Found                   |
+| FilterButton                | Filter                             |
+| ClearButton                 | Clear                              |
+| StartsWith                  | Starts With                        |
+| EndsWith                    | Ends With                          |
+| Contains                    | Contains                           |
+| Equal                       | Equal                              |
+| NotEqual                    | Not Equal                          |
+| LessThan                    | Less Than                          |
+| LessThanOrEqual             | Less Than Or Equal                 |
+| GreaterThan                 | Greater Than                       |
+| GreaterThanOrEqual          | Greater Than Or Equal              |
+| ChooseDate                  | Choose a Date                      |
+| SelectAll                   | Select All                         |
+| FilterTrue                  | True                               |
+| FilterFalse                 | False                              |
+| NoResult                    | No Matches Found                   |
+| ClearFilter                 | Clear Filter                       |
+| NumberFilter                | Number Filters                     |
+| TextFilter                  | Text Filters                       |
+| DateFilter                  | Date Filters                       |
+| DateTimeFilter              | DateTime Filters                   |
+| MatchCase                   | Match Case                         |
+| Between                     | Between                            |
+| CustomFilter                | Custom Filter                      |
+| CustomFilterPlaceHolder     | Enter the value                    |
+| CustomFilterDatePlaceHolder | Choose a date                      |
+| AND                         | AND                                |
+| OR                          | OR                                 |
+| NotStartsWith               | Does Not Start With                |
+| NotEndsWith                 | Does Not End With                  |
+| NotContains                 | Does Not Contain                   |
+| IsNull                      | Null                               |
+| NotNull                     | Not Null                           |
+| IsEmpty                     | Empty                              |
+| IsNotEmpty                  | Not Empty                          |
+| FilterDescription           | Press Alt Down to open filter Menu |
+
+**Sorting**
+
+| Locale Key      | Default Text        |
+| --------------- | ------------------- |
+| SortDescription | Press Enter to sort |
+
+**ColumnMenu:**
+
+| Locale Key            | Default Text                       |
+| --------------------- | ---------------------------------- |
+| FilterMenu            | Filter                             |
+| AutoFitAll            | Autofit all columns                |
+| AutoFit               | Autofit this column                |
+| ColumnMenuDialogARIA  | Column menu dialog                 |
+| ColumnMenuDescription | Press Alt Down to open Column Menu |
+
+**Baseline and planning:**
+
+| Locale Key        | Default Text        |
+| ----------------- | ------------------- |
+| baselineStartDate | Baseline Start Date |
+| baselineEndDate   | Baseline End Date   |
+| type              | Type                |
+| offset            | Offset              |
+| taskMode          | Task Mode           |
+| auto              | Auto                |
+| manual            | Manual              |
+
+**Time units and measurements:**
+
+| Locale Key | Default Text |
+| ---------- | ------------ |
+| day        | day          |
+| hour       | hour         |
+| minute     | minute       |
+| days       | days         |
+| hours      | hours        |
+| minutes    | minutes      |
+| unit       | Unit         |
+| work       | Work         |
+
+**Dialog and form elements:**
+
+| Locale Key      | Default Text     |
+| --------------- | ---------------- |
+| addDialogTitle  | New Task         |
+| editDialogTitle | Task Information |
+| taskInformation | Task Information |
+| generalTab      | General          |
+| customTab       | Custom Columns   |
+| writeNotes      | Write Notes      |
+
+**Action buttons and operations:**
+
+| Locale Key | Default Text |
+| ---------- | ------------ |
+| add        | Add          |
+| edit       | Edit         |
+| update     | Update       |
+| delete     | Delete       |
+| cancel     | Cancel       |
+| save       | Save         |
+| saveButton | Save         |
+| okText     | OK           |
+| search     | Search       |
+
+**Toolbar and navigation:**
+
+| Locale Key   | Default Text      |
+| ------------ | ----------------- |
+| zoomIn       | Zoom in           |
+| zoomOut      | Zoom out          |
+| zoomToFit    | Zoom to fit       |
+| expandAll    | Expand all        |
+| collapseAll  | Collapse all      |
+| nextTimeSpan | Next timespan     |
+| prevTimeSpan | Previous timespan |
+
+**Context menu operations:**
+
+| Locale Key       | Default Text         |
+| ---------------- | -------------------- |
+| deleteTask       | Delete Task          |
+| deleteDependency | Delete Dependency    |
+| convert          | Convert              |
+| above            | Above                |
+| below            | Below                |
+| child            | Child                |
+| milestone        | Milestone            |
+| toTask           | To Task              |
+| toMilestone      | To Milestone         |
+| autoFitAll       | Auto Fit all columns |
+| autoFit          | Auto Fit this column |
+| SortAscending    | Sort Ascending       |
+| SortDescending   | Sort Descending      |
+
+**Export and data operations:**
+
+| Locale Key  | Default Text |
+| ----------- | ------------ |
+| excelExport | Excel export |
+| csvExport   | CSV export   |
+| pdfExport   | PDF export   |
+
+**System messages and feedback:**
+
+| Locale Key               | Default Text                                     |
+| ------------------------ | ------------------------------------------------ |
+| emptyRecord              | No records to display                            |
+| confirmDelete            | Are you sure you want to Delete Record?          |
+| confirmPredecessorDelete | Are you sure you want to remove dependency link? |
+| enterValue               | Enter the value                                  |
+
+**Task relationships and dependencies:**
+
+| Locale Key | Default Text |
+| ---------- | ------------ |
+| taskLink   | Task Link    |
+| lag        | Lag          |
+| start      | Start        |
+| finish     | Finish       |
+| from       | From         |
+| to         | To           |
+| FF         | FF           |
+| FS         | FS           |
+| SF         | SF           |
+| SS         | SS           |
+
+**Specialized features:**
+
+| Locale Key     | Default Text     |
+| -------------- | ---------------- |
+| eventMarkers   | Event markers    |
+| leftTaskLabel  | Left task label  |
+| rightTaskLabel | Right task label |
+| timelineCell   | Timeline cell    |
+| taskType       | Task Type        |
+| unassignedTask | Unassigned Task  |
+| group          | Group            |
+
+**Task count and status:**
+
+| Locale Key | Default Text |
+| ---------- | ------------ |
+| task       | task         |
+| tasks      | tasks        |
+
+**Schedule mode and planning:**
+
+| Locale Key         | Default Text         |
+| ------------------ | -------------------- |
+| changeScheduleMode | Change Schedule Mode |
+| subTasksStartDate  | SubTasks Start Date  |
+| subTasksEndDate    | SubTasks End Date    |
+| scheduleStartDate  | Schedule Start Date  |
+| scheduleEndDate    | Schedule End Date    |
+
+**Advanced dependency relationship messages:**
+
+The Gantt Chart control includes specialized messages for dependency conflicts:
+
+| Locale Key               | Purpose                                                              |
+| ------------------------ | -------------------------------------------------------------------- |
+| taskBeforePredecessor_FS | Finish-to-Start conflict when task moves before predecessor finishes |
+| taskAfterPredecessor_FS  | Finish-to-Start conflict when task moves away from predecessor       |
+| taskBeforePredecessor_SS | Start-to-Start conflict when task starts before predecessor          |
+| taskAfterPredecessor_SS  | Start-to-Start conflict when task starts after predecessor           |
+| taskBeforePredecessor_FF | Finish-to-Finish conflict when task finishes before predecessor      |
+| taskAfterPredecessor_FF  | Finish-to-Finish conflict when task finishes after predecessor       |
+| taskBeforePredecessor_SF | Start-to-Finish conflict messages                                    |
+| taskAfterPredecessor_SF  | Start-to-Finish conflict messages                                    |
+
+### Loading translations for de culture
+
+The following example demonstrates comprehensive German (Deutsch) localization:
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/global-cs1/index.ts %}
 {% endhighlight %}
@@ -150,13 +341,22 @@ The below example demonstrates the Gantt in **Deutsch** culture.
 {% previewsample "page.domainurl/code-snippet/gantt/global-cs1" %}
 {% endif %}
 
-## Internationalization
+## Internationalization (I18N)
+
+The [Internationalization](../common/internationalization) library globalizes number, date, and time values in the Gantt Chart control. This ensures that dates, numbers, and currencies display according to the user's cultural preferences and regional conventions.
+
+Internationalization affects multiple aspects of the Gantt Chart control:
 
-The [Internationalization](../common/internationalization) library is used to globalize number, date, and time values in gantt component.
+- **Date formatting**: Timeline headers, task dates, date pickers, and calendar displays
+- **Number formatting**: Duration values, progress percentages, and numeric inputs
+- **Time formatting**: Time-based calculations, working hours, and time displays  
+- **Currency formatting**: Cost-related fields and budget calculations
+- **Calendar systems**: Support for different calendar systems (Gregorian, Islamic, etc.)
+- **Week numbering**: ISO week numbers, fiscal year calendars
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/global-cs2/index.ts %}
 {% endhighlight %}
@@ -181,16 +381,24 @@ The [Internationalization](../common/internationalization) library is used to gl
 {% previewsample "page.domainurl/code-snippet/gantt/global-cs2" %}
 {% endif %}
 
-> * In the above sample, `Timeline` is formatted by `NumberFormatOptions` and `DateFormatOptions`.
-> * By default, [locale](../api/gantt#locale) value is `en-US`. If you want to change `en-US` culture, then set the [locale](../api/gantt#locale).
+> **Note**: In the above sample, timeline headers and numeric values are formatted using `NumberFormatOptions` and `DateFormatOptions`. The [locale](../../api/gantt#locale) property defaults to **en-US**. Change this property to your desired locale for proper cultural formatting.
+
+## Right-to-Left (RTL) support
+
+RTL support enables the Gantt Chart control to adapt its text direction and layout for languages that read from right to left, such as Arabic (العربية), Hebrew (עברית), and Urdu (اردو). This provides an authentic user experience for RTL language users.
+
+RTL layout affects multiple aspects of the user interface:
 
-## Right to left (RTL)
+- **Reading direction**: Content flows from right to left
+- **UI mirroring**: Interface elements mirror horizontally
+- **Icon orientation**: Directional icons need appropriate orientation
+- **Data presentation**: Maintains logical data relationships while adapting visual presentation
 
-RTL provides an option to switch the text direction and layout of the Gantt component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Urdu, etc.). To enable RTL Gantt, set the [enableRtl](../api/gantt#enablertl) to true.
+To enable RTL support, set the [enableRtl](../../api/gantt#enablertl) property to **true**:
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/global-cs3/index.ts %}
 {% endhighlight %}
@@ -215,7 +423,30 @@ RTL provides an option to switch the text direction and layout of the Gantt comp
 {% previewsample "page.domainurl/code-snippet/gantt/global-cs3" %}
 {% endif %}
 
-## See Also
+The code sets `enableRtl` to **true** and `locale` to **ar**, mirroring the Gantt interface. Test RTL layouts with native speakers to ensure usability, especially for taskbar interactions and dialog navigation. Review custom CSS for RTL compatibility and verify directional icons (e.g., arrows) render correctly.
+
+## Troubleshooting globalization issues
+
+1. **Missing or incomplete translations:**
+**Issue**: Some UI elements display in default language despite locale configuration
+**Solutions**:
+- Verify all locale keys are included in translation objects
+- Check that `L10n.load()` is called before component initialization
+- Ensure locale property matches loaded translation keys
+- Validate translation object structure and syntax
+
+2. **Encoding and character display issues:**
+**Issue**: Special characters or non-Latin scripts don't display correctly
+**Solutions**:
+- Verify proper UTF-8 encoding in translation files
+- Check font support for target languages
+- Ensure HTML document declares correct charset
+- Test with appropriate fonts for target scripts
 
-* [Internationalization](../common/internationalization)
-* [Localization](../common/localization)
+3. **Date and number formatting problems:**
+**Issue**: Dates or numbers don't format according to locale
+**Solutions**:
+- Load appropriate CLDR data for target cultures
+- Call `setCulture()` before component initialization
+- Verify date format patterns match locale expectations
+- Check timezone and calendar system configuration
\ No newline at end of file
diff --git a/ej2-javascript/gantt/holidays.md b/ej2-javascript/gantt/holidays.md
index 003280bd1..941856eaa 100644
--- a/ej2-javascript/gantt/holidays.md
+++ b/ej2-javascript/gantt/holidays.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Holidays in ##Platform_Name## Gantt control | Syncfusion
+title: Holidays in ##Platform_Name## Gantt Control | Syncfusion
 description: Learn here all about Holidays in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
 platform: ej2-javascript
 control: Holidays 
@@ -9,22 +9,37 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Holidays in ##Platform_Name## Gantt control
+# Holidays in ##Platform_Name## Gantt Control
 
-Non-working days in a project can be displayed in the Gantt control using the [holidays](../api/gantt#holidays) property. Each holiday can be defined with the following properties:
+The ##Platform_Name## Gantt Chart control supports holidays to define non-working days, such as national holidays or company closures, that impact task scheduling and project timelines. Holidays override regular working time settings like [workWeek](../../api/gantt#workweek) or [includeWeekend](../../api/gantt#includeweekend), ensuring tasks do not progress during these periods. In the timeline, holidays appear as highlighted backgrounds with descriptive labels, creating visible gaps in taskbars to reflect scheduling adjustments. Custom CSS classes allow distinct styling for different holiday types (e.g., national vs. company holidays), enhancing visual clarity. Properly configured holidays ensure accurate duration calculations, dependency adjustments, and critical path analysis, aligning project timelines with resource availability and regional requirements.
 
-* [from](../api/gantt/holiday#from): Defines start date of the holiday(s).
-* [to](../api/gantt/holiday#to): Defines end date of the holiday(s).
-* [label](../api/gantt/holiday#label): Defines the description or label for the holiday.
-* [cssClass](../api/gantt/holiday#cssclass): Formats the holidays label in the Gantt chart.
+## Understanding holiday effects on tasks
 
-To highlight the holidays, inject the [DayMarkers](../api/gantt#daymarkersmodule) module into the Gantt control.
+Holidays adjust task scheduling to reflect non-working periods:
 
-The following code example shows how to display the non-working days in the Gantt control.
+- **Duration adjustments**: Task durations exclude holidays, extending end dates. For example, a task starting December 20, 2024, skips a December 25-26 holiday, adjusting its completion to account for these days.
+- **Dependency management**: Successor tasks shift to maintain relationships (e.g., FS), ensuring no work occurs during holidays.
+- **Critical path integration**: Holidays impact slack calculations when using [enableCriticalPath](../../api/gantt#enablecriticalpath), as tasks delayed by holidays may become critical.
+- **Resource allocation**: Holidays reduce resource availability, pausing task progress during these periods.
+
+The [projectStartDate](../../api/gantt#projectstartdate) and [projectEndDate](../../api/gantt#projectenddate) properties provide context for scheduling, ensuring holidays align with the project timeline.
+
+## Configure holidays
+
+Holidays are defined using the [holidays](../../api/gantt#holidays) property, which accepts an array of holiday objects specifying dates, labels, and styling. The `DayMarkersService` must be injected to render holidays as visual markers in the timeline and adjust task scheduling calculations. Holidays take precedence over settings like `workWeek` or `includeWeekend`, ensuring tasks do not progress during these periods.
+
+**Holiday configuration properties**
+
+- `from`: Sets the start date of the holiday (e.g., `new Date('2024-12-25')`).
+- `to`: Defines the end date for multi-day holidays (optional for single-day holidays).
+- `label`: Provides a descriptive name (e.g., “Christmas Day”) displayed in the timeline.
+- `cssClass`: Applies custom CSS classes for styling holiday appearances.
+
+The following example configures single and multi-day holidays:
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/holidays-cs1/index.ts %}
 {% endhighlight %}
@@ -47,4 +62,62 @@ The following code example shows how to display the non-working days in the Gant
 {% endtabs %}
 
 {% previewsample "page.domainurl/code-snippet/gantt/holidays-cs1" %}
-{% endif %}
\ No newline at end of file
+{% endif %}
+
+The code defines holidays like Christmas (December 25) and a multi-day New Year break, rendering them as highlighted periods in the timeline.
+
+## Customize holiday appearance
+
+Customize holiday visuals using the `cssClass` property to apply distinct styles for different holiday types, such as national or company-specific closures:
+
+```css
+.national-holiday {
+    background-color: #ffebee;
+    border-left: 3px solid #f44336;
+}
+.national-holiday .e-gantt-holiday-label {
+    color: #d32f2f;
+    font-weight: bold;
+    background-color: #ffcdd2;
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+.company-holiday {
+    background-color: #e3f2fd;
+    border-left: 3px solid #2196f3;
+}
+.company-holiday .e-gantt-holiday-label {
+    color: #1976d2;
+    font-style: italic;
+    background-color: #bbdefb;
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+```
+
+For multi-day holidays, specify both `from` and `to` dates:
+
+```typescript
+holidays: [
+    {
+        from: new Date('2024-12-24'),
+        to: new Date('2024-12-26'),
+        label: 'Christmas Break',
+        cssClass: 'national-holiday'
+    },
+    {
+        from: new Date('2024-01-01'),
+        to: new Date('2024-01-02'),
+        label: 'New Year Holiday',
+        cssClass: 'company-holiday'
+    }
+]
+```
+
+This code styles holidays with distinct colors and labels, enhancing timeline readability.
+
+## See Also
+- [How to configure event markers?](../../gantt/event-markers)
+- [How to manage task dependencies?](../../gantt/task-dependency)
+- [How to enable critical path analysis?](../../gantt/critical-path)
\ No newline at end of file
diff --git a/ej2-javascript/gantt/how-to/change-schedule-date.md b/ej2-javascript/gantt/how-to/change-schedule-date.md
index 9f21809f4..f95b30093 100644
--- a/ej2-javascript/gantt/how-to/change-schedule-date.md
+++ b/ej2-javascript/gantt/how-to/change-schedule-date.md
@@ -1,21 +1,21 @@
 ---
 layout: post
 title: Change schedule date in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Change schedule date in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+description: Learn how to programmatically update project schedule dates in the Syncfusion ##Platform_Name## Gantt Chart control to adjust timelines and task schedules efficiently.
 platform: ej2-javascript
-control: Change schedule date 
+control: Schedule dates
 publishingplatform: ##Platform_Name##
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Change schedule date in ##Platform_Name## Gantt control
+# Update Project Schedule Dates in ##Platform_Name## Gantt Chart Control
 
-In the Gantt control, you can change the schedule start and end dates by clicking the custom button programmatically using the [updateProjectDates](../../api/gantt#updateprojectdates) method. You can pass the start and end dates as method arguments to the [updateProjectDates](../../api/gantt#updateprojectdates) method. You can also pass the Boolean value as an additional parameter, which is used to round-off the schedule start and end dates displayed in Gantt timeline.
+The [updateProjectDates](../../api/gantt#updateprojectdates) method in the ##Platform_Name## Gantt Chart control enables programmatic adjustment of the project's start and end dates, seamlessly updating the timeline and task positions for efficient schedule management. By passing valid `Date` objects for the start and end dates, you can shift the entire project timeline, such as moving a project forward by a month to accommodate delays. An optional Boolean `roundOff` parameter, when set to **true**, aligns dates to the timeline's unit (e.g., days or weeks), ensuring a clean and consistent display. Ensure the Gantt has a defined `dataSource` and [timelineSettings](../../api/gantt#timelinesettings) to render the updated schedule accurately. Use valid date formats and leverage the `roundOff` option to optimize timeline rendering for clarity.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/how-to-changescheduledates-cs1/index.ts %}
 {% endhighlight %}
@@ -38,4 +38,4 @@ In the Gantt control, you can change the schedule start and end dates by clickin
 {% endtabs %}
 
 {% previewsample "page.domainurl/code-snippet/gantt/how-to-changescheduledates-cs1" %}
-{% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/gantt/how-to/copy-paste-records.md b/ej2-javascript/gantt/how-to/copy-paste-records.md
index c3f10bb58..6d31c2826 100644
--- a/ej2-javascript/gantt/how-to/copy-paste-records.md
+++ b/ej2-javascript/gantt/how-to/copy-paste-records.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Copy paste records in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Copy paste records in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Copy and Paste Records in ##Platform_Name## Gantt Control | Syncfusion
+description: Learn how to programmatically copy and paste records in the Syncfusion ##Platform_Name## Gantt Chart control using context menus for efficient task duplication.
 platform: ej2-javascript
 control: Copy paste records 
 publishingplatform: ##Platform_Name##
@@ -9,13 +9,13 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Copy paste records in ##Platform_Name## Gantt control
+# Copy and Paste Records in ##Platform_Name## Gantt Chart Control
 
-You can copy and paste a record in the Gantt chart by using the `addRecord` method and `custom context menu`. It is also possible to copy and paste the parent record with multiple hierarchical child records on the required position.
+The copy and paste functionality in the ##Platform_Name## Gantt Chart control enables efficient task duplication, allowing you to replicate tasks or entire task hierarchies using the [addRecord](../../api/gantt#addrecord) method and a custom context menu configured via [contextMenuItems](../../api/gantt#contextmenuitems). For example, right-clicking a parent task to copy and paste it with its child tasks at a specified position streamlines project management workflows. Inject `Edit` and enable `editSettings.allowAdding` to support adding copied records. Define valid [taskFields](../../api/gantt#taskfields) mappings (e.g., id, name, startDate) to ensure task data is correctly replicated, including hierarchical structures with child tasks. Use the [contextMenuClick](../../api/gantt#contextmenuclick) event to handle custom copy-paste actions, specifying the paste position (e.g., child, above, below) via `addRecord` parameters. This feature integrates with dependencies, critical path, and virtual scrolling, ensuring duplicated tasks align with the project structure for seamless schedule management.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/copypasterecords-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/how-to/custom-field.md b/ej2-javascript/gantt/how-to/custom-field.md
index 4bc7ae70c..53f21d63f 100644
--- a/ej2-javascript/gantt/how-to/custom-field.md
+++ b/ej2-javascript/gantt/how-to/custom-field.md
@@ -1,21 +1,21 @@
 ---
 layout: post
-title: Custom field in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Custom field in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Configure Custom Fields in ##Platform_Name##  Gantt Chart Control | Syncfusion
+description: Learn how to configure custom fields in the Syncfusion ##Platform_Name##  Gantt Chart control's add/edit dialogs for enhanced task data management.
 platform: ej2-javascript
-control: Custom field 
+control: Custom fields
 publishingplatform: ##Platform_Name##
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Custom field in ##Platform_Name## Gantt control
+# Configure custom fields in ##Platform_Name## Gantt Chart Control
 
-Generally in Gantt, Custom fields are displayed in the Custom Tab of the Add/Edit dialogs. However, they can be included in the General Tab of Add/Edit Dialog Box using `actionBegin` and `actionComplete` events. These events are used to append the custom field to the dialog box. The following code snippets demonstrate the solution.
+The ##Platform_Name## Gantt Chart control allows you to enhance task data management by adding custom fields to the add/edit dialogs, seamlessly integrating them into the General tab using the [actionBegin](../../api/gantt#actionbegin) and [actionComplete](../../api/gantt#actioncomplete) events. For example, adding a priority dropdown to the General tab enables users to assign task priorities during creation or editing. Inject `Edit` and enable `editSettings.allowAdding` and `editSettings.allowEditing` to support dialog modifications. Configure valid [taskFields](../../api/gantt#taskfields) mappings or custom data properties (e.g., priority) to persist custom field values in the data source. Use `actionBegin` to define custom field properties (e.g., textbox, dropdown) before the dialog opens, and `actionComplete` to handle field data after user input. This feature supports various field types, such as dropdowns or numerics, and integrates with task scheduling, dependencies, and critical path, ensuring custom fields align with project workflows. Ensure the dialog module is configured to render custom fields accurately, enhancing flexibility in task management.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/customfield-cs1/index.ts %}
 {% endhighlight %}
@@ -38,4 +38,9 @@ Generally in Gantt, Custom fields are displayed in the Custom Tab of the Add/Edi
 {% endtabs %}
 
 {% previewsample "page.domainurl/code-snippet/gantt/customfield-cs1" %}
-{% endif %}
\ No newline at end of file
+{% endif %}
+
+## See also
+- [How to configure add/edit dialogs?](../../gantt/managing-tasks/managing-tasks#customize-control-in-addedit-dialog)
+- [How to manage task dependencies?](../../gantt/task-dependency)
+- [How to configure critical path?](../../gantt/critical-path)
\ No newline at end of file
diff --git a/ej2-javascript/gantt/how-to/drag-and-drop.md b/ej2-javascript/gantt/how-to/drag-and-drop.md
deleted file mode 100644
index 7ad49a47f..000000000
--- a/ej2-javascript/gantt/how-to/drag-and-drop.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-layout: post
-title: Drag and drop in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Drag and drop in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Drag and drop 
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Drag and drop in ##Platform_Name## Gantt control
-
-In Gantt, it is possible to drag a record from another component and drop it in Gantt chart with updating the Gantt record. Here, dragging an item from `TreeView` component to Gantt and that item is updated as a resource for the Gantt record, we can achieve this, by using [nodeDragStop](../../api/treeview#nodedragstop) event of `TreeView` control.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/gantt/how-to-draganddrop-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/how-to-draganddrop-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/gantt/how-to-draganddrop-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/gantt/how-to-draganddrop-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/gantt/how-to-draganddrop-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/gantt/how-to-draganddrop-cs1" %}
-{% endif %}
-
-The following screenshot shows dropping record from another component in to Gantt, and **Rose Fuller** is added as resource for the task **Develop floor plan estimation**.
-
-![Dropping Record](../images/dropping.png)
\ No newline at end of file
diff --git a/ej2-javascript/gantt/how-to/maintain-record-index.md b/ej2-javascript/gantt/how-to/maintain-record-index.md
index 4b93db6d5..1d7b9a761 100644
--- a/ej2-javascript/gantt/how-to/maintain-record-index.md
+++ b/ej2-javascript/gantt/how-to/maintain-record-index.md
@@ -1,20 +1,19 @@
 ---
 layout: post
-title: Maintain record index in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Maintain record index in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Maintain Record Index Position in ##Platform_Name## Gantt Chart Control | Syncfusion
+description: Learn how to maintain record index positions in the Syncfusion ##Platform_Name## Gantt Chart control using row drag-and-drop for efficient task reordering.
 platform: ej2-javascript
-control: Maintain record index 
+control: Copy paste records 
 publishingplatform: ##Platform_Name##
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Maintain record index in ##Platform_Name## Gantt control
+# Maintain Record Index Position in ##Platform_Name## Gantt Chart Control
 
-Row dropped record's index position can be maintained in the Gantt chart by changing the database table index position using the `rowDrop` event. In this event, the `fromIndex` and `dropIndex` values can be passed to the server side using Ajax request. On the server side, the `insert` and `insertAtTop` methods are used to update the row index position. The following code snippets explain the solution.
+The ##Platform_Name## Gantt Chart control enables seamless task reordering by maintaining record index positions through the [rowDrop](../../api/gantt#rowdrop) event, which updates the task order in the data source when a row is dragged and dropped. For example, dragging a task from row 5 to row 2 updates the data source to reflect the new position, preserving project structure. Inject `RowDD` and enable `allowRowDragAndDrop` to activate this feature. Use the `rowDrop` event to capture `fromIndex` (source row), `dropIndex` (target row), and `dropPosition` and send them to the server via an Ajax request using `DataManager` with `UrlAdaptor`. On the server side, update the data source (e.g., database) with custom methods like `Insert` or `InsertAtTop`, ensuring hierarchical records with parent-child relationships are correctly handled by updating `parentID` in the task data. Configure valid [taskFields](../../api/gantt#taskfields) mappings (e.g., id, child) to support hierarchical tasks. This feature integrates with task dependencies, critical path, and virtual scrolling, ensuring reordered tasks align with the project timeline for efficient schedule management.
 
 ```ts
-
 import { Gantt, Selection, Edit, RowDD, IGanttData } from '../src/index';
 import { Ajax } from '@syncfusion/ej2-base';
 Gantt.Inject(Selection, Edit, RowDD );
@@ -59,11 +58,9 @@ let gantt: Gantt = new Gantt({
 });
 
 gantt.appendTo('#ganttContainer');
-
 ```
 
 ```ts
-
 public IActionResult RowDropMethod([FromBody]DragDropData value)
         {
             var data = new CRUDModel();
@@ -126,5 +123,9 @@ public IActionResult RowDropMethod([FromBody]DragDropData value)
             copyRecord = false;
             return Json(new { updatedRecords = value.record });
         }
+```
 
-```
\ No newline at end of file
+## See also
+- [How to configure row drag and drop?](../../gantt/rows/drag-and-drop)
+- [How to manage task dependencies?](../../gantt/taskdependency)
+- [How to configure critical path?](../../gantt/critical-path)
\ No newline at end of file
diff --git a/ej2-javascript/gantt/how-to/maintain-zoom-to-fit.md b/ej2-javascript/gantt/how-to/maintain-zoom-to-fit.md
index 78bd98675..be1c21e13 100644
--- a/ej2-javascript/gantt/how-to/maintain-zoom-to-fit.md
+++ b/ej2-javascript/gantt/how-to/maintain-zoom-to-fit.md
@@ -1,25 +1,22 @@
 ---
 layout: post
-title: Maintain zoom to fit in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Maintain zoom to fit in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Maintain Zoom-to-fit in ##Platform_Name## Gantt Chart Control | Syncfusion
+description: Learn how to maintain zoom-to-fit functionality in the Syncfusion ##Platform_Name## Gantt Chart control during editing and dynamic data source changes.
 platform: ej2-javascript
-control: Maintain zoom to fit 
-publishingplatform: ##Platform_Name##
+control: Zoom to fit
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Maintain zoom to fit in ##Platform_Name## Gantt control
+# Maintain Zoom-to-fit in ##Platform_Name## Gantt Chart Control
 
-In the Gantt control, While performing edit actions or dynamically change dataSource, the timeline gets refreshed. When zoomToFit toolbar item is clicked and perform editing actions or dynamically change dataSource, the timeline gets refreshed. So that, the timeline will not fit to the project any more.
+The zoom-to-fit functionality in the ##Platform_Name## Gantt Chart control ensures the entire project timeline fits within the viewport, providing an optimal view of all tasks. When using the `zoomToFit` toolbar item, editing actions (e.g., cell edit, dialog edit, taskbar edit) or dynamic `dataSource` changes can cause the timeline to refresh, potentially losing the zoomed view. By leveraging the [fitToProject](../../api/gantt#fittoproject) method, you can maintain the zoom-to-fit state seamlessly. For editing actions, call `fitToProject` in the [actionComplete](../../gantt/events#actioncomplete) and [taskbarEdited](../../gantt/events#taskbaredited) events to reapply zoom-to-fit after modifications like updating task durations or dependencies. For dynamic `dataSource` changes, such as adding or removing tasks, invoke `fitToProject` in the [dataBound](../../gantt/events#databound) event to adjust the timeline automatically. Ensure `Toolbar` is injected and `toolbar` includes `zoomToFit` to enable this feature, with valid [timelineSettings](../../api/gantt#timelinesettings) configured for accurate rendering. This approach maintains a consistent project overview, integrating with task scheduling, dependencies, and critical path for efficient project management.
 
-## Maintain zoomToFit after edit actions
-
-We can maintain `zoomToFit` after editing actions(cell edit,dialog edit,taskbar edit) by using [fitToProject](../../api/gantt#fittoproject) method in `actionComplete` and `taskbarEdited` event.
+The following example demonstrates how to use `fitToProject` after performing edit actions:
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/how-to-maintainzoomtofit-cs1/index.ts %}
 {% endhighlight %}
@@ -44,13 +41,11 @@ We can maintain `zoomToFit` after editing actions(cell edit,dialog edit,taskbar
 {% previewsample "page.domainurl/code-snippet/gantt/how-to-maintainzoomtofit-cs1" %}
 {% endif %}
 
-## Maintain zoomToFit after change dataSource dynamically
-
-We can maintain `zoomToFit` after change dataSource dynamically, by calling [fitToProject](../../api/gantt#fittoproject) method in dataBound event.
+The following example demonstrates how to use `fitToProject` after dynamically changing the data source:
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1/index.ts %}
 {% endhighlight %}
@@ -73,4 +68,9 @@ We can maintain `zoomToFit` after change dataSource dynamically, by calling [fit
 {% endtabs %}
 
 {% previewsample "page.domainurl/code-snippet/gantt/how-to-maintainzoomtofitdatasource-cs1" %}
-{% endif %}
\ No newline at end of file
+{% endif %}
+
+## See also
+- [How to configure timeline settings?](../../gantt/timeline)
+- [How to configure toolbar?](../../gantt/toolbar)
+- [How to manage task editing?](../../gantt/managing-tasks/editing-tasks)
\ No newline at end of file
diff --git a/ej2-javascript/gantt/how-to/new-row-position.md b/ej2-javascript/gantt/how-to/new-row-position.md
index 63362350b..4afd844b6 100644
--- a/ej2-javascript/gantt/how-to/new-row-position.md
+++ b/ej2-javascript/gantt/how-to/new-row-position.md
@@ -9,7 +9,7 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# New row position in ##Platform_Name## Gantt control
+# New Row Position in ##Platform_Name## Gantt Chart Control
 
 In Gantt, a new row can be added in one of the following positions: Top, Bottom, Above, Below and Child. This position can be specified through the `newRowPostion` property. We can make use of the toolbarClick event to create a context menu that specifies the position in which the new row is to be added when adding a record through toolbar click.
 
@@ -17,7 +17,7 @@ The following code snippets demonstrate how to achieve this.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/newrowposition-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/how-to/open-add-edit-dialog.md b/ej2-javascript/gantt/how-to/open-add-edit-dialog.md
index d70c4eb0a..fdfb76b21 100644
--- a/ej2-javascript/gantt/how-to/open-add-edit-dialog.md
+++ b/ej2-javascript/gantt/how-to/open-add-edit-dialog.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Open add edit dialog in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Open add edit dialog in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Open Add and Edit Dialogs in ##Platform_Name## Gantt Control | Syncfusion
+description: Learn how to open add and edit dialogs programmatically in the Syncfusion ##Platform_Name## Gantt Chart control for efficient task creation and modification.
 platform: ej2-javascript
 control: Open add edit dialog 
 publishingplatform: ##Platform_Name##
@@ -9,13 +9,15 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Open add edit dialog in ##Platform_Name## Gantt control
+# Open Add and Edit Dialogs in ##Platform_Name## Gantt Chart Control
 
-Gantt add and edit dialogs can be opened dynamically by using [openAddDialog](../../api/gantt#openadddialog) and [openEditDialog](../../api/gantt#openeditdialog) methods. The following code example shows how to open add and dialog on separate button click actions.
+The add and edit dialogs in the ##Platform_Name## Gantt Chart control enable efficient task creation and modification, streamlining project management workflows. The [openAddDialog](../../api/gantt#openadddialog) method opens a dialog to add a new task, populating fields like id, name, or startDate based on [taskFields](../../api/gantt#taskfields) mappings. The [openEditDialog](../../api/gantt#openeditdialog) method opens a dialog to modify the currently selected task, ideal for updating task details like duration or dependencies. For example, clicking a button to open the add dialog allows users to create a new task, while selecting a task and opening the edit dialog enables quick updates. These dialogs, requiring `EditService` injection and `editSettings.allowAdding` and `editSettings.allowEditing` enabled, integrate with resources, dependencies, and critical path calculations, supporting validation and events like `actionBegin` for customized workflows. To use `openEditDialog` effectively, select a row through user interaction or by setting [selectedRowIndex](../../api/gantt#selectedrowindex), ensuring the dialog opens with the correct task data. Configure valid `taskFields` mappings to ensure dialog fields display and save data accurately, and enhance dialogs with custom fields using events like `actionBegin` or `actionComplete` for tailored workflows.
+
+The following code example shows how to open add and dialog on separate button click actions.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/openEditAddDialog-cs1/index.ts %}
 {% endhighlight %}
@@ -40,4 +42,7 @@ Gantt add and edit dialogs can be opened dynamically by using [openAddDialog](..
 {% previewsample "page.domainurl/code-snippet/gantt/openEditAddDialog-cs1" %}
 {% endif %}
 
->NOTE: We should select any one of the row in Gantt to open the edit dialog.
\ No newline at end of file
+## See also
+- [How to configure task editing?](../../gantt/managing-tasks/task-bar-editing)
+- [How to manage task dependencies?](../../gantt/task-dependency)
+- [How to configure critical path?](../../gantt/critical-path)
\ No newline at end of file
diff --git a/ej2-javascript/gantt/how-to/render-timeline-from-1-to-365-days.md b/ej2-javascript/gantt/how-to/render-timeline-from-1-to-365-days.md
index 2fb14f70a..0fd90b335 100644
--- a/ej2-javascript/gantt/how-to/render-timeline-from-1-to-365-days.md
+++ b/ej2-javascript/gantt/how-to/render-timeline-from-1-to-365-days.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Timeline from 1 to 365 days in ##Platform_Name## Gantt | Syncfusion
+title: Timeline From 1 to 365 days in ##Platform_Name## Gantt | Syncfusion
 description: Learn here all about Render timeline from 1 to 365 days in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
 platform: ej2-javascript
 control: Render timeline from 1 to 365 days 
@@ -9,7 +9,7 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Render timeline from 1 to 365 days in ##Platform_Name## Gantt control
+# Render Timeline From 1 to 365 Days in ##Platform_Name## Gantt Control
 
 Gantt chart contains different types of in-built timeline view modes and it can be defined by using [timelineViewMode](../../api/gantt/timelineViewMode) property and also we can customize the timescale mode of top tier and bottom tier by using [topTier.unit](../../api/gantt/timelineTierSettingsModel#unit) and [bottomTier.unit](../../api/gantt/timelineTierSettingsModel#unit) properties. Timeline tier’s unit can be defined by using [unit](../../api/gantt/timelineTierSettings#unit) property and  [format](../../api/gantt/timelineTierSettings#format) property was used to define date format of timeline cell and [formatter](../../api/gantt/timelineTierSettings#formatter) property was used to define custom method to format the date value of timeline cell.
 
@@ -17,7 +17,7 @@ In the [bottomTier.unit](../../api/gantt/timelineTierSettingsModel#unit) timesca
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/render-timeline-from-1-to-365-days-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/how-to/set-scroll-top.md b/ej2-javascript/gantt/how-to/set-scroll-top.md
new file mode 100644
index 000000000..4ff00b6fa
--- /dev/null
+++ b/ej2-javascript/gantt/how-to/set-scroll-top.md
@@ -0,0 +1,41 @@
+---
+layout: post
+title: Set Vertical Scroll Position in ##Platform_Name## Gantt Chart Control | Syncfusion
+description: Learn how to programmatically set the vertical scroll position in the Syncfusion ##Platform_Name## Gantt Chart control for efficient navigation in large project datasets.
+platform: ej2-javascript
+control: Open add edit dialog 
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Set Vertical Scroll Position in ##Platform_Name## Gantt Chart Control
+
+The [setScrollTop](../../api/gantt#setscrolltop) method in the ##Platform_Name## Gantt Chart control enables programmatic control of the vertical scroll position, allowing efficient navigation to specific tasks in large project datasets. By specifying a numeric pixel value (e.g., `100` for 100px), you can scroll the grid portion of the Gantt (task rows) to focus on a desired task or area. For example, clicking a button to scroll to a task at row 50 enhances user experience in projects with thousands of tasks. Ensure the Gantt has a defined `dataSource` and `height` (e.g., "600px") to calculate the scrollable content area accurately. Use pixel-based scroll values to position the viewport precisely, with the maximum scroll limited by the total content height, which varies with dataset size or when [enableVirtualization](../../api/gantt#enablevirtualization) is enabled for optimized performance. This method integrates seamlessly with virtual scrolling and row selection (via [selectedRowIndex](../../api/gantt#selectedrowindex)), making it ideal for automating navigation, such as scrolling to a newly added task or a selected task, enhancing project management workflows.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/scroll-top-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/scroll-top-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/scroll-top-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/scroll-top-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/scroll-top-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/scroll-top-cs1" %}
+{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/gantt/immutable.md b/ej2-javascript/gantt/immutable.md
index 6e1f85fcc..123cb2ac1 100644
--- a/ej2-javascript/gantt/immutable.md
+++ b/ej2-javascript/gantt/immutable.md
@@ -19,7 +19,7 @@ To enable this feature, you have to set the [enableImmutableMode](../api/gantt#e
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/immutable-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/labels.md b/ej2-javascript/gantt/labels.md
index 70d8df574..445693126 100644
--- a/ej2-javascript/gantt/labels.md
+++ b/ej2-javascript/gantt/labels.md
@@ -15,7 +15,7 @@ The Gantt control maps any data source fields to task labels using the [labelSet
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/tasklabels-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/loading-animation.md b/ej2-javascript/gantt/loading-animation.md
index 79cae8c2f..69ed397d4 100644
--- a/ej2-javascript/gantt/loading-animation.md
+++ b/ej2-javascript/gantt/loading-animation.md
@@ -17,7 +17,7 @@ In the following sample, the Shimmer indicator is displayed while the gantt is s
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/loading-animation-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/managing-tasks/adding-new-tasks.md b/ej2-javascript/gantt/managing-tasks/adding-new-tasks.md
index 2e734b748..71e0a3e59 100644
--- a/ej2-javascript/gantt/managing-tasks/adding-new-tasks.md
+++ b/ej2-javascript/gantt/managing-tasks/adding-new-tasks.md
@@ -19,7 +19,7 @@ A row can be added to the Gantt component from the toolbar while the [editSettin
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/rows-cs1/index.ts %}
 {% endhighlight %}
@@ -89,7 +89,7 @@ You can add rows to the Gantt control dynamically using the [addRecord](../../ap
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/addRow-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/managing-tasks/deleting-tasks.md b/ej2-javascript/gantt/managing-tasks/deleting-tasks.md
index 07f8df6dd..866026b53 100644
--- a/ej2-javascript/gantt/managing-tasks/deleting-tasks.md
+++ b/ej2-javascript/gantt/managing-tasks/deleting-tasks.md
@@ -15,7 +15,7 @@ A task delete option in the Gantt control can be enabled by enabling the [ediSet
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/deleteRecord-cs1/index.ts %}
 {% endhighlight %}
@@ -51,7 +51,7 @@ The following code snippet explains how to enable the delete confirmation messag
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/editing-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/managing-tasks/editing-tasks.md b/ej2-javascript/gantt/managing-tasks/editing-tasks.md
index 00f85cda9..939e98a1b 100644
--- a/ej2-javascript/gantt/managing-tasks/editing-tasks.md
+++ b/ej2-javascript/gantt/managing-tasks/editing-tasks.md
@@ -29,7 +29,7 @@ The following code example shows you how to enable the cell editing in Gantt con
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/getting-started-cs10/index.ts %}
 {% endhighlight %}
@@ -62,7 +62,7 @@ Modify the task details through the edit dialog by setting the edit [mode](../..
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/getting-started-cs11/index.ts %}
 {% endhighlight %}
@@ -95,7 +95,7 @@ In the Gantt dialog, you can define the required tabs or editing sections using
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/editing-cs2/index.ts %}
 {% endhighlight %}
@@ -128,7 +128,7 @@ In the Gantt dialog, you can make only specific data source fields visible for e
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/editing-cs3/index.ts %}
 {% endhighlight %}
@@ -167,7 +167,7 @@ The following code example demonstrates how to enable task dependency editing in
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/editing-cs6/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/managing-tasks/in-dent-and-out-dent.md b/ej2-javascript/gantt/managing-tasks/in-dent-and-out-dent.md
index 7a16ec2b0..31917cbe8 100644
--- a/ej2-javascript/gantt/managing-tasks/in-dent-and-out-dent.md
+++ b/ej2-javascript/gantt/managing-tasks/in-dent-and-out-dent.md
@@ -19,7 +19,7 @@ Indent and Outdent of a task are used to update the level of task in the hierarc
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/indent-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/managing-tasks/managing-tasks.md b/ej2-javascript/gantt/managing-tasks/managing-tasks.md
index c5b10ebed..9d67bf67d 100644
--- a/ej2-javascript/gantt/managing-tasks/managing-tasks.md
+++ b/ej2-javascript/gantt/managing-tasks/managing-tasks.md
@@ -17,7 +17,7 @@ To use CRUD, inject the [Edit](../../api/gantt#editmodule) module into the Gantt
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/getting-started-cs12/index.ts %}
 {% endhighlight %}
@@ -63,17 +63,17 @@ Also, you can customize the behavior of the editor component through the [column
 
 The following table describes cell edit type component and their corresponding edit params of the column.
 
-Edit Type |Component |Example
------|-----|-----
-`numericedit` | [NumericTextBox](https://ej2.syncfusion.com/javascript/documentation/numerictextbox) | params: { decimals: 2, value: 5 }
-`dropdownedit` | [DropDownList](https://ej2.syncfusion.com/javascript/documentation/drop-down-list) | params: { value: 'Germany' }
-`booleanedit` | [Checkbox](https://ej2.syncfusion.com/javascript/documentation/check-box) | params: { checked: true}
-`datepickeredit` | [DatePicker](https://ej2.syncfusion.com/javascript/documentation/datepicker) | params: { format:'dd.MM.yyyy' }
-`datetimepickeredit` | [DateTimePicker](https://ej2.syncfusion.com/javascript/documentation/datetimepicker) | params: { value: new Date() }
+| Edit Type            | Component                                                                            | Example                           |
+| -------------------- | ------------------------------------------------------------------------------------ | --------------------------------- |
+| `numericedit`        | [NumericTextBox](https://ej2.syncfusion.com/javascript/documentation/numerictextbox) | params: { decimals: 2, value: 5 } |
+| `dropdownedit`       | [DropDownList](https://ej2.syncfusion.com/javascript/documentation/drop-down-list)   | params: { value: 'Germany' }      |
+| `booleanedit`        | [Checkbox](https://ej2.syncfusion.com/javascript/documentation/check-box)            | params: { checked: true}          |
+| `datepickeredit`     | [DatePicker](https://ej2.syncfusion.com/javascript/documentation/datepicker)         | params: { format:'dd.MM.yyyy' }   |
+| `datetimepickeredit` | [DateTimePicker](https://ej2.syncfusion.com/javascript/documentation/datetimepicker) | params: { value: new Date() }     |
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/managingTasks-cs2/index.ts %}
 {% endhighlight %}
@@ -112,7 +112,7 @@ The cell edit template is used to create a custom component for a particular col
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/managingTasks-cs3/index.ts %}
 {% endhighlight %}
@@ -145,7 +145,7 @@ In the following demo, editing is disabled for the `TaskName` column.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/managingTasks-cs4/index.ts %}
 {% endhighlight %}
@@ -176,7 +176,7 @@ In Gantt, all create, update, delete operations can be disabled by set `readOnly
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/editing-cs4/index.ts %}
 {% endhighlight %}
@@ -211,7 +211,7 @@ You can set default values when new task dialog opens using [actionBegin](../../
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/rows-cs2/index.ts %}
 {% endhighlight %}
@@ -250,7 +250,7 @@ In the below sample, `General` tab is customized using the `fields` property. Th
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/rows-cs14/index.ts %}
 {% endhighlight %}
@@ -351,11 +351,11 @@ The Gantt control editing actions can be achieved using the double tap and tap a
 
 The following table describes different types of editing modes available in Gantt.
 
-Action |Description
------|-----
-[Cell editing](managing-tasks#cell-editing) | To perform `double tap` on a specific cell, initiate the cell to be in edit state.
-[Dialog editing](managing-tasks#dialog-editing) | To perform `double tap` on a specific row, initiate the edit dialog to be opened.
-[Taskbar editing](managing-tasks#taskbar-editing) | Taskbar editing action is initiated using the `tap` action on the taskbar. <br> **Parent taskbar** : Once you tap on the parent taskbar, it will be changed to editing state. Perform only dragging action on parent taskbar editing. <br> 
+| Action                                            | Description                                                                                                                                                                                                                                |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [Cell editing](managing-tasks#cell-editing)       | To perform `double tap` on a specific cell, initiate the cell to be in edit state.                                                                                                                                                         |
+| [Dialog editing](managing-tasks#dialog-editing)   | To perform `double tap` on a specific row, initiate the edit dialog to be opened.                                                                                                                                                          |
+| [Taskbar editing](managing-tasks#taskbar-editing) | Taskbar editing action is initiated using the `tap` action on the taskbar. <br> **Parent taskbar** : Once you tap on the parent taskbar, it will be changed to editing state. Perform only dragging action on parent taskbar editing. <br> |
 ![Alt text](../images/editing-parent.PNG) <br> **Child taskbar** : Once you tap the child taskbar, it will be changed to editing state. <br>
 ![Alt text](../images/editing-state.PNG) <br> **Dragging taskbar** : To drag a taskbar to the left or right in editing state. <br> <br> **Resizing taskbar** : To resize a taskbar, drag the left/right resize icon. <br> <br> **Progress resizing** : To change the progress, drag the progress resize icon to the left or right direction.
 
@@ -367,16 +367,16 @@ The following table explains the taskbar state in dependency edit mode.
 
 ![Taskbar states](../images/taskbar-states.png)
 
-Taskbar state |Description
------|-----
-`Parent taskbar` | You cannot create dependency relationship to parent tasks. <br> ![Parent taskbar](../images/parent-taskbar.PNG)
-`Taskbar without dependency` |  If you tap a valid child taskbar, it will create `FS` type dependency line between tasks, otherwise exits from task dependency edit mode. <br> ![Valid taskbar](../images/valid-taskbar.PNG)
-`Taskbar with dependency` | If you tap the second taskbar, which has already been directly connected, it will ask to remove it. <br> ![Invalid taskbar](../images/invalid-taskbar.PNG)
-`Removing dependency` | Once you tap the taskbar with direct dependency, then confirmation dialog will be shown for removing dependency. <br> ![Confirm dialog](../images/confirm-dialog.PNG)
+| Taskbar state                | Description                                                                                                                                                                                  |
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Parent taskbar`             | You cannot create dependency relationship to parent tasks. <br> ![Parent taskbar](../images/parent-taskbar.PNG)                                                                              |
+| `Taskbar without dependency` | If you tap a valid child taskbar, it will create `FS` type dependency line between tasks, otherwise exits from task dependency edit mode. <br> ![Valid taskbar](../images/valid-taskbar.PNG) |
+| `Taskbar with dependency`    | If you tap the second taskbar, which has already been directly connected, it will ask to remove it. <br> ![Invalid taskbar](../images/invalid-taskbar.PNG)                                   |
+| `Removing dependency`        | Once you tap the taskbar with direct dependency, then confirmation dialog will be shown for removing dependency. <br> ![Confirm dialog](../images/confirm-dialog.PNG)                        |
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/touch-cs1/index.ts %}
 {% endhighlight %}
@@ -409,7 +409,7 @@ The taskbar editing tooltip can be customized using the [tooltipSettings.editing
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/editingTooltip-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/managing-tasks/splitting-and-merging-tasks.md b/ej2-javascript/gantt/managing-tasks/splitting-and-merging-tasks.md
index 36713b6fd..e428c9c3a 100644
--- a/ej2-javascript/gantt/managing-tasks/splitting-and-merging-tasks.md
+++ b/ej2-javascript/gantt/managing-tasks/splitting-and-merging-tasks.md
@@ -29,7 +29,7 @@ The task can be splitted dynamically, either by using the context menu or dialog
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/split-task-cs5/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/managing-tasks/task-bar-editing.md b/ej2-javascript/gantt/managing-tasks/task-bar-editing.md
index d5f0b8bb2..f476ea20f 100644
--- a/ej2-javascript/gantt/managing-tasks/task-bar-editing.md
+++ b/ej2-javascript/gantt/managing-tasks/task-bar-editing.md
@@ -17,7 +17,7 @@ Modify the task details through user interaction such as resizing and dragging t
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/getting-started-cs13/index.ts %}
 {% endhighlight %}
@@ -48,7 +48,7 @@ On taskbar edit action, the [taskbarEditing](../../api/gantt#taskbarediting) eve
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/editing-cs5/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/managing-tasks/validation.md b/ej2-javascript/gantt/managing-tasks/validation.md
index 87b179117..c668df4e3 100644
--- a/ej2-javascript/gantt/managing-tasks/validation.md
+++ b/ej2-javascript/gantt/managing-tasks/validation.md
@@ -18,7 +18,7 @@ Gantt uses [Form Validator](https://ej2.syncfusion.com/documentation/form-valida
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/getting-started-cs24/index.ts %}
 {% endhighlight %}
@@ -51,7 +51,7 @@ In the below demo, custom validation applied for `TaskName` column.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/getting-started-cs25/index.ts %}
 {% endhighlight %}
@@ -83,7 +83,7 @@ Within the actionBegin event, validationRules can be configured for columns in t
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/getting-started-cs26/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/multi-taskbar.md b/ej2-javascript/gantt/multi-taskbar.md
index b012ca1e6..57a541d7c 100644
--- a/ej2-javascript/gantt/multi-taskbar.md
+++ b/ej2-javascript/gantt/multi-taskbar.md
@@ -23,7 +23,7 @@ When a resource has multiple tasks scheduled on the same date, then the tasks wi
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/resource-view-cs3/index.ts %}
 {% endhighlight %}
@@ -58,7 +58,7 @@ It's important to note that when `allowTaskbarOverlap` is disabled, task depende
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/resource-view-taskbaroverlap-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/pdf-export/customize-pdf-export.md b/ej2-javascript/gantt/pdf-export/customize-pdf-export.md
index c34a4fe15..f7b6d4209 100644
--- a/ej2-javascript/gantt/pdf-export/customize-pdf-export.md
+++ b/ej2-javascript/gantt/pdf-export/customize-pdf-export.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Customize PDF exporting in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Customize PDF exporting in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Customize PDF Exporting in ##Platform_Name## Gantt Chart | Syncfusion
+description: Learn here all about customize PDF exporting in Syncfusion ##Platform_Name## Gantt Chart control of Syncfusion Essential JS 2 and more.
 platform: ej2-javascript
 control: Customize PDF exporting
 publishingplatform: ##Platform_Name##
@@ -9,18 +9,17 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-
 # To customize PDF export
 
-PDF export provides an option to customize the mapping of Gantt to exported PDF document.
+Customizing PDF export in the ##Platform_Name## Gantt Chart control allows tailoring exported documents for specific needs, using [PdfExportProperties](../../api/gantt/pdfexportproperties) to adjust file names, page orientation, size, columns, headers, footers, timelines, and templates. Ensuring focused content like selected rows or styled taskbars, with the `PdfExport` module injected and [allowPdfExport](../../api/gantt#allowpdfexport) enabled. Use [beforePdfExport](../../gantt/events#beforepdfexport) and [pdfExportComplete](../../gantt/events#pdfexportcomplete) events for pre-export and post-export modifications, and [pdfQueryTaskbarInfo](../../gantt/events#pdfquerytaskbarinfo) for taskbar styling, supporting RTL layouts via [enableRtl](../../api/gantt#enablertl).
 
-## File name for exported document
+## Customize file name
 
-The file name of the exported PDF document can be specified using the [fileName](../../api/gantt/pdfExportProperties#filename) property in [pdfExportProperties](../../api/gantt/pdfExportProperties).
+Set the exported PDF file name using the [fileName](../../api/gantt/pdfexportproperties#filename) property in [PdfExportProperties](../../api/gantt/pdfexportproperties), such as **ProjectPlan.pdf**, for personalized document naming.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs1/index.ts %}
 {% endhighlight %}
@@ -47,12 +46,11 @@ The file name of the exported PDF document can be specified using the [fileName]
 
 ## How to change page orientation
 
-The page orientation of the exported PDF document can be customized using the [pageOrientation]
-(../../api/gantt/pdfExportProperties#pageorientation) property in [pdfExportProperties](../../api/gantt/pdfExportProperties). By default, the exported PDF document is in Landscape orientation.
+Adjust page orientation to **Portrait** or **Landscape** using the [pageOrientation](../../api/gantt/pdfexportproperties#pageorientation) property in [PdfExportProperties](../../api/gantt/pdfexportproperties). By default, the exported PDF document is in Landscape orientation.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs2/index.ts %}
 {% endhighlight %}
@@ -77,29 +75,16 @@ The page orientation of the exported PDF document can be customized using the [p
 {% previewsample "page.domainurl/code-snippet/gantt/pdf-export-cs2" %}
 {% endif %}
 
-## How to change page size
+## Customize page size
 
-Page size can be customized for the exported document using the  [pageSize](../../api/gantt/pdfExportProperties#pagesize) property in [pdfExportProperties](../../api/gantt/pdfExportProperties).
- The supported page sizes are:
+Page size can be customized for the exported document using the  [pageSize](../../api/gantt/pdfexportproperties#pagesize) property in [pdfExportProperties](../../api/gantt/pdfexportproperties).
+The supported page sizes are:
 
 * Letter
 * Note
 * Legal
-* A0
-* A1
-* A2
-* A3
-* A5
-* A6
-* A7
-* A8
-* A9
-* B0
-* B1
-* B2
-* B3
-* B4
-* B5
+* A0 to A9
+* B0 to B5
 * Archa
 * Archb
 * Archc
@@ -112,7 +97,7 @@ Page size can be customized for the exported document using the  [pageSize](../.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs3/index.ts %}
 {% endhighlight %}
@@ -139,11 +124,11 @@ Page size can be customized for the exported document using the  [pageSize](../.
 
 ## Export current view data
 
-PDF export provides an option to export the current view data into PDF. To export current view data alone, define the [exportType](../../api/gantt/pdfExportProperties#exporttype) to `CurrentViewData`.
+PDF export provides an option to export the current view data into PDF. To export current view data alone, define the [exportType](../../api/gantt/pdfexportproperties#exporttype) to **CurrentViewData**.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs4/index.ts %}
 {% endhighlight %}
@@ -168,13 +153,44 @@ PDF export provides an option to export the current view data into PDF. To expor
 {% previewsample "page.domainurl/code-snippet/gantt/pdf-export-cs4" %}
 {% endif %}
 
+## Enable footer
+
+By default, we render the default footer for a PDF file, this can be enabled or disabled by using the [enableFooter](../../api/gantt/pdfexportproperties#enablefooter) property.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/pdf-export-cs5/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/pdf-export-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/pdf-export-cs5" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/pdf-export-cs5/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/pdf-export-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/pdf-export-cs5" %}
+{% endif %}
+
 ## Export hidden columns
 
-PDF export provides an option to export hidden columns of Gantt by defining the [includeHiddenColumn](../../api/gantt/pdfExportProperties#includehiddencolumn) to `true`.
+PDF export provides an option to export hidden columns of Gantt by defining the [includeHiddenColumn](../../api/gantt/pdfexportproperties#includehiddencolumn) to **true**.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs6/index.ts %}
 {% endhighlight %}
@@ -201,11 +217,11 @@ PDF export provides an option to export hidden columns of Gantt by defining the
 
 ## Export predecessor lines
 
-The visibility of predecessor lines in the exported PDF document can be controlled using the [showPredecessorLines](../../api/gantt/pdfExportProperties#showpredecessorlines) property.
+The visibility of predecessor lines in the exported PDF document can be controlled using the [showPredecessorLines](../../api/gantt/pdfexportproperties#showpredecessorlines) property.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs7/index.ts %}
 {% endhighlight %}
@@ -230,17 +246,17 @@ The visibility of predecessor lines in the exported PDF document can be controll
 {% previewsample "page.domainurl/code-snippet/gantt/pdf-export-cs7" %}
 {% endif %}
 
-## Show or hide columns on exported PDF
+## Export specific columns
 
-A hidden column can be shown, or a visible column can be hidden while exporting the Gantt chart by using the  [toolbarClick](../../api/gantt#toolbarclick) and [beforePdfExport](../../api/gantt#beforepdfexport) events.
+A hidden column can be shown, or a visible column can be hidden while exporting the Gantt chart by using the [toolbarClick](../../gantt/events#toolbarclick) and [beforePdfExport](../../gantt/events#beforepdfexport) events.
 
-Columns can be shown or hidden by setting the `column.visible` property to true or false, respectively.
+Columns can be shown or hidden by setting the `column.visible` property to **true** or **false**, respectively.
 
-In the following example, the `Duration` column is initially hidden in the Gantt chart. During export, the `Duration` column is made visible and the StartDate column is hidden.
+In the following example, the **Duration** column is initially hidden in the Gantt chart. During export, the **Duration** column is made visible and the **StartDate** column is hidden.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs8/index.ts %}
 {% endhighlight %}
@@ -267,13 +283,13 @@ In the following example, the `Duration` column is initially hidden in the Gantt
 
 ## Conditional cell formatting
 
-TreeGrid cells in the exported PDF can be customized or formatted using the [pdfQueryCellInfo](../../api/gantt#pdfquerycellinfo) event. This event allows formatting TreeGrid cells in the exported PDF document based on the column cell value.
+TreeGrid cells in the exported PDF can be customized or formatted using the [pdfQueryCellInfo](../../gantt/events#pdfquerycellinfo) event. This event allows formatting TreeGrid cells in the exported PDF document based on the column cell value.
 
-In the following sample, the background color is set for `Progress` column in the exported document by using the `args.style.backgroundColor` property.
+In the following sample, the background color is set for **Progress** column in the exported document by using the `args.style.backgroundColor` property.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs9/index.ts %}
 {% endhighlight %}
@@ -300,13 +316,13 @@ In the following sample, the background color is set for `Progress` column in th
 
 ## Timeline cell formatting
 
-Timeline cells in the exported PDF document can be customized or formatted using the [pdfQueryTimelineCellInfo](../../api/gantt#pdfquerytimelinecellinfo) event.
+Timeline cells in the exported PDF document can be customized or formatted using the [pdfQueryTimelineCellInfo](../../gantt/events#pdfquerytimelinecellinfo) event.
 
-In the following sample, the header background color is set for timeline cells in the exported document by using the `args.headerBackgroundColor` property.
+In the following sample, the header background color is set for timeline cells in the exported document by using the `args.timelineCell.backgroundColor` property.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs10/index.ts %}
 {% endhighlight %}
@@ -333,13 +349,13 @@ In the following sample, the header background color is set for timeline cells i
 
 ## Taskbar formatting
 
-Taskbars in the exported PDF document can be customized or formatted using the [pdfQueryTaskbarInfo](../../api/gantt#pdfquerytaskbarinfo) event.
+Taskbars in the exported PDF document can be customized or formatted using the [pdfQueryTaskbarInfo](../../gantt/events#pdfquerytaskbarinfo) event.
 
 In the following sample, the taskbar background color is customized in the chart side of the exported document by using the `args.taskbar` property.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs11/index.ts %}
 {% endhighlight %}
@@ -364,13 +380,13 @@ In the following sample, the taskbar background color is customized in the chart
 {% previewsample "page.domainurl/code-snippet/gantt/pdf-export-cs11" %}
 {% endif %}
 
-## Customize Gantt Chart Appearance in PDF Export
+## Customize Gantt chart appearance in PDF export
 
-PDF export allows to customize the Gantt chart's appearance in the exported PDF documents. To customize the appearance of Gantt charts in exported PDF documents, define [ganttStyle](../../api/gantt/pdfExportProperties#ganttstyle) within [pdfExportProperties](../../api/gantt/pdfExportProperties). By using `ganttStyle`, can customize `columnHeader`, `fontFamily`, `cell`, `taskbar`, `label`, `timeline`, `chartGridLineColor`, `connectorLineColor`, `criticalConnectorLineColor`, `footer`, `font`, `eventMarker` and `holiday` regardless of the theme.
+PDF export allows to customize the Gantt chart's appearance in the exported PDF documents. To customize the appearance of Gantt charts in exported PDF documents, define [ganttStyle](../../api/gantt/pdfexportproperties#ganttstyle) within [pdfExportProperties](../../api/gantt/pdfexportproperties). By using `ganttStyle`, can customize `columnHeader`, `fontFamily`, `cell`, `taskbar`, `label`, `timeline`, `chartGridLineColor`, `connectorLineColor`, `criticalConnectorLineColor`, `footer`, `font`, `eventMarker` and `holiday` regardless of the theme. 
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs13/index.ts %}
 {% endhighlight %}
@@ -395,16 +411,15 @@ PDF export allows to customize the Gantt chart's appearance in the exported PDF
 {% previewsample "page.domainurl/code-snippet/gantt/pdf-export-cs13" %}
 {% endif %}
 
-## Customize Split Taskbar Segment Colors in PDF
+## Customize split taskbar segment colors in PDF
 
-The PDF export feature in the Gantt Chart allows you to customize the colors of split taskbar segments using the [taskSegmentStyles](https://ej2.syncfusion.com/documentation/api/gantt/iTaskbarStyle#taskSegmentStyles) property inside the [pdfQueryTaskbarInfo](../../api/gantt#pdfquerytaskbarinfo) event.
+The PDF export feature in the Gantt Chart allows you to customize the colors of split taskbar segments using the [taskSegmentStyles](../../api/gantt/itaskbarstyle#tasksegmentstyles) property inside the [pdfQueryTaskbarInfo](../../api/gantt/index-default#pdfquerytaskbarinfo) event.
 
-The [taskSegmentStyles](https://ej2.syncfusion.com/documentation/api/gantt/iTaskbarStyle#taskSegmentStyles)
-property contains a collection of style properties for task segments. By specifying the index of corresponding segment index in this collection you can customize that segment taskbar color, progress color, and its border color.
+The [taskSegmentStyles](../../api/gantt/itaskbarstyle#tasksegmentstyles) property contains a collection of style properties for task segments. By specifying the index of corresponding segment index in this collection you can customize that segment taskbar color, progress color, and its border color.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs17/index.ts %}
 {% endhighlight %}
@@ -429,20 +444,19 @@ property contains a collection of style properties for task segments. By specify
 {% previewsample "page.domainurl/code-snippet/gantt/pdf-export-cs17" %}
 {% endif %}
 
-
 ## Exporting with templates
 
 ### Exporting with column template
 
-The PDF export functionality allows to export Grid columns that include images, hyperlinks, and custom text to an PDF document using [pdfQueryCellInfo](https://ej2.syncfusion.com/documentation/api/gantt/pdfQueryCellInfoEventArgs) event.
+The PDF export functionality allows to export Grid columns that include images, hyperlinks, and custom text to an PDF document using [pdfQueryCellInfo](../../api/gantt/pdfquerycellinfoeventargs/) event.
 
-In the following sample, the hyperlinks and images are exported to PDF using [hyperlink](https://ej2.syncfusion.com/documentation/api/gantt/pdfQueryCellInfoEventArgs#hyperlink) and [image](https://ej2.syncfusion.com/documentation/api/gantt/pdfQueryCellInfoEventArgs#image) properties in the [pdfQueryCellInfo](https://ej2.syncfusion.com/documentation/api/gantt/pdfQueryCellInfoEventArgs) event.
+In the following sample, the hyperlinks and images are exported to PDF using [hyperlink](../../api/gantt/pdfquerycellinfoeventargs#hyperlink) and [image](../../api/gantt/pdfquerycellinfoeventargs#image) properties in the [pdfQueryCellInfo](../../api/gantt/pdfquerycellinfoeventargs/) event.
 
 >Note: PDF Export supports base64 string to export the images.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-column-template-cs1/index.ts %}
 {% endhighlight %}
@@ -469,9 +483,9 @@ In the following sample, the hyperlinks and images are exported to PDF using [hy
 
 ### Exporting with taskbar template
 
-The PDF export functionality allows to export taskbar templates that include `images` and `text` to an PDF document using [pdfQueryTaskbarInfo](../../api/gantt#pdfquerytaskbarinfo) event. Taskbars in the exported PDF document can be customized or formatted using the `pdfQueryTaskbarInfo` event for parent taskbar template, taskbar templates and milestone templates.
+The PDF export functionality allows to export taskbar templates that include `images` and `text` to an PDF document using [pdfQueryTaskbarInfo](../../api/gantt#pdfquerytaskbarinfo) event. Taskbars in the exported PDF document can be customized or formatted using the `pdfQueryTaskbarInfo` event for parent taskbar templates, taskbar templates and milestone templates.
 
-In the following sample, taskbar templates with images and text are exported to PDF using [taskbarTemplate](https://ej2.syncfusion.com/documentation/api/gantt/pdfQueryTaskbarInfoEventArgs#taskbarTemplate) properties in the [pdfQueryTaskbarInfo](https://ej2.syncfusion.com/documentation/api/gantt#pdfquerytaskbarinfo) event.
+In the following sample, taskbar templates with images and text are exported to PDF using [taskbarTemplate](../../api/gantt/pdfquerytaskbarinfoeventargs#taskbartemplate) properties in the [pdfQueryTaskbarInfo](../../api/gantt#pdfquerytaskbarinfo) event.
 
 >Note: PDF Export supports base64 string to export the images.
 
@@ -506,7 +520,7 @@ In the following sample, taskbar templates with images and text are exported to
 
 The PDF export functionality allows to export task label template that include `images` and `text` to an PDF document using [pdfQueryTaskbarInfo](../../api/gantt#pdfquerytaskbarinfo) event.
 
-In the following sample, task label template with images and text are exported to PDF using [labelSettings](https://ej2.syncfusion.com/documentation/api/gantt/pdfQueryTaskbarInfoEventArgs#labelSettings) properties in the [pdfQueryTaskbarInfo](https://ej2.syncfusion.com/documentation/api/gantt#pdfquerytaskbarinfo) event.
+In the following sample, task label template with images and text are exported to PDF using [labelSettings](../../api/gantt/pdfquerytaskbarinfoeventargs#labelsettings) properties in the [pdfQueryTaskbarInfo](../../api/gantt#pdfquerytaskbarinfo) event.
 
 >Note: PDF Export supports base64 string to export the images.
 
@@ -539,9 +553,9 @@ In the following sample, task label template with images and text are exported t
 
 ### Exporting with header template
 
-The PDF export functionality allows to export header template that include `images` and `text` to an PDF document using [pdfColumnHeaderQueryCellInfo](https://ej2.syncfusion.com/documentation/api/gantt/pdfColumnHeaderQueryCellInfoEventArgs) event.
+The PDF export functionality allows to export header template that include `images` and `text` to an PDF document using [pdfColumnHeaderQueryCellInfo](../../api/gantt/pdfColumnHeaderQueryCellInfoEventArgs/) event.
 
-In the following sample, header template with images and text are exported to PDF using [headerTemplate](https://ej2.syncfusion.com/documentation/api/gantt/pdfColumnHeaderQueryCellInfoEventArgs#headerTemplate) properties in the [pdfColumnHeaderQueryCellInfo](https://ej2.syncfusion.com/documentation/api/gantt/pdfColumnHeaderQueryCellInfoEventArgs) event.
+In the following sample, header template with images and text are exported to PDF using [headerTemplate](../../api/gantt/pdfcolumnheaderquerycellinfoeventargs#headertemplate) properties in the [pdfColumnHeaderQueryCellInfo](../../api/gantt/pdfcolumnheaderquerycellinfoeventargs/) event.
 
 >Note: PDF Export supports base64 string to export the images.
 
@@ -571,3 +585,8 @@ In the following sample, header template with images and text are exported to PD
 
 {% previewsample "page.domainurl/code-snippet/gantt/pdf-export-header-template-cs1" %}
 {% endif %}
+
+## See also
+- [How to export Gantt chart to Excel?](../../gantt/excel-export/excel-export)
+- [How to manage task dependencies?](../../gantt/task-dependency)
+- [How to configure critical path?](../../gantt/critical-path)
\ No newline at end of file
diff --git a/ej2-javascript/gantt/pdf-export/header-and-footer.md b/ej2-javascript/gantt/pdf-export/header-and-footer.md
index 6fe002935..91853f699 100644
--- a/ej2-javascript/gantt/pdf-export/header-and-footer.md
+++ b/ej2-javascript/gantt/pdf-export/header-and-footer.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Header and footer of PDF export in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about header and footer of PDF exporting in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: PDF Headers and Footers in ##Platform_Name## Gantt Chart | Syncfusion
+description: Learn how to customize headers and footers in PDF exports of the Syncfusion ##Platform_Name## Gantt Chart control with text, lines, page numbers, and images.
 platform: ej2-javascript
 control: Header and Footer of PDF export 
 publishingplatform: ##Platform_Name##
@@ -11,18 +11,18 @@ domainurl: ##DomainURL##
 
 # Customizing header and footer of PDF export in ##Platform_Name## Gantt control
 
-PDF export provides an option to specify and customize text, page number, line and image in header and footer of exported PDF document by using [pdfExportProperties](https://helpej2.syncfusion.com/documentation/api/gantt/pdfExportProperties).
+PDF export provides an option to specify and customize text, page number, line and image in header and footer of exported PDF document by using [pdfExportProperties](../../api/gantt/pdfexportproperties).
 
 ## Write a text in header and footer
 
-This functionality helps to customize the text that appears in the header or footer sections of a PDF document. Text can be added to [header](https://helpej2.syncfusion.com/documentation/api/gantt/pdfHeader) or [footer](https://helpej2.syncfusion.com/documentation/api/gantt/pdfFooter) of exported PDF document by using [pdfExportProperties](https://helpej2.syncfusion.com/documentation/api/gantt/pdfExportProperties).
+This functionality helps to customize the text that appears in the header or footer sections of a PDF document. Text can be added to [header](../../api/gantt/pdfHeader) or [footer](../../api/gantt/pdfFooter) of exported PDF document by using [pdfExportProperties](../../api/gantt/pdfexportproperties).
 
 * `type` property in the content array indicates the content type, such as 'Text'.
 * `Value` property determines the text. 
 * `Position` property determines the horizontal and vertical positions of the text element.
 * `style` property define the visual styling properties for the text element
 
-```ts
+{% if page.publishingplatform == "typescript" %}
 
 let exportProperties: PdfExportProperties = {
     header: {
@@ -33,17 +33,34 @@ let exportProperties: PdfExportProperties = {
                 type: 'Text',
                 value: 'INVOICE',
                 position: { x: 380, y: 0 },
-                style: { textBrushColor: '#C25050', fontSize: 25 },
-            },
+                style: { textBrushColor: '#C25050', fontSize: 25 }
+            }
+        ]
+    }
+};
+
+{% elsif page.publishingplatform == "javascript" %}
 
+let exportProperties = {
+    header: {
+        fromTop: 0,
+        height: 130,
+        contents: [
+            {
+                type: 'Text',
+                value: 'INVOICE',
+                position: { x: 380, y: 0 },
+                style: { textBrushColor: '#C25050', fontSize: 25 }
+            }
         ]
     }
+};
 
-```
+{% endif %}
 
 ## Draw a line in header and footer
 
-This functionality helps to customize the line that appears in the header or footer sections of the PDF document. A line can be added to [header](https://helpej2.syncfusion.com/documentation/api/gantt/pdfHeader) or [footer](https://helpej2.syncfusion.com/documentation/api/gantt/pdfFooter) of the exported PDF document by using [pdfExportProperties](https://helpej2.syncfusion.com/documentation/api/gantt/pdfExportProperties).
+This functionality helps to customize the line that appears in the header or footer sections of the PDF document. A line can be added to [header](../../api/gantt/pdfHeader) or [footer](../../api/gantt/pdfFooter) of the exported PDF document by using [pdfExportProperties](../../api/gantt/pdfexportproperties).
 
 * `type` determines content type, such as 'Line'.
 * `style` is used to set properties like the color (penColor), size (penSize), and style (dashStyle) of the line.
@@ -56,7 +73,7 @@ Supported line styles:
 * dashdotdot
 * solid
 
-```ts
+{% if page.publishingplatform == "typescript" %}
 
 let exportProperties: PdfExportProperties = {
     header: {
@@ -70,13 +87,29 @@ let exportProperties: PdfExportProperties = {
             }
         ]
     }
-}
+};
 
-```
+{% elsif page.publishingplatform == "javascript" %}
+
+let exportProperties = {
+    header: {
+        fromTop: 0,
+        height: 130,
+        contents: [
+            {
+                type: 'Line',
+                style: { penColor: '#000080', penSize: 2, dashStyle: 'Solid' },
+                points: { x1: 0, y1: 4, x2: 685, y2: 4 }
+            }
+        ]
+    }
+};
+
+{% endif %}
 
 ## Add page number in header and footer
 
-This feature allows to customize the page number that appears in the header or footer sections of the PDF document. Page numbers can be added in [header](https://helpej2.syncfusion.com/documentation/api/gantt/pdfHeader) or [footer](https://helpej2.syncfusion.com/documentation/api/gantt/pdfFooter) of the exported PDF document by using [pdfExportProperties](https://helpej2.syncfusion.com/documentation/api/gantt/pdfExportProperties).
+This feature allows to customize the page number that appears in the header or footer sections of the PDF document. Page numbers can be added in [header](../../api/gantt/pdfHeader) or [footer](../../api/gantt/pdfFooter) of the exported PDF document by using [pdfExportProperties](../../api/gantt/pdfexportproperties).
 
 * `type` indicates that the content is a page number.
 * `pageNumberType` specifies the type of numbering to be used.
@@ -91,9 +124,9 @@ Supported page number types:
 * UpperRoman - I, II, III,
 * Number - 1,2,3.
 
-```ts
+{% if page.publishingplatform == "typescript" %}
 
- let exportProperties: PdfExportProperties = {
+let exportProperties: PdfExportProperties = {
     header: {
         fromTop: 0,
         height: 130,
@@ -101,19 +134,37 @@ Supported page number types:
             {
                 type: 'PageNumber',
                 pageNumberType: 'Arabic',
-                format: 'Page {$current} of {$total}', //optional
+                format: 'Page {$current} of {$total}',
                 position: { x: 0, y: 25 },
                 style: { textBrushColor: '#ffff80', fontSize: 15, hAlign: 'Center' }
             }
         ]
     }
-}
+};
 
-```
+{% elsif page.publishingplatform == "javascript" %}
+
+let exportProperties = {
+    header: {
+        fromTop: 0,
+        height: 130,
+        contents: [
+            {
+                type: 'PageNumber',
+                pageNumberType: 'Arabic',
+                format: 'Page {$current} of {$total}',
+                position: { x: 0, y: 25 },
+                style: { textBrushColor: '#ffff80', fontSize: 15, hAlign: 'Center' }
+            }
+        ]
+    }
+};
+
+{% endif %}
 
 ## Insert an image in header and footer
 
-This feature allows to customize the image that appears in the header or footer sections of the PDF document. Image (Base64 string) can be added in the exported document in [header](https://helpej2.syncfusion.com/documentation/api/gantt/pdfHeader) or [footer](https://helpej2.syncfusion.com/documentation/api/gantt/pdfFooter) of the exported PDF document by using [pdfExportProperties](https://helpej2.syncfusion.com/documentation/api/gantt/pdfExportProperties).
+This feature allows to customize the image that appears in the header or footer sections of the PDF document. Image (Base64 string) can be added in the exported document in [header](../../api/gantt/pdfHeader) or [footer](../../api/gantt/pdfFooter) of the exported PDF document by using [pdfExportProperties](../../api/gantt/pdfexportproperties).
 
 * `type` indicates that the content is an image.
 * `src` specifies the source of the image, which should be Base64 string. 
@@ -122,9 +173,10 @@ This feature allows to customize the image that appears in the header or footer
 
 >Note: PDF Export supports base64 string to export the images.
 
-```ts
+{% if page.publishingplatform == "typescript" %}
+
 // Replace it with a valid Base64-encoded image.
-let image: string = "/9j/4AAQSkZJRgABAQEAeAB4AAD..." 
+let image: string = "/9j/4AAQSkZJRgABAQEAeAB4AAD...";
 
 let exportProperties: PdfExportProperties = {
     header: {
@@ -135,19 +187,39 @@ let exportProperties: PdfExportProperties = {
                 type: 'Image',
                 src: image,
                 position: { x: 40, y: 10 },
-                size: { height: 100, width: 250 },
+                size: { height: 100, width: 250 }
+            }
+        ]
+    }
+};
+
+{% elsif page.publishingplatform == "javascript" %}
+
+// Replace it with a valid Base64-encoded image.
+let image = "/9j/4AAQSkZJRgABAQEAeAB4AAD...";
+
+let exportProperties = {
+    header: {
+        fromTop: 0,
+        height: 130,
+        contents: [
+            {
+                type: 'Image',
+                src: image,
+                position: { x: 40, y: 10 },
+                size: { height: 100, width: 250 }
             }
         ]
     }
-}
+};
 
-```
+{% endif %}
 
 The below code illustrates the pdf export customization.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-customization-cs1/index.ts %}
 {% endhighlight %}
@@ -174,11 +246,11 @@ The below code illustrates the pdf export customization.
 
 ## Disable footer
 
-By default, the exported PDF file includes a footer. The footer can be disabled by setting the [enableFooter](../../api/gantt/pdfExportProperties#enablefooter) property to `false`.
+By default, the exported PDF file includes a footer. The footer can be disabled by setting the [enableFooter](../../api/gantt/pdfexportproperties#enablefooter) property to `false`.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs5/index.ts %}
 {% endhighlight %}
@@ -201,4 +273,9 @@ By default, the exported PDF file includes a footer. The footer can be disabled
 {% endtabs %}
 
 {% previewsample "page.domainurl/code-snippet/gantt/pdf-export-cs5" %}
-{% endif %}
\ No newline at end of file
+{% endif %}
+
+## See also
+- [How to export to PDF?](../../pdf-export/pdf-export)
+- [How to customize PDF export?](../../pdf-export/customize-pdf-export)
+- [How to manage task dependencies?](../../task-dependency)
\ No newline at end of file
diff --git a/ej2-javascript/gantt/pdf-export/pdf-export.md b/ej2-javascript/gantt/pdf-export/pdf-export.md
index 0d9a7eae0..61758b1d1 100644
--- a/ej2-javascript/gantt/pdf-export/pdf-export.md
+++ b/ej2-javascript/gantt/pdf-export/pdf-export.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Pdf export in ##Platform_Name## Gantt Control | Syncfusion
-description: Learn here all about Pdf export in Syncfusion Essential ##Platform_Name## Gantt control, its elements and more.
+title: PDF Export in ##Platform_Name## Gantt Chart Control | Syncfusion
+description: Learn how to export Gantt to PDF in Syncfusion ##Platform_Name## Gantt Chart control with indicators, blob objects, single-page, and theme options.
 platform: ej2-javascript
 control: Pdf export 
 publishingplatform: ##Platform_Name##
@@ -9,17 +9,17 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Pdf export in ##Platform_Name## Gantt Control
+# PDF Export in ##Platform_Name## Gantt Chart Control
 
-## PDF Export
+PDF export in the ##Platform_Name## Gantt Chart control enables exporting project data to PDF documents for sharing or archiving, using the [pdfExport](../../api/gantt#pdfexport) method with [allowPdfExport](../../api/gantt#allowpdfexport) set to **true** and `PdfExport` module injected. This feature supports exporting timelines, tasks, and dependencies, with options for indicators via `base64` images, blob objects for previews, single-page layouts, multiple Gantt instances in one file, and themes like Tailwind3 or Bootstrap. Focus on auto-scheduled tasks for accurate export, as manual scheduling is not currently supported.
 
-PDF export allows exporting Gantt data to PDF document. You need to use the [pdfExport](../../api/gantt#pdfexport) method for exporting. To enable PDF export in the Gantt, set the [allowPdfExport](../../api/gantt#allowpdfexport) to true.
+## Export basic Gantt data
 
-To export data to PDF document, inject the `PdfExport` module in Gantt.
+Export Gantt data to PDF by setting [allowPdfExport](../../api/gantt#allowpdfexport) to **true** and calling [pdfExport](../../api/gantt#pdfexport), which generates a document with the chart and tree-grid data.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs14/index.ts %}
 {% endhighlight %}
@@ -44,14 +44,13 @@ To export data to PDF document, inject the `PdfExport` module in Gantt.
 {% previewsample "page.domainurl/code-snippet/gantt/pdf-export-cs14" %}
 {% endif %}
  
-## Indicators in PDF exporting 
+## Include indicators in PDF export
 
-The PDF export functionality allows users to export Gantt charts enriched with dynamic indicators and accompanying images.
-These indicators, represented by images,can be effortlessly defined using the  [base64](../api/gantt/iIndicator#base64) encoding value in the data object of datasource.This data object field should be mapped to indiactor property of [task fields](https://ej2.syncfusion.com/javascript/documentation/api/gantt/taskFields#indicators).
+Include dynamic indicators and images in PDF export by defining them with `base64` encoding in the data source, mapped to the [taskFields.indicators](../../api/gantt/taskFields#indicators) property, enhancing visual representation of task status.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs16/index.ts %}
 {% endhighlight %}
@@ -76,19 +75,13 @@ These indicators, represented by images,can be effortlessly defined using the  [
 {% previewsample "page.domainurl/code-snippet/gantt/pdf-export-cs16" %}
 {% endif %}
 
-## Exporting Gantt data as a blob object
-
-In Gantt, you can export the Gantt chart data as a blob object, which allows you to preview or modify the data before exporting it.
+## Export Gantt data as blob object
 
-To export the Gantt chart data as a blob object, follow these steps:
-
-step 1: pdfExport fourth argument set as `true`.
-
-step 2: Then , `pdfExpComplete` return as blob object.
+Export Gantt data as a blob object for previews or modifications by setting the fourth argument of [pdfExport](../../api/gantt#pdfexport) to **true**, with the blob returned in the [pdfExportComplete](../../gantt/events#pdfexportcomplete) event.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/exporting-blob-data-cs1/index.ts %}
 {% endhighlight %}
@@ -113,15 +106,13 @@ step 2: Then , `pdfExpComplete` return as blob object.
 {% previewsample "page.domainurl/code-snippet/gantt/exporting-blob-data-cs1" %}
 {% endif %}
 
-## Single page exporting in gantt
+## Single page exporting in Gantt
 
-In Gantt, we have provided support to export the Gantt component where each rows are auto-fit to the PDF document page width by setting [isFitToWidth](https://ej2.syncfusion.com/documentation/api/gantt/pdfExportProperties/fitToWidthSettings#isFitToWidth) as true in <code>fitToWidthSettings</code> of <code>PdfExportProperties</code>.
-
-Also, we can customize the chart width and grid width in exported file using [chartWidth](https://ej2.syncfusion.com/documentation/api/gantt/pdfExportProperties/fitToWidthSettings/isFitToWidth#chartWidth) and [gridWidth](https://ej2.syncfusion.com/documentation/api/gantt/pdfExportProperties/fitToWidthSettings/isFitToWidth#gridWidth) by defining it as percentage in string. 
+Export Gantt rows to a single PDF page by setting [fitToWidthSettings.isFitToWidth](../../api/gantt/fittowidthsettings#isfittowidth) to **true** in `PdfExportProperties`. Customize chart and grid widths using [chartWidth](../../api/gantt/fittowidthsettings#chartwidth) and [gridWidth](../../api/gantt/fittowidthsettings#gridwidth) as percentages.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/single-page/index.ts %}
 {% endhighlight %}
@@ -146,13 +137,13 @@ Also, we can customize the chart width and grid width in exported file using [ch
 {% previewsample "page.domainurl/code-snippet/gantt/single-page" %}
 {% endif %}
 
-## Multiple gantt exporting in ##Platform_Name## Gantt control
+## Multiple Gantt exporting
 
-PDF export provides an option for exporting multiple Gantt to same file. In this exported document, each Gantt will be exported to a new page of the document in same file.
+Export multiple Gantt instances to a single PDF file by calling [pdfExport](../../api/gantt#pdfexport) on each, with each Gantt exported to a new page in the same document.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-multiple-export-cs1/index.ts %}
 {% endhighlight %}
@@ -177,19 +168,13 @@ PDF export provides an option for exporting multiple Gantt to same file. In this
 {% previewsample "page.domainurl/code-snippet/gantt/pdf-multiple-export-cs1" %}
 {% endif %}
 
-## Applying Themes in PDF Export
+## Apply themes in PDF export
 
-PDF export provides an option to include theme for the exported PDF document. To apply theme in exported PDF, define the [theme](../../api/gantt/pdfExportProperties#theme) in [pdfExportProperties](../../api/gantt/pdfExportProperties). 
-The available themes are:
-
-* Material
-* Fabric
-* Bootstrap
-* Bootstrap 4
+Apply themes to exported PDF documents by setting the [theme](../../api/gantt/pdfexportproperties#theme) property in `PdfExportProperties` to values like Tailwind3, Fabric, Bootstrap, or Bootstrap4, customizing the appearance.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/pdf-export-cs12/index.ts %}
 {% endhighlight %}
@@ -213,3 +198,8 @@ The available themes are:
 
 {% previewsample "page.domainurl/code-snippet/gantt/pdf-export-cs12" %}
 {% endif %}
+
+## See also
+- [How to export to Excel?](../../gantt/excel-export)
+- [How to customize PDF export?](../../gantt/pdf-export/customize-pdf-export)
+- [How to manage task dependencies?](../../gantt/task-dependency)
\ No newline at end of file
diff --git a/ej2-javascript/gantt/resource-view.md b/ej2-javascript/gantt/resource-view.md
index 74db7e3ca..293474601 100644
--- a/ej2-javascript/gantt/resource-view.md
+++ b/ej2-javascript/gantt/resource-view.md
@@ -21,7 +21,7 @@ A task assigned to one or more resources are termed as resource task and it is a
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/resource-view-cs1/index.ts %}
 {% endhighlight %}
@@ -58,7 +58,7 @@ The range of overallocation dates can be highlighted by a square bracket. It can
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/resource-view-cs2/index.ts %}
 {% endhighlight %}
@@ -93,7 +93,7 @@ In Gantt, you can enable taskbar drag and drop between resources by using the [a
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/resource-view-taskbardragdrop-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/resources.md b/ej2-javascript/gantt/resources.md
index f9ac58b96..d0cb76236 100644
--- a/ej2-javascript/gantt/resources.md
+++ b/ej2-javascript/gantt/resources.md
@@ -17,12 +17,12 @@ In Gantt, the resources are represented by staff, equipment and materials etc. I
 
 The resource collection contains details about resources that are used in the project. Resources are JSON object that contains id, name, unit and group of the resources and this collection is mapped to the Gantt control using the [resources](../api/gantt#resources) property. These resource fields are mapped to the Gantt control using the [resourceFields](../api/gantt#resourceFields) property.
 
-Resource fields | Description
------|-----
-[id](../api/gantt/resourceFields#id) | This field is used to assign resources to the tasks.
-[name](../api/gantt/resourceFields#name) | This field is used to map the resource names. These names are displayed as one of Gantt columns and also can display as labels using the [labelSettings](../api/gantt/labelSettings) property.
-[unit](../api/gantt/resourceFields#unit) | It indicates the amount of work that can be done by a resource for the task in a day.
-[group](../api/gantt/resourceFields#group) | This field is used to group the resources and the tasks assigned to that particular resource into category.
+| Resource fields                            | Description                                                                                                                                                                                    |
+| ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [id](../api/gantt/resourceFields#id)       | This field is used to assign resources to the tasks.                                                                                                                                           |
+| [name](../api/gantt/resourceFields#name)   | This field is used to map the resource names. These names are displayed as one of Gantt columns and also can display as labels using the [labelSettings](../api/gantt/labelSettings) property. |
+| [unit](../api/gantt/resourceFields#unit)   | It indicates the amount of work that can be done by a resource for the task in a day.                                                                                                          |
+| [group](../api/gantt/resourceFields#group) | This field is used to group the resources and the tasks assigned to that particular resource into category.                                                                                    |
 
 The following code snippets shows resource collection and how it assigned to Gantt control.
 
@@ -83,7 +83,7 @@ The following code snippet shows how to assign the resource for each task and ma
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/resources-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/scrolling.md b/ej2-javascript/gantt/scrolling.md
index db7085282..5fc0a7198 100644
--- a/ej2-javascript/gantt/scrolling.md
+++ b/ej2-javascript/gantt/scrolling.md
@@ -25,7 +25,7 @@ We can even set pixel values to width and height of gantt container using [width
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/scrolling-cs1/index.ts %}
 {% endhighlight %}
@@ -57,7 +57,7 @@ Setting the `height` to `100%` requires the gantt parent element to have explici
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/responsive-scrolling-cs1/index.ts %}
 {% endhighlight %}
@@ -90,7 +90,7 @@ The following code examples show how the scroll To Date method works in Gantt:
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/how-to-scrollToDate-cs1/index.ts %}
 {% endhighlight %}
@@ -121,7 +121,7 @@ In the Gantt control, you can set the vertical scroller position dynamically by
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/how-to-setscrolltop-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/selection/cell-selection.md b/ej2-javascript/gantt/selection/cell-selection.md
index 2681877f4..09d8e78f7 100644
--- a/ej2-javascript/gantt/selection/cell-selection.md
+++ b/ej2-javascript/gantt/selection/cell-selection.md
@@ -17,7 +17,7 @@ Find the code example below to enable the cell selection in Gantt.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/selection-cs1/index.ts %}
 {% endhighlight %}
@@ -48,7 +48,7 @@ You can select multiple cells by setting the [selectionSettings.type](../../api/
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/selection-cs2/index.ts %}
 {% endhighlight %}
@@ -79,7 +79,7 @@ You can select a cell dynamically using the [selectCell](../../api/gantt/selecti
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/selectCell-cs1/index.ts %}
 {% endhighlight %}
@@ -110,7 +110,7 @@ While selecting a cell in Gantt, the [cellSelecting](../../api/gantt#cellselecti
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/selection-cs3/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/selection/row-selection.md b/ej2-javascript/gantt/selection/row-selection.md
index a57106a06..f8dc318cf 100644
--- a/ej2-javascript/gantt/selection/row-selection.md
+++ b/ej2-javascript/gantt/selection/row-selection.md
@@ -15,7 +15,7 @@ The row selection in the Gantt control can be enabled or disabled using the [all
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/selection-cs4/index.ts %}
 {% endhighlight %}
@@ -48,7 +48,7 @@ You can select a row at the time of loading by setting the index of the row to t
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/selection-cs5/index.ts %}
 {% endhighlight %}
@@ -79,7 +79,7 @@ You can also select a row dynamically using the [selectRow](../../api/gantt/sele
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/selectRow-cs1/index.ts %}
 {% endhighlight %}
@@ -110,7 +110,7 @@ You can select multiple rows by setting the [selectionSettings.type](../../api/g
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/selection-cs6/index.ts %}
 {% endhighlight %}
@@ -141,7 +141,7 @@ While selecting a row in Gantt, the [rowSelecting](../../api/gantt#rowselecting)
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/selection-cs7/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/selection/selection.md b/ej2-javascript/gantt/selection/selection.md
index 544703206..96c99569a 100644
--- a/ej2-javascript/gantt/selection/selection.md
+++ b/ej2-javascript/gantt/selection/selection.md
@@ -30,7 +30,7 @@ The Gantt control supports three types of selection modes that can be set by usi
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/selection-cs8/index.ts %}
 {% endhighlight %}
@@ -61,7 +61,7 @@ The toggle selection allows you to select and deselect a specific row or cell. T
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/toggleselection-cs1/index.ts %}
 {% endhighlight %}
@@ -125,7 +125,7 @@ You can clear the selected cells and selected rows by using a method called [cle
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/clearselection-cs1/index.ts %}
 {% endhighlight %}
@@ -156,7 +156,7 @@ You can get the selected row indexes by using the [getSelectedRowIndexes](../../
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/selection-cs9/index.ts %}
 {% endhighlight %}
@@ -189,7 +189,7 @@ In the following code, the rows which contains `TaskId` value as 3 and 4 are sel
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/selection-cs10/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/sorting.md b/ej2-javascript/gantt/sorting.md
index e7ae215be..d0fb75525 100644
--- a/ej2-javascript/gantt/sorting.md
+++ b/ej2-javascript/gantt/sorting.md
@@ -21,7 +21,7 @@ To sort, inject the [Sort](../api/gantt#sortmodule) module into the Gantt contro
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/getting-started-cs14/index.ts %}
 {% endhighlight %}
@@ -55,7 +55,7 @@ The Gantt control can be rendered with sorted columns initially, and this can be
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/sorting-cs1/index.ts %}
 {% endhighlight %}
@@ -86,7 +86,7 @@ Columns in the Gantt control can be sorted dynamically using the [sortColumn](..
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/sortingColumns-cs1/index.ts %}
 {% endhighlight %}
@@ -117,7 +117,7 @@ In the Gantt control, you can clear all the sorted columns and return to previou
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/clearSorting-cs1/index.ts %}
 {% endhighlight %}
@@ -148,7 +148,7 @@ During the sort action, the Gantt control triggers two events. The [actionBegin]
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/sorting-cs2/index.ts %}
 {% endhighlight %}
@@ -184,7 +184,7 @@ The following code snippets explains how to achieve this.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/sortingCustomColumns-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/splitter.md b/ej2-javascript/gantt/splitter.md
index 143584e50..b414da339 100644
--- a/ej2-javascript/gantt/splitter.md
+++ b/ej2-javascript/gantt/splitter.md
@@ -21,7 +21,7 @@ The following example sets a percentage-based splitter position. This configurat
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/how-to-splitter-cs1/index.ts %}
 {% endhighlight %}
@@ -59,7 +59,7 @@ The following example configures the Grid view mode. This configuration prioriti
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/splitter-view/index.ts %}
 {% endhighlight %}
@@ -92,7 +92,7 @@ The following example adjusts the splitter dynamically:
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/changeSplitterDynamically-cs1/index.ts %}
 {% endhighlight %}
@@ -125,7 +125,7 @@ The following example customizes the splitter’s background and hides the resiz
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/splitter-events/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/state-persistence.md b/ej2-javascript/gantt/state-persistence.md
index 800ea6e7a..249be6fa1 100644
--- a/ej2-javascript/gantt/state-persistence.md
+++ b/ej2-javascript/gantt/state-persistence.md
@@ -42,7 +42,7 @@ The following example demonstrates how to prevent Gantt columns from persisting.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/column-prevent-cs1/index.ts %}
 {% endhighlight %}
@@ -75,7 +75,7 @@ If you wish to restore all these column properties, then you can achieve it by c
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/column-persist-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/style-and-appearance.md b/ej2-javascript/gantt/style-and-appearance.md
index 54f4e85be..40f0b6b7f 100644
--- a/ej2-javascript/gantt/style-and-appearance.md
+++ b/ej2-javascript/gantt/style-and-appearance.md
@@ -1,74 +1,171 @@
 ---
 layout: post
-title: Style and appearance in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Style and appearance in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Style and Appearance in ##Platform_Name## Gantt Chart control | Syncfusion
+description: Learn how to customize the style and appearance of the Syncfusion ##Platform_Name## Gantt Chart control with CSS overrides and grid line configurations.
 platform: ej2-javascript
-control: Style and appearance 
+control: Style and appearance
 publishingplatform: ##Platform_Name##
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Style and appearance in ##Platform_Name## Gantt control
-
-To modify the Gantt Chart appearance, you need to override the default CSS of gantt chart. Please find the list of CSS classes and its corresponding section in Gantt Chart. Also, you have an option to create your own custom theme for all the JavaScript controls using our [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=material).
-
-Section | CSS Class | Purpose of Class
------|-----|-----
-**Root**|e-gantt|This class is in the root element (div) of the gantt chart control.
-**Header**|e-gridheader|This class is added in the root element of header element. In this class, You can override thin line between header and content of the gantt chart.
-||e-table|This class is added at 'table' of the gantt chart header. This CSS class makes table width as 100 %.
-||e-columnheader|This class is added at 'tr' of the gantt chart header.
-**Grid Content**|e-gridcontent|This class is added at root of body content. This is to override background color of the body.
-||e-table|This class is added to table of content. This CSS class makes table width as 100 %.
-||e=row|This class is added to rows of gantt chart.
-||e-altrow|This class is added to alternate rows of gantt chart. This is to override alternate row color of the gantt chart.
-||e-rowcell|This class is added to all cells in the gantt chart. This is to override cells appearance and styling.
-**Chart Content**|e-gantt-chart|This class is added to the chart side of the gantt chart.
-||e-chart-row|This class is added to rows of gantt chart.
-**Timeline**|e-timeline-header-container|This class is added to timeline of the gantt chart.
-||e-header-cell-label|This class is added to the header cell of the timeline.
-||e-weekend-header-cell|This class is added to the weekend cells.
-**Taskbar**|e-taskbar-main-container|This class is added to taskbar of the gantt chart.
-||e-gantt-parent-taskbar|This class is added to the parent task bar of the gantt chart.
-||e-gantt-milestone|This class is added to the milestone tasks of the gantt chart.
-||e-gantt-unscheduled-taskbar|This class is added to the unscheduled tasks.
-||e-gantt-manualparenttaskbar|This class is added to the manual scheduled parent taskbar.
-||e-gantt-child-manualtaskbar|This class is added to the manual scheduled child taskbar.
-||e-gantt-unscheduled-manualtask|This class is added to the manual unscheduled tasks.
-**Splitter**|e-split-bar|This class is added to the gantt chart splitter.
-||e-resize-handler|This class is added to the resize handler of the gantt chart splitter.
-||e-arrow-left|This class is added to the left arrow of the resize handler.
-||e-arrow=right|This class is added to the right arrow of the resize handler.
-**Connector Lines**|e-line|This class is added to the connector lines.
-||e-connector-line-right-arrow|This class is added to the right arrow of the connector line.
-||e-connector-line-left-arrow|This class is added to the left arrow of the connector line.
-**Labels**|e-task-label|This class is added to the task labels.
-||e-right-label-container|This class is added to the right label.
-||e-left-label-container|This class is added to the left label.
-**Event Markers**|e-event-markers|This class is added to the event markers.
-**Baseline**|e-baseline-bar|This class is added to the baseline.
-||e-baseline-gantt-milestone-container|This class is added to the baseline of milestone tasks.
-**Tooltip**|e-gantt-tooltip|This class is added to the tooltip.
-
-## Grid lines
-
-In the Gantt control, you can show or hide the grid lines in the TreeGrid side and chart side by using the [gridLines](../api/gantt/gridLine) property.
-
-The following options are available in the Gantt control for rendering the grid lines:
-
-* Horizontal: The horizontal grid lines alone will be visible.
-* Vertical: The vertical grid lines alone will be visible.
-* Both: Both the horizontal and vertical grid lines will be visible on the TreeGrid and chart sides.
-* None: Gridlines will not be visible on TreeGrid and chart sides.
-
-> By default, the [gridLines](../api/gantt/gridLine) property is set to `Horizontal` type.
-
-The following code example shows how to change the gridlines rendering mode in the Gantt control.
+# Style and Appearance in ##Platform_Name## Gantt Chart Control
+
+The ##Platform_Name## Gantt Chart control's appearance is customized by overriding default CSS styles to align with application designs, using classes for taskbars, milestones, and grid elements. The [queryTaskbarInfo](../../gantt/events#querytaskbarinfo) event modifies taskbar styles dynamically, while grid lines are configured with [gridLines](../../api/gantt#gridlines) for horizontal, vertical, or both. Custom themes are created via [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=tailwind3). Styles include ARIA labels for accessibility, ensuring screen reader compatibility, and adapt to responsive designs, though narrow screens may require adjustments for taskbar visibility.
+
+## CSS class reference
+
+The Gantt Chart control uses CSS classes for styling, organized by functional areas:
+- **Core structure**:
+  - `e-gantt`: Root container for the entire control.
+  - `e-gridheader`: Header container separating headers from content.
+  - `e-table`: Header table for full-width rendering.
+  - `e-columnheader`: Header row for column titles and sorting indicators.
+- **Content area**:
+  - `e-gridcontent`: Main content container for background and layout.
+  - `e-table`: Content table for task data.
+  - `e-row`: Individual task row styling and spacing.
+  - `e-altrow`: Alternate row styling for readability.
+  - `e-rowcell`: Individual cell styling and alignment.
+- **Chart and timeline**:
+  - `e-gantt-chart`: Chart container for timeline visualization.
+  - `e-chart-row`: Chart row alignment with grid rows.
+  - `e-timeline-header-container`: Timeline header for date labels.
+  - `e-header-cell-label`: Timeline header cell text formatting.
+  - `e-weekend-header-cell`: Weekend header cells.
+- **Taskbar elements**:
+  - `e-taskbar-main-container`: Main taskbar container for positioning.
+  - `e-gantt-parent-taskbar`: Parent taskbar styling.
+  - `e-gantt-child-taskbar`: Child taskbar appearance.
+  - `e-gantt-milestone`: Milestone diamond shape.
+  - `e-gantt-unscheduled-taskbar`: Unscheduled taskbars.
+  - `e-gantt-manualparenttaskbar`: Manual parent taskbar.
+  - `e-gantt-child-manualtaskbar`: Manual child taskbar.
+  - `e-gantt-unscheduled-manualtask`: Unscheduled manual task.
+  - `e-parent-taskbar-inner-div`: Parent taskbar inner.
+  - `e-child-taskbar-inner-div`: Child taskbar inner.
+  - `e-child-progress-resizer`: Child progress resizer.
+- **Dependency lines**:
+  - `e-line`: Dependency line base style.
+  - `e-connector-line-right-arrow`: Right-side arrowhead.
+  - `e-connector-line-left-arrow`: Left-side arrowhead.
+- **Additional elements**:
+  - `e-gantt-tooltip`: Tooltip container for task details.
+  - `e-left-label-container`: Left label container.
+  - `e-right-label-container`: Right label container.
+  - `e-header-cell-label`: Header cell labels.
+  - `e-task-label`: Task labels.
+  - `e-taskbar-left-resizer`: Left taskbar resizer.
+  - `e-taskbar-right-resizer`: Right taskbar resizer.
+  - `e-weekend-container`: Weekend container.
+  - `e-left-label-inner-div`: Left label inner.
+  - `e-right-label-inner-div`: Right label inner.
+  - `e-left-resize-gripper`: Left resizer gripper.
+  - `e-right-resize-gripper`: Right resizer gripper.
+  - `e-connectorpoint-left`: Left connector point.
+  - `e-connectorpoint-right`: Right connector point.
+  - `e-child-progressbar-inner-div`: Child progress bar inner.
+  - `e-parent-progressbar-inner-div`: Parent progress bar inner.
+  - `e-row-expand`: Row expand.
+  - `e-row-collapse`: Row collapse.
+  - `e-progressbar-handler`: Progress bar handler.
+  - `e-connectorpoint-left-hover`: Connector point left hover.
+  - `e-connectorpoint-right-hover`: Connector point right hover.
+  - `e-baseline-bar`: Baseline bar.
+
+## Override default styles
+
+Override default CSS styles for custom appearance, using classes like **.e-gantt .e-gantt-parent-taskbar** for parent taskbars or **.e-gantt .e-gantt-milestone** for milestones. Theme Studio customizes themes across components.
+
+The following example overrides taskbar and milestone styles:
+
+```css
+/* Customize child taskbar appearance */
+.e-gantt .e-gantt-parent-taskbar {
+    background-color: #28a745;
+    border-color: #1e7e34;
+}
+
+/* Customize milestone appearance */
+.e-gantt .e-gantt-milestone {
+    background-color: #ff6600;
+    border-color: #cc5200;
+}
+```
+
+### Grid appearance customization
+
+```css
+/* Customize alternate row colors */
+.e-gantt .e-altrow {
+    background-color: #f8f9fa;
+}
+
+/* Customize cell borders */
+.e-gantt .e-rowcell {
+    border-right: 1px solid #dee2e6;
+}
+```
+
+## Customize the taskbar
+
+To customize the appearance of child taskbars in the Gantt Chart, apply the following CSS.
+```css
+.e-gantt-child-taskbar{
+  border-radius: 40%!important;
+}
+```
+
+## Customize the connector line
+
+To customize the connector line in the Gantt Chart, apply the following CSS
+
+```css
+ .e-connector-line{
+    stroke-width: 6;
+  }
+  .e-connector-line:hover {
+    stroke-width: 3px !important;
+    stroke: #f10c0c !important;
+  }
+```
+
+## customize the dialog popup on editing
+
+To customize the header area of the dialog editor in the Gantt Chart, apply the following CSS.
+
+```css
+.e-gantt-dialog .e-dlg-header-content, .e-gantt-dialog .e-tab .e-tab-header {
+  background: #5b3f51 !important;
+}
+```
+
+## Customize row hover
+
+To customize the row hover effect in the Gantt Chart, apply the following CSS.
+
+```css
+.e-gantt .e-chart-row:hover {
+  background: pink;
+}
+.e-gantt .e-row:hover {
+  background: pink;
+}
+```
+
+## Configure grid lines
+
+Control grid line visibility with [gridLines](../../api/gantt#gridlines):
+- **Horizontal**: Shows only horizontal lines for row separation.
+- **Vertical**: Shows only vertical lines for column separation.
+- **Both**: Shows both for full grid structure.
+- **None**: Hides all lines for minimal appearance.
+
+The following example configures both grid lines:
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/gridline-cs1/index.ts %}
 {% endhighlight %}
@@ -91,4 +188,11 @@ The following code example shows how to change the gridlines rendering mode in t
 {% endtabs %}
 
 {% previewsample "page.domainurl/code-snippet/gantt/gridline-cs1" %}
-{% endif %}
\ No newline at end of file
+{% endif %}
+
+By default, `gridLines` is **Horizontal**.
+
+## See also
+- [How to customize taskbars?](../../gantt/taskbar)
+- [How to configure timeline?](../../gantt//timeline/timeline)
+- [How to manage columns?](../../gantt/columns/columns)
\ No newline at end of file
diff --git a/ej2-javascript/gantt/task-scheduling.md b/ej2-javascript/gantt/task-scheduling.md
index 05b46d883..ae0652e71 100644
--- a/ej2-javascript/gantt/task-scheduling.md
+++ b/ej2-javascript/gantt/task-scheduling.md
@@ -33,7 +33,7 @@ The rendering of the parent taskbar in auto-scheduling mode also takes into acco
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/task-schedule-cs1/index.ts %}
 {% endhighlight %}
@@ -64,7 +64,7 @@ When the [taskMode](../api/gantt#taskmode) property is set as `Manual`, the star
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/task-schedule-cs2/index.ts %}
 {% endhighlight %}
@@ -95,7 +95,7 @@ When the [taskMode](../api/gantt#taskmode) property is set as `Custom`, the sche
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/task-schedule-cs3/index.ts %}
 {% endhighlight %}
@@ -124,12 +124,12 @@ When the [taskMode](../api/gantt#taskmode) property is set as `Custom`, the sche
 
 Unscheduled tasks are planned for a project without any definite schedule dates. The Gantt control supports rendering the unscheduled tasks. You can create or update the tasks with anyone of start date, end date, and duration values or none. You can enable or disable the unscheduled tasks by using the [allowUnscheduledTasks](../api/gantt#allowunscheduledtasks) property. The following images represent the various types of unscheduled tasks in Gantt.
 
-Taskbar state |Auto |Manual
------|-----|-----
-`Start Date Only` | ![Alt text](../images/startDate-only.png) | ![Alt text](../images/startDate-manual.png)
-`End Date Only` | ![Alt text](../images/endDate-only.png) | ![Alt text](../images/endDate-manual.png)
-`Duration Only` | ![Alt text](../images/duration-only.png) | ![Alt text](../images/duration-manual.png)
-`Milestone`| ![Alt text](../images/milestone.png) | ![Alt text](../images/milestone.png)
+| Taskbar state     | Auto                                      | Manual                                      |
+| ----------------- | ----------------------------------------- | ------------------------------------------- |
+| `Start Date Only` | ![Alt text](../images/startDate-only.png) | ![Alt text](../images/startDate-manual.png) |
+| `End Date Only`   | ![Alt text](../images/endDate-only.png)   | ![Alt text](../images/endDate-manual.png)   |
+| `Duration Only`   | ![Alt text](../images/duration-only.png)  | ![Alt text](../images/duration-manual.png)  |
+| `Milestone`       | ![Alt text](../images/milestone.png)      | ![Alt text](../images/milestone.png)        |
 
 >Note: A milestone is a task that has no start and end dates, but it has a duration value of zero
 
@@ -139,7 +139,7 @@ You can define the various types of unscheduled tasks in the data source as foll
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/unscheduledTasks-cs2/index.ts %}
 {% endhighlight %}
@@ -175,7 +175,7 @@ The following code snippet explains how to define the working time range for the
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/workingtimerange-cs2/index.ts %}
 {% endhighlight %}
@@ -214,7 +214,7 @@ The following code snippet explains how to define the week working time range fo
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/week-workingtime-cs1/index.ts %}
 {% endhighlight %}
@@ -251,7 +251,7 @@ Non-working days/weekend are used to represent the non-productive days in a proj
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/how-to-changeworkweek-cs2/index.ts %}
 {% endhighlight %}
@@ -298,7 +298,7 @@ The below code snippet explains the mapping of duration unit data source field t
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/durationUnits-cs1/index.ts %}
 {% endhighlight %}
@@ -332,7 +332,7 @@ Duration units for the tasks can also be defined along with the duration values,
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/durationUnits-cs2/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/taskbar.md b/ej2-javascript/gantt/taskbar.md
index d0376bb3b..2914a8231 100644
--- a/ej2-javascript/gantt/taskbar.md
+++ b/ej2-javascript/gantt/taskbar.md
@@ -17,7 +17,7 @@ You can design your own taskbars to view the tasks in Gantt by using [taskbarTem
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/customizations-cs1/index.ts %}
 {% endhighlight %}
@@ -50,7 +50,7 @@ Height of child taskbars and parent taskbars can be customized by using [taskbar
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/appearanceandstyling-cs1/index.ts %}
 {% endhighlight %}
@@ -84,7 +84,7 @@ The default taskbar UI can be replaced with custom templates using the [queryTas
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/appearanceandstyling-cs2/index.ts %}
 {% endhighlight %}
@@ -115,7 +115,7 @@ You can change the gripper icon in the taskbar by applying styles to their respe
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/change-gripper-icon-cs1/index.ts %}
 {% endhighlight %}
@@ -181,7 +181,7 @@ The width and background color of connector lines in Gantt can be customized usi
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/appearanceandstyling-cs3/index.ts %}
 {% endhighlight %}
@@ -217,7 +217,7 @@ In the Gantt control, you can enable or disable the mouse hover tooltip for the
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/gantt-tooltip-cs1/index.ts %}
 {% endhighlight %}
@@ -252,7 +252,7 @@ The default tooltip in the Gantt control can be customized using the [tooltipSet
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/taskbarTooltip-cs1/index.ts %}
 {% endhighlight %}
@@ -283,7 +283,7 @@ The default connector line tooltip in the Gantt control can be customized using
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/connectorLineTooltip-cs1/index.ts %}
 {% endhighlight %}
@@ -314,7 +314,7 @@ A baseline tooltip can be customized using the [tooltipSettings.baseline](../api
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/baselineTooltip-cs1/index.ts %}
 {% endhighlight %}
@@ -345,7 +345,7 @@ A timeline tooltip can be customized using the [tooltipSettings.timeline](../api
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/timelineTooltip-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/timeline/timeline.md b/ej2-javascript/gantt/timeline/timeline.md
index 213920c53..50fb87237 100644
--- a/ej2-javascript/gantt/timeline/timeline.md
+++ b/ej2-javascript/gantt/timeline/timeline.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Timeline in ##Platform_Name## Gantt Control | Syncfusion
-description: Learn here all about timeline in Syncfusion Essential ##Platform_Name## Gantt control, its elements and more.
+title: Timeline in ##Platform_Name## Gantt Chart control | Syncfusion
+description: Learn how to configure timelines in the Syncfusion ##Platform_Name## Gantt Chart control with view modes, zooming, weekend highlighting, and templates.
 platform: ej2-javascript
 control: Timeline 
 publishingplatform: ##Platform_Name##
@@ -9,25 +9,19 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Timeline in ##Platform_Name## Gantt Control
+# Timeline in ##Platform_Name## Gantt Chart Control
 
-In the Gantt control, timeline is used to represent the project duration as individual cells with defined unit and formats.
+The timeline in the ##Platform_Name## Gantt Chart control represents project durations as cells with defined units and formats, supporting in-built view modes like Hour-Minute, Day-Hour, Week-Day, Month-Week, Year-Month, and Minutes for flexible visualization. Configure modes using the [timelineViewMode](../../api/gantt/timelineViewMode) property, with top and bottom tiers customized via [topTier.unit](../../api/gantt/timelineTierSettings#unit) and [bottomTier.unit](../../api/gantt/timelineTierSettings#unit) in [timelineSettings](../../api/gantt/timelineSettings). This enables detailed views, such as weekly overviews with daily breakdowns for projects, ensuring accurate timeline representation.
 
-## Timeline view modes
+## Configure timeline view modes
 
-Gantt contains the following in-built timeline view modes:
+Set the timeline view mode using the [timelineViewMode](../../api/gantt/timelineViewMode) property. This property allows you to switch the timeline between different units such as **Day**, **Week**, **Month**, and **Year**, where the top tier displays a broader unit and the bottom tier displays a finer one.
 
-* Hour
-* Day
-* Week
-* Month
-* Year
-
-Timescale mode in Gantt can be defined by using [timelineViewMode](../../api/gantt/timelineViewMode) property and also we can define timescale mode of top tier and bottom tier by using [topTier.unit](../../api/gantt/timelineTierSettingsModel#unit) and [bottomTier.unit](../../api/gantt/timelineTierSettingsModel#unit) properties.
+When both the `topTier` and `bottomTier` settings are defined, they take precedence over the `timelineViewMode` property. In this case, the `timelineViewMode` value will be ignored. To apply the `timelineViewMode` setting, ensure that `topTier` and `bottomTier` are assigned a null value or not configured.
 
 ### Week timeline mode
 
-In the `Week` timeline mode, the upper part of the schedule header displays the weeks, whereas the bottom half of the header displays the days. Refer to the following code example.
+In Week mode, the top tier shows weeks and the bottom tier days, suitable for short-term project tracking.
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -58,7 +52,7 @@ In the `Week` timeline mode, the upper part of the schedule header displays the
 
 ### Month timeline mode
 
-In the `Month` timeline mode, the upper part of the schedule header displays the months, whereas the bottom header of the schedule displays its corresponding weeks. Refer to the following code example.
+In Month mode, the top tier shows months and the bottom tier weeks, ideal for medium-term planning.
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -89,7 +83,7 @@ In the `Month` timeline mode, the upper part of the schedule header displays the
 
 ### Year timeline mode
 
-In the `Year` timeline mode, the upper schedule header displays the years whereas, the bottom header displays its corresponding months. Refer to the following code example.
+In Year mode, the top tier shows years and the bottom tier months, suitable for long-term projects.
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -120,7 +114,7 @@ In the `Year` timeline mode, the upper schedule header displays the years wherea
 
 ### Day timeline mode
 
-In the `Day` timeline mode, the upper part of the header displays the days whereas, the bottom schedule header displays its corresponding hours. Refer to the following code example.
+In Day mode, the top tier shows days and the bottom tier hours, ideal for detailed daily scheduling.
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -151,7 +145,7 @@ In the `Day` timeline mode, the upper part of the header displays the days where
 
 ### Hour timeline mode
 
-An `Hour` timeline mode tracks the tasks in minutes scale. In this mode, the upper schedule header displays hour scale and the lower schedule header displays its corresponding minutes.
+In Hour mode, the top tier shows hours and the bottom tier minutes, perfect for minute-level task tracking.
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -180,6 +174,9 @@ An `Hour` timeline mode tracks the tasks in minutes scale. In this mode, the upp
 {% previewsample "page.domainurl/code-snippet/gantt/timeline-cs5" %}
 {% endif %}
 
+<<<<<<< HEAD
+### Minutes timeline mode
+=======
 ## Timeline view dates
 
 The Gantt Chart control supports rendering a fixed timeline range using the [viewStartDate](../../api/gantt/timelineSettings#viewStartDate) and [viewEndDate](../../api/gantt/timelineSettings#viewEndDate) properties. These properties allow the visible portion of the timeline to be explicitly defined and locked within the Gantt chart UI, independent of the project's overall scheduling boundaries defined by [projectStartDate](https://ej2.syncfusion.com/angular/documentation/api/gantt/index-default#projectstartdate) and [projectEndDate](https://ej2.syncfusion.com/angular/documentation/api/gantt/index-default#projectenddate). The `projectStartDate` and `projectEndDate` values represent the full scheduling window for the project and are used for baseline processing, critical-path calculations, and project-level reporting. By default, both `viewStartDate` and `viewEndDate` are set to **auto**. The following example demonstrates how to configure a custom timeline view range.
@@ -226,8 +223,87 @@ When `viewStartDate` and `viewEndDate` are set to concrete Date values, the time
 > Note: The `ZoomToFit` feature uses `projectStartDate` and `projectEndDate` to fit the entire project within the available timeline viewport.
 
 ## Week start day customization
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 
-In the Gantt control, you can customize the week start day using the [weekStartDay](../../api/gantt/timelineSettings#weekstartday) property. By default, the [weekStartDay](../../api/gantt/timelineSettings#weekstartday) is set to 0, which specifies the Sunday as a start day of the week. But, you can customize the week start day by using the following code example.
+In Minutes timeline mode, the tier displays minute-level intervals, ideal for tracking short-duration tasks with high precision.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/timeline-cs13/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/timeline-cs13/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/timeline-cs13" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/timeline-cs13/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/timeline-cs13/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/timeline-cs13" %}
+{% endif %}
+
+## Timeline view dates
+
+The Gantt Chart control supports rendering a fixed timeline range using the [viewStartDate](../../api/gantt/timelineSettings#viewStartDate) and [viewEndDate](../../api/gantt/timelineSettings#viewEndDate) properties. These properties allow the visible portion of the timeline to be explicitly defined and locked within the Gantt chart UI, independent of the project's overall scheduling boundaries defined by [projectStartDate](../../api/gantt/index-default#projectstartdate) and [projectEndDate](../../api/gantt/index-default#projectenddate). The `projectStartDate` and `projectEndDate` values represent the full scheduling window for the project and are used for baseline processing, critical-path calculations, and project-level reporting. By default, both `viewStartDate` and `viewEndDate` are set to **auto**. The following example demonstrates how to configure a custom timeline view range.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/timeline-cs12/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/timeline-cs12/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/timeline-cs12" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/timeline-cs12/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/timeline-cs12/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/timeline-cs12" %}
+{% endif %}
+	
+**Key behaviors**
+
+When `viewStartDate` and `viewEndDate` are set to concrete Date values, the timeline rendering is restricted to the inclusive range [viewStartDate, viewEndDate].
+
+* When `viewStartDate` is set to **auto**:
+  * If `projectStartDate` is defined, the timeline begins at `projectStartDate`.
+  * If `projectStartDate` is not defined, the earliest task start date is used as the beginning of the visible range.
+
+* When `viewEndDate` is set to **auto**: 
+  * If `projectEndDate` is defined, the timeline ends at `projectEndDate`.
+  * If `projectEndDate` is not defined, the maximum task end date is used. If this end date leaves visible white-space in the timeline area, the end date is automatically extended to fill the chart width.
+
+> Note: The `ZoomToFit` feature uses `projectStartDate` and `projectEndDate` to fit the entire project within the available timeline viewport.
+
+## Customize week start day
+
+In the Gantt Chart control, you can customize the starting day of the week using the [weekStartDay](../../api/gantt/timelineSettings#weekstartday) property. By default, the `weekStartDay` value is set to **0**, which specifies **Sunday** as the first day of the week. You can change this value to any number from **0 to 6** to set a different start day.
+
+The `weekStartDay` property will take effect only when the timeline displays weeks. To enable this, set the [timelineViewMode](../../api/gantt/timelineviewmode) to **Week**, or configure `topTier.unit` as **Week** and `bottomTier.unit` as **Day**.
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -258,7 +334,7 @@ In the Gantt control, you can customize the week start day using the [weekStartD
 
 ## Customize automatic timescale update action
 
-In the Gantt control, the schedule timeline will be automatically updated when the tasks date values are updated beyond the project start date and end date ranges. This can be enabled or disabled using the [updateTimescaleView](../../api/gantt/timelineSettings#updatetimescaleview) property.
+In the Gantt Chart control, the schedule timeline will be automatically updated when the tasks date values are updated beyond the project start date and end date ranges. This can be enabled or disabled using the [updateTimescaleView](../../api/gantt/timelineSettings#updatetimescaleview) property.
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -287,9 +363,40 @@ In the Gantt control, the schedule timeline will be automatically updated when t
 {% previewsample "page.domainurl/code-snippet/gantt/timeline-cs7" %}
 {% endif %}
 
+## Dynamically change timeline mode
+
+You can dynamically change the timeline mode in the Gantt Chart by updating the [timelineSettings.timelineViewMode](../../api/gantt/timelineViewMode) property using the [change](../../api/combo-box/index-default#change) event of the [ComboBox](../../combo-box/getting-started) control.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/timeline-cs14/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/timeline-cs14/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/timeline-cs14" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/timeline-cs14/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/timeline-cs14/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/timeline-cs14" %}
+{% endif %}
+
 ## Timeline cells tooltip
 
-In the Gantt control, you can enable or disable the mouse hover tooltip of timeline cells using the [timelineSettings.showTooltip](../api/gantt/timelinesettings#showtooltip) property. The default value of this property is true. The following code example shows how to enable the timeline cells tooltip in Gantt.
+In the Gantt Chart control, you can enable or disable the mouse hover tooltip of timeline cells using the [timelineSettings.showTooltip](../../api/gantt/timelineSettings#showtooltip) property. The default value of this property is **true**.
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -318,11 +425,9 @@ In the Gantt control, you can enable or disable the mouse hover tooltip of timel
 {% previewsample "page.domainurl/code-snippet/gantt/gantt-tooltip-cs2" %}
 {% endif %}
 
-## Show/hide weekends
-
-The [timelineSettings.showWeekend](../../api/gantt/timelineSettings#showWeekend) property is used to customize the timeline in the Gantt component by controlling the visibility of weekends. To exclude weekends from the timeline, set the `showWeekend` property to `false` in the `timelineSettings` configuration. This feature is particularly useful for focusing the timeline on working days, enhancing project management efficiency by hiding weekends from the view.
+## Highlight weekends
 
->Note: To customize non-working or weekend days in the Gantt chart, refer to the [workWeek](../../gantt/task-scheduling#weekendnon-working-days) documentation for detailed information.
+Highlight weekends by setting [showWeekend](../../api/gantt/timelineSettings#showweekend) to **true** and [workWeek](../../api/gantt#workweek) to define weekdays, aiding in identifying non-working days in a project schedule.
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -351,15 +456,50 @@ The [timelineSettings.showWeekend](../../api/gantt/timelineSettings#showWeekend)
 {% previewsample "page.domainurl/code-snippet/gantt/timeline-showweekend-cs1" %}
 {% endif %}
 
-> Limitations
->* The `showWeekend` feature does not support baselines.
->* The `showWeekend` is not compatible with the manual task mode.
->* Non-working hours cannot be excluded when `showWeekend` is set to false.
->* Holidays are not excluded from the timeline if `showWeekend` is set to false.
+**Limitations:**
+
+* The `showWeekend` feature does not support baselines and not compatible with the manual task mode.
+* Non-working hours cannot be excluded when `showWeekend` is set to **false**.
+* Holidays are not excluded from the timeline if `showWeekend` is set to **false**.
+
+## Navigating Gantt Chart Timeline
+
+You can adjust the Gantt Chart view by shifting the timeline forward or backward by one unit using the following methods:
+
+- [previousTimeSpan](../../api/gantt/index-default#previoustimespan): Moves the timeline backward by one unit from the current start point.
+
+- [nextTimeSpan](../../api/gantt/index-default#nexttimespan): Moves the timeline forward by one unit from the current end point.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/gantt/timeline-cs15/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/timeline-cs15/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/gantt/timeline-cs15" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/gantt/timeline-cs15/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/gantt/timeline-cs15/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/gantt/timeline-cs15" %}
+{% endif %}
 
 ## Timeline template
 
-In the Gantt component, you can customize timeline cells using the [timelineTemplate](../../api/gantt#timelineTemplate) property, allowing for the customization of HTML content within timeline cells. This feature enhances the visual appeal and enables personalized functionality.
+In the Gantt Chart control, you can customize timeline cells using the [timelineTemplate](../../api/gantt#timelineTemplate) property, allowing for the customization of HTML content within timeline cells. This feature enhances the visual appeal and enables personalized functionality.
 
 When designing the timeline cells, you can utilize the following context properties within the template:
 
@@ -394,4 +534,9 @@ The following code example how to customize the top tier to display the week's w
 {% endtabs %}
 
 {% previewsample "page.domainurl/code-snippet/gantt/gantt-tooltip-cs4" %}
-{% endif %}
\ No newline at end of file
+{% endif %}
+
+## See also
+- [How to configure taskbars?](../../gantt/taskbar)
+- [How to zoom the timeline?](../../gantt/timeline/zooming)
+- [How to configure non-working days?](../../gantt/scheduling-tasks#weekendnon-working-days)
\ No newline at end of file
diff --git a/ej2-javascript/gantt/timeline/top-tier-and-bottom-tier.md b/ej2-javascript/gantt/timeline/top-tier-and-bottom-tier.md
index 0602945ec..71d82078b 100644
--- a/ej2-javascript/gantt/timeline/top-tier-and-bottom-tier.md
+++ b/ej2-javascript/gantt/timeline/top-tier-and-bottom-tier.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Top tier and bottom tier in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Top tier and bottom tier in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Top tier and bottom tier in ##Platform_Name## Gantt Chart Control | Syncfusion
+description: Learn how to configure top and bottom tiers in the Syncfusion ##Platform_Name## Gantt Chart Control using timeline settings such as unit, format, count, and formatter.
 platform: ej2-javascript
 control: Top tier and bottom tier 
 publishingplatform: ##Platform_Name##
@@ -9,13 +9,21 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Top tier and bottom tier in ##Platform_Name## Gantt control
+# Top Tier and Bottom Tier in ##Platform_Name## Gantt Chart Control
 
-Gantt control contains two tier layout in timeline, we can customize the top tier and bottom tier using [topTier](../../api/gantt/timelineSettings#toptier) and [bottomTier](../../api/gantt/timelineSettings#bottomtier) properties. Timeline tier's unit can be defined by using [unit](../../api/gantt/timelineTierSettings#unit) property and [format](../../api/gantt/timelineTierSettings#format) property was used to define date format of timeline cell and [count](../../api/gantt/timelineTierSettings#count) property was used to define how many unit will be combined as single cell and [formatter](../../api/gantt/timelineTierSettings#formatter) property was used to define custom method to format the date value of timeline cell.
+The ##Platform_Name## Gantt Chart control supports a two-tier timeline layout, enabling customization of both the top and bottom tiers through specific configuration options.
+
+- [topTier](../../api/gantt/timelineSettings#toptier) and [bottomTier](../../api/gantt/timelineSettings#bottomtier): Define the structure and visibility of each timeline tier.
+- [unit](../../api/gantt/timelineTierSettings#unit): Specifies the time unit for each tier, such as day, week, or month.
+- [format](../../api/gantt/timelineTierSettings#format): Determines the date format displayed in timeline cells.
+- [count](../../api/gantt/timelineTierSettings#count): Combines multiple time units into a single timeline cell.
+- [formatter](../../api/gantt/timelineTierSettings#formatter): Applies a custom method to format the timeline cell values programmatically.
+
+These properties allow precise control over how time intervals are displayed, enhancing the readability and usability of the Gantt chart across various project scales.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/timeline-cs8/index.ts %}
 {% endhighlight %}
@@ -42,11 +50,16 @@ Gantt control contains two tier layout in timeline, we can customize the top tie
 
 ## Combining timeline cells
 
-In Gantt, timeline cells in top tier and bottom tier can be combined with number of timeline units, this can be acheived by using [topTier.count](../../api/gantt/timelineTierSettings#count) and [bottomTier.count](../../api/gantt/timelineTierSettings#count) properties. Please refer the below sample.
+In the ##Platform_Name## Gantt Chart control, timeline cells in the top and bottom tiers can be merged by grouping multiple time units into a single cell. This behavior is controlled using the `count` property in both `topTier` and `bottomTier` configurations.
+
+- [topTier.count](../../api/gantt/timelineTierSettings#count): Specifies the number of time units to combine in each top-tier cell.
+- [bottomTier.count](../../api/gantt/timelineTierSettings#count): Specifies the number of time units to combine in each bottom-tier cell.
+
+By adjusting these values, the timeline can display broader or more granular intervals, improving visibility for long-term or short-term project views.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/timeline-cs9/index.ts %}
 {% endhighlight %}
@@ -73,7 +86,23 @@ In Gantt, timeline cells in top tier and bottom tier can be combined with number
 
 ## Format value of timeline cell
 
-In the Gantt control, you can format the value of top and bottom timeline cells using the standard date format string or the custom formatter method. This can be done using the [topTier.format](../../api/gantt/timelineTierSettings#format), [topTier.formatter](../../api/gantt/timelineTierSettings#formatter), [bottomTier.format](../../api/gantt/timelineTierSettings#format) and [bottomTier.formatter](../../api/gantt/timelineTierSettings#formatter) properties. The following example shows how to use the formatter method for timeline cells.
+In the ##Platform_Name## Gantt Chart control, the values displayed in the top and bottom timeline cells can be formatted using either standard date format strings or custom formatter methods.
+
+- [topTier.format](../../api/gantt/timelineTierSettings#format) and [bottomTier.format](../../api/gantt/timelineTierSettings#format): Define the date format for timeline cells using predefined format strings.
+- [topTier.formatter](../../api/gantt/timelineTierSettings#formatter) and [bottomTier.formatter](../../api/gantt/timelineTierSettings#formatter): Apply custom logic to format timeline cell values programmatically.
+
+**Formatter Function Parameters:**
+
+The [formatter](https://ej2.syncfusion.com/documentation/api/gantt/itimelineformatter) function supports the following parameters:
+
+| Parameter | Description                                                      |
+| --------- | ---------------------------------------------------------------- |
+| date      | The current date value for the cell.                             |
+| format    | The date format string applied to the cell.                      |
+| tier      | Indicates whether the cell belongs to the topTier or bottomTier. |
+| mode      | Specifies the rendering mode (Year, Month, Week, or Day).        |
+
+The following example shows how to use the `formatter` function with all four parameters `date`, `format`, `tier`, and `mode`:
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -104,11 +133,18 @@ In the Gantt control, you can format the value of top and bottom timeline cells
 
 ## Timeline cell width
 
-In the Gantt control, you can define the width value of timeline cell using the [timelineSettings.timelineUnitSize](../../api/gantt/timelineSettings#timelineunitsize) property. This value will be set to the bottom timeline cell, and the width value of top timeline cell will be calculated automatically based on bottom tier cell width using the [topTier.unit](../../api/gantt/timelineTierSettings#unit) and [timelineSettings.timelineUnitSize](../../api/gantt/timelineSettings#timelineunitsize) properties. Refer to the following example.
+In the ##Platform_Name## Gantt Chart control, the width of timeline cells can be configured using the [timelineSettings.timelineUnitSize](../../api/gantt/timelineSettings#timelineunitsize) property within `timelineSettings`. This value directly sets the width of the bottom tier cells.
+
+The width of the top tier cells is automatically calculated based on the bottom tier's unit and the specified `timelineUnitSize`. This ensures consistent scaling across both tiers while maintaining clarity in the timeline view.
+
+- [timelineSettings.timelineUnitSize](../../api/gantt/timelineSettings#timelineunitsize): Defines the pixel width of each bottom-tier timeline cell.
+- [topTier.unit](../../api/gantt/timelineTierSettings#unit): Determines how the top-tier cell width is derived relative to the bottom tier.
+
+This configuration allows precise control over the visual density of the timeline, supporting both detailed and high-level project views.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/timeline-cs11/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/timeline/zooming.md b/ej2-javascript/gantt/timeline/zooming.md
index b01d9e0f2..b053015a4 100644
--- a/ej2-javascript/gantt/timeline/zooming.md
+++ b/ej2-javascript/gantt/timeline/zooming.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Zooming in ##Platform_Name## Gantt control | Syncfusion
-description: Learn here all about Zooming in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
+title: Zooming functionality in ##Platform_Name## Gantt Chart Control | Syncfusion
+description: Explore zooming options in the Syncfusion ##Platform_Name## Gantt Chart control, including Zoom In, Zoom Out, Zoom To Fit, and custom zooming levels.
 platform: ej2-javascript
 control: Zooming 
 publishingplatform: ##Platform_Name##
@@ -9,25 +9,27 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Zooming in ##Platform_Name## Gantt control
+# Zooming Functionality in ##Platform_Name## Gantt Chart Control
 
-The zooming support provides options to increase or decrease the width of timeline cells and also provides options to change the timeline units dynamically. This support enables you to view the tasks in a project clearly from minute to decade timespan. To enable the zooming features, define the `ZoomIn`, `ZoomOut`, and `ZoomToFit` items to toolbar items collections, and this action can be performed on external actions such as button click using the [zoomIn](../../api/gantt#zoomin), [zoomOut](../../api/gantt#zoomout), and [fitToProject](../../api/gantt#fittoproject) built-in methods. The following zooming options are available to view the project:
+The ##Platform_Name## Gantt Chart control provides zooming support to adjust the timeline view dynamically. This includes increasing or decreasing the width of timeline cells and changing the timeline units to view tasks across various timespan from minutes to decades.
 
-## Zoom in
+To enable zooming features, add `ZoomIn`, `ZoomOut`, and `ZoomToFit` to the toolbar items collection. These actions can also be triggered externally using the built-in methods like [zoomIn](../../api/gantt#zoomin), [zoomOut](../../api/gantt#zoomout), and [fitToProject](../../api/gantt#fittoproject).
+
+**Zoom in**
 
 This support is used to increase the timeline width and timeline unit from years to minutes timespan. When the `ZoomIn` icon was clicked, the timeline cell width is increased when the cell size exceeds the specified range and the timeline unit is changed based on the current zoom levels.
 
-## Zoom out
+**Zoom out**
 
 This support is used to increase the timeline width and timeline unit from minutes to years timespan. When the `ZoomOut` icon was clicked, the timeline cell width is decreased when the cell size falls behind the specified range and the timeline view mode is changed based on the current zooming levels.
 
-## Zoom to fit
+**Zoom to fit**
 
 This support is used to view all the tasks available in a project within available area on the chart part of Gantt. When users click the `ZoomToFit` icon, then all the tasks are rendered within the available chart container width.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/zooming-cs1/index.ts %}
 {% endhighlight %}
@@ -54,11 +56,11 @@ This support is used to view all the tasks available in a project within availab
 
 ## Customizing zooming levels
 
-In Gantt, the zoom in and zoom out actions are performed based on the predefined zooming levels in the `zoomingLevels` property. You can customize the zooming actions by defining the required zooming collection to the `zoomingLevels` property.
+Zoom actions are governed by predefined zooming levels specified in the [zoomingLevels](../../api/gantt#zoominglevels) property. These levels can be customized by assigning a collection of zoom configurations to the `zoomingLevels` property.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/zooming-cs2/index.ts %}
 {% endhighlight %}
@@ -83,12 +85,13 @@ In Gantt, the zoom in and zoom out actions are performed based on the predefined
 {% previewsample "page.domainurl/code-snippet/gantt/zooming-cs2" %}
 {% endif %}
 
-## Zoom action by methods
+## Zoom actions via methods
+
+Zooming actions can be triggered dynamically or through external controls using the following methods:
 
-You can perform the various zoom actions dynamically or on external click action using the following methods:
-* Zoom in - [zoomIn](../../api/gantt#zoomin)
-* Zoom out - [zoomOut](../../api/gantt#zoomout)
-* Fit to project - [fitToProject](../../api/gantt#fittoproject)
+* **Zoom In** - Use [zoomIn](../../api/gantt#zoomin) when `ZoomIn` external button was clicked, the timeline cell width is increased when the cell size exceeds the specified range and the timeline unit is changed based on the current zoom levels.
+* **Zoom Out** - Use [zoomOut](../../api/gantt#zoomout) when the `ZoomOut` external button was clicked, the timeline cell width is decreased when the cell size falls behind the specified range and the timeline view mode is changed based on the current zooming levels.
+* **Zoom To Fit** - Use [fitToProject](../../api/gantt#fittoproject) When `ZoomToFit` external button was clicked then all the tasks are rendered within the available chart container width.
 
 {% if page.publishingplatform == "typescript" %}
 
diff --git a/ej2-javascript/gantt/timezone.md b/ej2-javascript/gantt/timezone.md
index eb1d5dd9e..a0e826652 100644
--- a/ej2-javascript/gantt/timezone.md
+++ b/ej2-javascript/gantt/timezone.md
@@ -23,7 +23,7 @@ Setting `timezone` to UTC for Gantt will display the same time as in the databas
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/timezone-cs1/index.ts %}
 {% endhighlight %}
@@ -53,7 +53,7 @@ Setting `timezone` to UTC for Gantt will display the same time as in the databas
 CRUD operations can be performed with timezone and the Gantt is rendered based on the timezone specified in the load time. All the editing actions will be done based on the user timezone, but on database save action, we have reversed this conversion to local time and provided data to client-side events for better understanding. Refer to the following code example.
  {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/timezone-cs2/index.ts %}
 {% endhighlight %}
@@ -84,10 +84,10 @@ CRUD operations can be performed with timezone and the Gantt is rendered based o
 
 This method is used to calculate the difference between the passed UTC date and timezone.
 
-| Parameters | Type | Description |
-|------------|------|-------------|
-| Date | Date | UTC time as date object.|
-| Timezone | String | Timezone.|
+| Parameters | Type   | Description              |
+| ---------- | ------ | ------------------------ |
+| Date       | Date   | UTC time as date object. |
+| Timezone   | String | Timezone.                |
 
 Returns `number`
 
@@ -103,11 +103,11 @@ Returns `number`
 
 This method is used to convert the passed date from one timezone to another.
 
-| Parameters | Type | Description |
-|------------|------|-------------|
-| Date | Date | UTC time as date object.|
-| fromOffset | number/string | Timezone from which date needs to be converted.|
-| toOffset | number/string | Timezone to which date needs to be converted.|
+| Parameters | Type          | Description                                     |
+| ---------- | ------------- | ----------------------------------------------- |
+| Date       | Date          | UTC time as date object.                        |
+| fromOffset | number/string | Timezone from which date needs to be converted. |
+| toOffset   | number/string | Timezone to which date needs to be converted.   |
 
 Returns `Date`
 
@@ -125,10 +125,10 @@ Returns `Date`
 
 This method is used to remove the time difference between passed UTC date and timezone.
 
-| Parameters | Type | Description |
-|------------|------|-------------|
-| Date | Date | UTC as date object.|
-| Timezone | String | Timezone.|
+| Parameters | Type   | Description         |
+| ---------- | ------ | ------------------- |
+| Date       | Date   | UTC as date object. |
+| Timezone   | String | Timezone.           |
 
 Returns `Date`
 
diff --git a/ej2-javascript/gantt/tool-bar.md b/ej2-javascript/gantt/tool-bar.md
index 61a7fc635..06494fb01 100644
--- a/ej2-javascript/gantt/tool-bar.md
+++ b/ej2-javascript/gantt/tool-bar.md
@@ -19,20 +19,20 @@ Built-in toolbar items allow you to perform standard operations directly from th
 
 The following table shows built-in toolbar items and its actions.
 
-| Built-in Toolbar Items | Actions |
-|------------------------|---------|
-| ExpandAll | Expands all the rows.|
-| CollapseAll | Collapses all the rows.|
-| Add | Adds a new record.|
-| Edit | Edits the selected record.|
-| Indent | Indent the selected record to one level.|
-| Outdent | Outdents the selected record to one level.|
-| Update | Updates the edited record.|
-| Delete | Deletes the selected record.|
-| Cancel | Cancels the edit state.|
-| Search | Searches the records by the given key.|
-| PrevTimeSpan | Navigate the Gantt timeline to previous time span.|
-| NextTimeSpan | Navigate the Gantt timeline to Next time span.|
+| Built-in Toolbar Items | Actions                                            |
+| ---------------------- | -------------------------------------------------- |
+| ExpandAll              | Expands all the rows.                              |
+| CollapseAll            | Collapses all the rows.                            |
+| Add                    | Adds a new record.                                 |
+| Edit                   | Edits the selected record.                         |
+| Indent                 | Indent the selected record to one level.           |
+| Outdent                | Outdents the selected record to one level.         |
+| Update                 | Updates the edited record.                         |
+| Delete                 | Deletes the selected record.                       |
+| Cancel                 | Cancels the edit state.                            |
+| Search                 | Searches the records by the given key.             |
+| PrevTimeSpan           | Navigate the Gantt timeline to previous time span. |
+| NextTimeSpan           | Navigate the Gantt timeline to Next time span.     |
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -302,11 +302,11 @@ You can control toolbar items dynamically using the [enableItems](../api/gantt#e
 
 You can enhance the Gantt toolbar component by adding editor elements such as numeric text boxes, drop-down lists, and date pickers. These input controls improve user interaction by enabling filtering, searching, and other dynamic actions.
 
-The following example demonstrates how to integrate an [AutoComplete](https://ej2.syncfusion.com/angular/documentation/auto-complete/getting-started) compoenent into the toolbar.
+The following example demonstrates how to integrate an [AutoComplete](../../auto-complete/getting-started) compoenent into the toolbar.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/customToolbarItems-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/undo-redo.md b/ej2-javascript/gantt/undo-redo.md
index 2acc01220..de28c401c 100644
--- a/ej2-javascript/gantt/undo-redo.md
+++ b/ej2-javascript/gantt/undo-redo.md
@@ -34,32 +34,32 @@ The [undoRedoStepsCount](../api/gantt#undoredostepscount) property sets the acti
 
 By default, all the gantt features listed in the below table will be restored for undo and redo actions. However, you have the option to specify only the required actions to be restored using [undoRedoActions](../api/gantt#undoredoactions) property.
 
-| Built-in Undo Redo Items | Actions |
-|------------------------|---------|
-| Edit | Undo redo actions can be performed for edited record.|
-| Delete | Undo redo actions can be performed for deleted record.|
-| Add | Undo redo actions can be performed for newly added record.|
-| ColumnReorder | Undo redo actions can be performed for reordered column.|
-| Indent | Undo redo actions can be performed for indented record.|
-| Outdent | Undo redo actions can be performed for outdented record.|
-| ColumnResize | Undo redo actions can be performed for resized column.|
-| Sorting | Undo redo actions can be performed for sorted column.|
-| Filtering | Undo redo actions can be performed for filtered record.|
-| Search | Undo redo actions can be performed for searched value.|
-| ZoomIn | Undo redo actions can be performed for zoomIn action.|
-| ZoomOut | Undo redo actions can be performed for zoomOut action.|
-| ZoomToFit | Undo redo actions can be performed for zoomToFit action.|
-| ColumnState | Undo redo actions can be performed for hided or shown columns.|
-| RowDragAndDrop | Undo redo actions can be performed for row drag and drop.|
-| TaskbarDragAndDrop |  Undo redo actions can be performed for taskbar drag and drop.|
-| PreviousTimeSpan | Undo redo actions can be performed for previous time span acton.|
-| NextTimeSpan | Undo redo actions can be performed for next time span action.|
+| Built-in Undo Redo Items | Actions                                                          |
+| ------------------------ | ---------------------------------------------------------------- |
+| Edit                     | Undo redo actions can be performed for edited record.            |
+| Delete                   | Undo redo actions can be performed for deleted record.           |
+| Add                      | Undo redo actions can be performed for newly added record.       |
+| ColumnReorder            | Undo redo actions can be performed for reordered column.         |
+| Indent                   | Undo redo actions can be performed for indented record.          |
+| Outdent                  | Undo redo actions can be performed for outdented record.         |
+| ColumnResize             | Undo redo actions can be performed for resized column.           |
+| Sorting                  | Undo redo actions can be performed for sorted column.            |
+| Filtering                | Undo redo actions can be performed for filtered record.          |
+| Search                   | Undo redo actions can be performed for searched value.           |
+| ZoomIn                   | Undo redo actions can be performed for zoomIn action.            |
+| ZoomOut                  | Undo redo actions can be performed for zoomOut action.           |
+| ZoomToFit                | Undo redo actions can be performed for zoomToFit action.         |
+| ColumnState              | Undo redo actions can be performed for hided or shown columns.   |
+| RowDragAndDrop           | Undo redo actions can be performed for row drag and drop.        |
+| TaskbarDragAndDrop       | Undo redo actions can be performed for taskbar drag and drop.    |
+| PreviousTimeSpan         | Undo redo actions can be performed for previous time span acton. |
+| NextTimeSpan             | Undo redo actions can be performed for next time span action.    |
 
 In the following code example, **Edit** and **Delete** actions are specified in `undoRedoActions` property.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/undo-redo-cs1/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/virtual-scroll.md b/ej2-javascript/gantt/virtual-scroll.md
index d4492b3a7..3e6615620 100644
--- a/ej2-javascript/gantt/virtual-scroll.md
+++ b/ej2-javascript/gantt/virtual-scroll.md
@@ -23,7 +23,7 @@ This mode can be enable by setting the `enableVirtualization` property to `true`
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/virtual-scroll-cs3/index.ts %}
 {% endhighlight %}
diff --git a/ej2-javascript/gantt/work.md b/ej2-javascript/gantt/work.md
index fd087b84e..6599e98f9 100644
--- a/ej2-javascript/gantt/work.md
+++ b/ej2-javascript/gantt/work.md
@@ -19,7 +19,7 @@ The work is the total hours required to complete a task. Work can be mapped from
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/work-cs1/index.ts %}
 {% endhighlight %}
@@ -54,7 +54,7 @@ The work, duration and resource unit fields of a task depends upon each other an
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/gantt/work-cs2/index.ts %}
 {% endhighlight %}
@@ -81,10 +81,10 @@ The work, duration and resource unit fields of a task depends upon each other an
 
 Following table explains how the work, duration and resource unit fields will gets updated on changing any of the fields
 
-Task Type | Changes in Duration | Changes in work | Changes in Resource Units
------|-----|-----|-----
-Fixed Duration | Work field updates | Resource unit updates| Work field updates
-Fixed Work | Resource unit updates.Note: For manually scheduled task work will update.| Duration field updates. Note: For manually scheduled task resource unit updates. |Duration will update. Note: For manually scheduled task work field updates.
-Fixed Unit | Work field updates | Duration field updates. Note: For manually scheduled task resource unit updates.| Duration will update. Note: For manually scheduled task work field updates.
+| Task Type      | Changes in Duration                                                       | Changes in work                                                                  | Changes in Resource Units                                                   |
+| -------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| Fixed Duration | Work field updates                                                        | Resource unit updates                                                            | Work field updates                                                          |
+| Fixed Work     | Resource unit updates.Note: For manually scheduled task work will update. | Duration field updates. Note: For manually scheduled task resource unit updates. | Duration will update. Note: For manually scheduled task work field updates. |
+| Fixed Unit     | Work field updates                                                        | Duration field updates. Note: For manually scheduled task resource unit updates. | Duration will update. Note: For manually scheduled task work field updates. |
 
 >Note: 1. Fixed Unit is the default taskType in Gantt. 2. The above calculations are not applicable for Milestones.
\ No newline at end of file
diff --git a/ej2-javascript/inline-ai-assist/inline-assist.md b/ej2-javascript/inline-ai-assist/inline-assist.md
new file mode 100644
index 000000000..47109628c
--- /dev/null
+++ b/ej2-javascript/inline-ai-assist/inline-assist.md
@@ -0,0 +1,231 @@
+---
+layout: post
+title: Inline assist configurations in ##Platform_Name## Inline AI Assist control | Syncfusion
+description: Checkout and learn about inline assist with ##Platform_Name## Inline AI Assist control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Inline AI Assist
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Inline assist configurations in ##Platform_Name## Inline AI Assist control
+
+## Setting prompt text
+
+You can use the [prompt](../api/inline-ai-assist#prompt) property to define the prompt text for the Inline AI Assist control.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/inline-ai-assist/inline-assist/prompt/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/inline-ai-assist/inline-assist/prompt/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/inline-ai-assist/inline-assist/prompt" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/inline-ai-assist/inline-assist/prompt/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/inline-ai-assist/inline-assist/prompt/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/inline-ai-assist/inline-assist/prompt" %}
+{% endif %}
+
+## Setting prompt placeholder
+
+You can use the [placeholder](../api/inline-ai-assist#placeholder) property to set the placeholder text for the prompt textarea. The default value is `Ask or generate AI content..`.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/inline-ai-assist/inline-assist/placeholder/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/inline-ai-assist/inline-assist/placeholder/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/inline-ai-assist/inline-assist/placeholder" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/inline-ai-assist/inline-assist/placeholder/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/inline-ai-assist/inline-assist/placeholder/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/inline-ai-assist/inline-assist/placeholder" %}
+{% endif %}
+
+## Prompt-response collection
+
+You can use the [prompts](../api/inline-ai-assist#prompts) property to retrieve the responses for the associated prompts.
+
+> The `prompts` collection stores all the prompts and responses generated.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/inline-ai-assist/inline-assist/prompts/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/inline-ai-assist/inline-assist/prompts/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/inline-ai-assist/inline-assist/prompts" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/inline-ai-assist/inline-assist/prompts/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/inline-ai-assist/inline-assist/prompts/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/inline-ai-assist/inline-assist/prompts" %}
+{% endif %}
+
+## Setting z-index
+
+You can use the [zIndex](../api/inline-ai-assist#zindex) property to set z-index for the Inline AI Assist popup. The default value is `1000`.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/inline-ai-assist/inline-assist/z-index/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/inline-ai-assist/inline-assist/z-index/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/inline-ai-assist/inline-assist/z-index" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/inline-ai-assist/inline-assist/z-index/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/inline-ai-assist/inline-assist/z-index/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/inline-ai-assist/inline-assist/z-index" %}
+{% endif %}
+
+## Setting popup width
+
+You can use the [popupWidth](../api/inline-ai-assist#popupWidth) property to set the width of the Inline AI Assist. The default value is `400px`.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/inline-ai-assist/inline-assist/width/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/inline-ai-assist/inline-assist/width/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/inline-ai-assist/inline-assist/width" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/inline-ai-assist/inline-assist/width/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/inline-ai-assist/inline-assist/width/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/inline-ai-assist/inline-assist/width" %}
+{% endif %}
+
+## Setting popup height
+
+You can use the [popupHeight](../api/inline-ai-assist#popupHeight) property to set the height of the Inline AI Assist. The default value is `auto`.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/inline-ai-assist/inline-assist/height/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/inline-ai-assist/inline-assist/height/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/inline-ai-assist/inline-assist/height" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/inline-ai-assist/inline-assist/height/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/inline-ai-assist/inline-assist/height/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/inline-ai-assist/inline-assist/height" %}
+{% endif %}
+
+## cssClass
+
+You can customize the appearance of the Inline AI Assist control by using the [cssClass](../api/inline-ai-assist#cssclass) property.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/inline-ai-assist/inline-assist/cssclass/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/inline-ai-assist/inline-assist/cssclass/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/inline-ai-assist/inline-assist/cssclass" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/inline-ai-assist/inline-assist/cssclass/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/inline-ai-assist/inline-assist/cssclass/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/inline-ai-assist/inline-assist/cssclass" %}
+{% endif %}
diff --git a/ej2-javascript/inline-ai-assist/js/es5-getting-started.md b/ej2-javascript/inline-ai-assist/js/es5-getting-started.md
index 9c96e63bb..ec92cfbe3 100644
--- a/ej2-javascript/inline-ai-assist/js/es5-getting-started.md
+++ b/ej2-javascript/inline-ai-assist/js/es5-getting-started.md
@@ -45,9 +45,9 @@ The JavaScript (ES5) Inline AI Assist control can be initialized by using either
 >
 > Control Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js`
 >
-> Dependency Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\styles\material.css`
+> Dependency Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\styles\tailwind3.css`
 >
-> Control Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\material.css`
+> Control Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\tailwind3.css`
 
 **Example:**
 
@@ -55,15 +55,15 @@ The JavaScript (ES5) Inline AI Assist control can be initialized by using either
 >
 > Control Script: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-interactive-chat\dist\global\ej2-interactive-chat.min.js`
 >
-> Dependency Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-base\styles\material.css`
+> Dependency Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-base\styles\tailwind3.css`
 >
-> Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-interactive-chat\styles\material.css`
+> Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-interactive-chat\styles\tailwind3.css`
 
 The below located script and style file contains all Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript (ES5) UI control resources in a single file.
 
 > Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js`
 >
-> Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\material.css`
+> Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\tailwind3.css`
 
 The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an online web tool, which can be used to generate the custom script and styles for a set of specific controls. This web tool is useful to combine the required control scripts and styles in a single file.
 
@@ -77,13 +77,13 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin
        <head>
             <title>JavaScript (ES5)</title>
             <!-- JavaScript (ES5) Inline AI Assist's dependency style -->
-            <link href="resources/base/material.css" rel="stylesheet" type="text/css"/>
-            <link href="resources/buttons/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/notifications/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/inputs/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/navigations/material.css" rel="stylesheet" type="text/css" />
+            <link href="resources/base/tailwind3.css" rel="stylesheet" type="text/css"/>
+            <link href="resources/buttons/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/notifications/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/inputs/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/navigations/tailwind3.css" rel="stylesheet" type="text/css" />
             <!-- JavaScript (ES5) Inline AI Assist control style -->
-            <link href="resources/ej2-interactive-chat/material.css" rel="stylesheet" type="text/css"/>
+            <link href="resources/ej2-interactive-chat/tailwind3.css" rel="stylesheet" type="text/css"/>
 
             <!-- JavaScript (ES5) Inline AI Assist's dependency global script -->
             <script src="resources/base/ej2-base.min.js" type="text/javascript"></script>
@@ -113,14 +113,14 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin
        <head>
           <title>JavaScript (ES5)</title>
           <!-- JavaScript (ES5) Inline AI Assist's dependency style -->
-            <link href="resources/base/material.css" rel="stylesheet" type="text/css"/>
-            <link href="resources/buttons/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/notifications/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/inputs/material.css" rel="stylesheet" type="text/css" />
-            <link href="resources/navigations/material.css" rel="stylesheet" type="text/css" />
+            <link href="resources/base/tailwind3.css" rel="stylesheet" type="text/css"/>
+            <link href="resources/buttons/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/notifications/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/inputs/tailwind3.css" rel="stylesheet" type="text/css" />
+            <link href="resources/navigations/tailwind3.css" rel="stylesheet" type="text/css" />
 
           <!-- JavaScript (ES5) Inline AI Assist control style -->
-          <link href="resources/ej2-interactive-chat/material.css" rel="stylesheet" type="text/css"/>
+          <link href="resources/ej2-interactive-chat/tailwind3.css" rel="stylesheet" type="text/css"/>
 
           <!-- JavaScript (ES5) Inline AI Assist's dependency global script -->
             <script src="resources/base/ej2-base.min.js" type="text/javascript"></script>
@@ -165,14 +165,14 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin
 >
 > Control Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js`
 >
-> Dependency Styles: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/styles/material.css`
+> Dependency Styles: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/styles/tailwind3.css`
 >
-> Control Styles: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css`
+> Control Styles: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/tailwind3.css`
 
 **Example:**
 > Script: [`https://cdn.syncfusion.com/ej2/ej2-interactive-chat/dist/global/ej2-interactive-chat`](https://cdn.syncfusion.com/ej2/ej2-interactive-chat/dist/global/ej2-interactive-chat.min.js)
 >
-> Styles: [`https://cdn.syncfusion.com/ej2/ej2-interactive-chat/styles/material.css`](http://cdn.syncfusion.com/ej2/ej2-interactive-chat/styles/material.css)
+> Styles: [`https://cdn.syncfusion.com/ej2/ej2-interactive-chat/styles/tailwind3.css`](http://cdn.syncfusion.com/ej2/ej2-interactive-chat/styles/tailwind3.css)
 
 **Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `Inline AI Assist` element and initiate the `JavaScript (ES5) Inline AI Assist` control in the index.html by using following code.
 
diff --git a/ej2-javascript/inline-ai-assist/response-settings.md b/ej2-javascript/inline-ai-assist/response-settings.md
index df6a80273..ee4e00cff 100644
--- a/ej2-javascript/inline-ai-assist/response-settings.md
+++ b/ej2-javascript/inline-ai-assist/response-settings.md
@@ -71,8 +71,11 @@ Below sample demonstrates the usage of response settings in Inline Assist compon
 
 ## See Also
 
+<<<<<<< HEAD
+=======
 - [API Reference: ResponseSettings](../api/inline-ai-assist#responsesettings)
 - [Inline AI Assist Getting Started](./ts/getting-started.md)
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 - [Command Settings](./command-settings.md)
 - [Inline Toolbar](./inline-toolbar.md)
 - [Events Documentation](./events.md)
diff --git a/ej2-javascript/inline-ai-assist/ts/ai-integrations/openai-integration.md b/ej2-javascript/inline-ai-assist/ts/ai-integrations/openai-integration.md
index 8718610e6..c80a56c16 100644
--- a/ej2-javascript/inline-ai-assist/ts/ai-integrations/openai-integration.md
+++ b/ej2-javascript/inline-ai-assist/ts/ai-integrations/openai-integration.md
@@ -11,7 +11,11 @@ domainurl: ##DomainURL##
 
 # Integrate Azure OpenAI With TypeScript Inline AI Assist control 
 
+<<<<<<< HEAD
+The Inline AI Assist control integrates with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) to enable advanced conversational AI features in your applications. The control acts as a user interface, where user prompts are sent to the Azure OpenAI service via API calls, providing natural language understanding and context-aware responses
+=======
 The Inline AI Assist control integrates with [Azure OpenAI](https://azure.microsoft.com/en-us/products/ai-foundry/models/openai) to enable advanced conversational AI features in your applications. The control acts as a user interface, where user prompts are sent to the Azure OpenAI service via API calls, providing natural language understanding and context-aware responses
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 
 ## Prerequisites
 
diff --git a/ej2-javascript/inline-ai-assist/ts/getting-started.md b/ej2-javascript/inline-ai-assist/ts/getting-started.md
index b50098511..08b11e31a 100644
--- a/ej2-javascript/inline-ai-assist/ts/getting-started.md
+++ b/ej2-javascript/inline-ai-assist/ts/getting-started.md
@@ -72,14 +72,14 @@ To render Inline AI Assist control, need to import interactive-chat and its depe
 {% tabs %}
 {% highlight css tabtitle="style.css" %}
 
-@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css";
+@import "../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
 
 {% endhighlight %}
 {% endtabs %}
diff --git a/ej2-javascript/pivotview/aggregation.md b/ej2-javascript/pivotview/aggregation.md
index 701f8c2a7..7e66c0d65 100644
--- a/ej2-javascript/pivotview/aggregation.md
+++ b/ej2-javascript/pivotview/aggregation.md
@@ -91,7 +91,11 @@ Aggregation types can be changed easily through UI at runtime. The value fields
 
 ## Hiding aggregation type from button text
 
+<<<<<<< HEAD
+By default, in value axis each field would be displayed by its name and aggregation type together. To hide aggregation type and display field name alone, set the property [`showAggregationOnValueField`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/datasourcesettings#showaggregationonvaluefield)  in [`dataSourceSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/datasourcesettings) to **false**.
+=======
 By default, in value axis each field would be displayed by its name and aggregation type together. To hide aggregation type and display field name alone, set the property [`showAggregationOnValueField`](https://ej2.syncfusion.com/javascript/documentation/api/pivotfieldlist/index-default)  in [`dataSourceSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/datasourcesettings) to **false**.
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 
 {% if page.publishingplatform == "typescript" %}
 
diff --git a/ej2-javascript/pivotview/calculated-field.md b/ej2-javascript/pivotview/calculated-field.md
index fad161da9..1834eef31 100644
--- a/ej2-javascript/pivotview/calculated-field.md
+++ b/ej2-javascript/pivotview/calculated-field.md
@@ -91,7 +91,11 @@ Existing calculated field can be renamed only through the UI at runtime. To do s
 
 Existing calculated field formula can be edited only through the UI at runtime. To do so, open the calculated field dialog, select the target field and click "Edit" icon. User can now see the existing formula getting displayed in a multiline text box at the bottom of the dialog. Now, change the formula based on user requirement and click "OK".
 
+<<<<<<< HEAD
+![oEditing the calculated fieldt](images/before-edit.webp)
+=======
 ![Editing the calculated field](images/before-edit.webp)
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 <br/>
 <br/>
 ![Editing the calculated field formula](images/after-change.webp)
diff --git a/ej2-javascript/pivotview/data-binding.md b/ej2-javascript/pivotview/data-binding.md
index d977916a1..41e713c02 100644
--- a/ej2-javascript/pivotview/data-binding.md
+++ b/ej2-javascript/pivotview/data-binding.md
@@ -51,7 +51,11 @@ To bind local data to the pivot table, user can assign a JavaScript object array
 
 ## Remote Data
 
+<<<<<<< HEAD
+To interact with remote data source, provide the endpoint `url` within [`DataManager`](https://ej2.syncfusion.com/documentation/api/data/datamanager)along with appropriate [`adaptor`](https://ej2.syncfusion.com/documentation/data/adaptors). By default, [`DataManager`](https://ej2.syncfusion.com/documentation/api/data/datamanager)uses [`ODataAdaptor`](https://ej2.syncfusion.com/documentation/data/adaptors#odata-adaptor) for remote data-binding.
+=======
 To interact with remote data source, provide the endpoint `url` within [`DataManager`](https://ej2.syncfusion.com/documentation/api/data/datamanager) along with appropriate [`adaptor`](https://ej2.syncfusion.com/documentation/data/adaptors). By default, [`DataManager`](https://ej2.syncfusion.com/documentation/api/data/datamanager) uses [`ODataAdaptor`](https://ej2.syncfusion.com/documentation/data/adaptors#odata-adaptor) for remote data-binding.
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -113,7 +117,11 @@ OData is a standardized protocol for creating and consuming data. User can retri
 
 ### Binding with OData V4 services
 
+<<<<<<< HEAD
+The OData V4 is an improved version of OData protocols, and the [`DataManager`](https://ej2.syncfusion.com/documentation/api/data/datamanager)can be used to retrieve and consume OData V4 services. For more details on OData V4 services, refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind OData V4 service, use the [`ODataV4Adaptor`](https://ej2.syncfusion.com/documentation/data/adaptors#odatav4-adaptor).
+=======
 The OData V4 is an improved version of OData protocols, and the [`DataManager`](https://ej2.syncfusion.com/documentation/api/data/datamanager) can be used to retrieve and consume OData V4 services. For more details on OData V4 services, refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind OData V4 service, use the [`ODataV4Adaptor`](https://ej2.syncfusion.com/documentation/data/adaptors#odatav4-adaptor).
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 
 {% if page.publishingplatform == "typescript" %}
 
diff --git a/ej2-javascript/pivotview/field-list.md b/ej2-javascript/pivotview/field-list.md
index b5a7d213d..253d47799 100644
--- a/ej2-javascript/pivotview/field-list.md
+++ b/ej2-javascript/pivotview/field-list.md
@@ -133,7 +133,11 @@ In-order to re-arrange, drag any field from the field list and drop it into the
 
 Using the filter icon besides each field in row, column and filter axes, members can be either included or excluded at runtime. To know more about member filtering, [`refer`](./filtering) here.
 
+<<<<<<< HEAD
+![oFilter icon besides each fieldt](images/fieldlist_filtericon.webp)
+=======
 ![Filter icon besides each field](images/fieldlist_filtericon.webp)
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 <br/>
 ![Filter dialog to either include or exclude members](images/fieldlist_editor.webp)
 <br/>
@@ -284,7 +288,11 @@ The [`EnginePopulated`](https://ej2.syncfusion.com/javascript/documentation/api/
 
 * Likewise, [`EnginePopulated`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/index-default#enginepopulated) event is triggered in pivot table whenever the report gets modified. The updated report is passed to the field list via [`Update`](https://ej2.syncfusion.com/javascript/documentation/api/pivotfieldlist/index-default#update) method written within this event to refresh the same.
 
+<<<<<<< HEAD
+The event [`EnginePopulated`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/index-default#enginepopulated) is triggered after engine is populated. It has following parameters - `dataSourceSettings`, `pivotFieldList` and `pivotValues`.
+=======
 The event [`EnginePopulated`](https://ej2.syncfusion.com/javascript/documentation/api/pivotfieldlist/index-default#enginepopulated) is triggered after engine is populated. It has following parameters - `dataSourceSettings`, `pivotFieldList` and `pivotValues`.
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 
 >Note: This event is not required for Popup field list since it is a in built one.
 
diff --git a/ej2-javascript/pivotview/filtering.md b/ej2-javascript/pivotview/filtering.md
index ac86a52d4..06acebd15 100644
--- a/ej2-javascript/pivotview/filtering.md
+++ b/ej2-javascript/pivotview/filtering.md
@@ -132,7 +132,11 @@ The label filtering dialog can be enabled by setting the [`allowLabelFilter`](ht
 
 ### Filtering string data type through code
 
+<<<<<<< HEAD
+This type of filtering is exclusively applicable for fields with members in string data type. The filtering can be configured using the [`filterSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/filter) through code-behind. The properties required for label filter are:
+=======
 This type of filtering is exclusively applicable for fields with members in string data type. The filtering can be configured using the [`filterSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/filter)through code-behind. The properties required for label filter are:
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 
 * [`name`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/filter#name): Sets the field name.
 * [`type`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/filter#type): Sets the filter type as **Label** to the field.
diff --git a/ej2-javascript/pivotview/globalization-and-localization.md b/ej2-javascript/pivotview/globalization-and-localization.md
index f371ad79e..763f2898d 100644
--- a/ej2-javascript/pivotview/globalization-and-localization.md
+++ b/ej2-javascript/pivotview/globalization-and-localization.md
@@ -273,15 +273,16 @@ PercentageOfColumnTotal | % of Column Total
 NotEquals | Not Equals
 AllValues | All Values
 conditionalFormatting | Conditional Formatting
-apply | APPLY
+applyToGrandTotal | Apply to Grand Total
+apply | Apply
 condition | Add Condition
 formatLabel | Format
 valueFieldSettings | Value field settings
-baseField | Base field :
-baseItem | Base item :
-summarizeValuesBy | Summarize values by :
+baseField | Base field
+baseItem | Base item
+summarizeValuesBy | Summarize values by
 sourceName | Field name :
-sourceCaption | Field caption :
+sourceCaption | Field caption
 example | e.g:
 editorDataLimitMsg |  more items. Search to refine further.
 details | Details
@@ -322,9 +323,10 @@ fieldList | Show fieldlist
 grid | Show table
 toolbarFormatting | Conditional formatting
 chart | Chart
+columnChart | Column
 reportMsg | Please enter valid report name!!!
 reportList | Report list
-removeConfirm | Are you sure want to delete this report?
+removeConfirm | Are you sure you want to delete this report?
 emptyReport | No reports found!!
 bar | Bar
 line | Line
@@ -334,7 +336,7 @@ polar | Polar
 of | of
 emptyFormat | No format found!!!
 emptyInput | Enter a value
-newReportConfirm | Want to save changes to report?
+newReportConfirm | Do you want to save the changes to this report?
 emptyReportName | Enter a report name
 qtr | Qtr
 null | null
@@ -360,7 +362,7 @@ false | False
 decimalPlaces | Decimal Places
 numberFormat | Number Formatting
 memberType | Field Type
-formatString | Format String
+formatString | Format
 expressionField | Expression
 customFormat | Enter custom format string
 selectedHierarchy | Parent Hierarchy
@@ -371,13 +373,13 @@ Measure | Measure
 Dimension | Dimension
 Standard | Standard
 blank | (Blank)
-fieldTooltip | Drag and drop fields to create an expression. And, if you want to edit the existing the calculated fields! Then you can achieve it by simply selecting the field under 'Calculated Members'.
+fieldTooltip | Drag and drop fields to create an expression. And, if you want to edit the existing calculated fields! Then you can achieve it by simply selecting the field under 'Calculated Members'.
 QuarterYear | Quarter Year
 fieldTitle | Field Name
 drillError | Cannot show the raw items of calculated fields.
 caption | Field Caption
 copy | Copy
-defaultReport | Default report
+defaultReport | Sample Report
 customFormatString | Custom Format
 invalidFormat | Invalid Format.
 group | Group
@@ -403,11 +405,11 @@ spline | Spline
 stackingcolumn100 | 100% Stacked Column
 stackingbar100 | 100% Stacked Bar
 stackingarea100 | 100% Stacked Area
-bubble | bubble
+bubble | Bubble
 pareto | Pareto
 radar | Radar
 chartTypeSettings | Chart type settings
-multipleAxes | Multiple Axes
+multipleAxes | Multiple Axis
 sortAscending | Sort ascending order
 sortDescending | Sort descending order
 sortNone | Sort data order
@@ -449,6 +451,8 @@ goToLastPage | Go to last page
 combined | Combined
 subTotalPosition | Subtotals position
 auto | Auto
+loading | Loading...
+add | Add
 
 The following list of properties and its values are used in the pivot field list.
 
@@ -463,7 +467,7 @@ dropValPrompt | Drop value here
 addPrompt | Add field here
 adaptiveFieldHeader | Choose field
 centerHeader | Drag fields between axes below:
-add | add
+add | Add
 drag | Drag
 filter | Filter
 filtered | Filtered
@@ -558,13 +562,13 @@ Days | Days
 Hours | Hours
 Minutes | Minutes
 Seconds | Seconds
-apply | APPLY
+apply | Apply
 valueFieldSettings | Value field settings
 sourceName | Field name :
-sourceCaption | Field caption :
-summarizeValuesBy | Summarize values by :
-baseField | Base field :
-baseItem | Base item :
+sourceCaption | Field caption
+summarizeValuesBy | Summarize values by
+baseField | Base field
+baseItem | Base item
 example | e.g:
 editorDataLimitMsg |  more items. Search to refine further.
 deferLayoutUpdate | Defer Layout Update
@@ -575,7 +579,7 @@ fieldDropErrorAction | The field you are moving cannot be placed in that area of
 MoreOption | More...
 memberType | Field Type
 selectedHierarchy | Parent Hierarchy
-formatString | Format String
+formatString | Format
 expressionField | Expression
 olapDropText | Example: [Measures].[Order Quantity] + ([Measures].[Order Quantity] * 0.10)
 customFormat | Enter custom format string
@@ -586,7 +590,7 @@ Currency | Currency
 Percent | Percent
 Custom | Custom
 blank | (Blank)
-fieldTooltip | Drag and drop fields to create an expression. And, if you want to edit the existing the calculated fields! You can achieve it by simply selecting the field under 'Calculated Members'.
+fieldTooltip | Drag and drop fields to create an expression. And, if you want to edit the existing calculated fields! You can achieve it by simply selecting the field under 'Calculated Members'.
 fieldTitle | Field Name
 QuarterYear | Quarter Year
 caption | Field Caption
@@ -603,6 +607,8 @@ of | of
 removeCalculatedField | Are you sure you want to delete this calculated field?
 yes | Yes
 no | No
+qtr | Qtr
+grandTotal | Grand Total
 None | None
 
 N> To find the latest localization keywords of pivotview and pivotfieldlist for different languages, visit this [GitHub](https://github.com/syncfusion/ej2-locale) repository.
diff --git a/ej2-javascript/pivotview/tool-bar.md b/ej2-javascript/pivotview/tool-bar.md
index af0252e05..0ec87f260 100644
--- a/ej2-javascript/pivotview/tool-bar.md
+++ b/ej2-javascript/pivotview/tool-bar.md
@@ -161,6 +161,6 @@ For example, you can add the header and footer for the pdf document by setting t
 
 ## See Also
 
-* [Toolbar Component](./toolbar/getting-started)
+* [Toolbar Component](https://ej2.syncfusion.com/documentation/toolbar/getting-started)
 * [Excel Exporting](./excel-export)
 * [PDF Exporting](./pdf-export)
diff --git a/ej2-javascript/schedule/appointments.md b/ej2-javascript/schedule/appointments.md
index 4c15aa0cd..ab4d8d65f 100644
--- a/ej2-javascript/schedule/appointments.md
+++ b/ej2-javascript/schedule/appointments.md
@@ -182,7 +182,7 @@ The following example demonstrates how to create a recurring event in the Schedu
 
 Specific dates can be excluded from a recurrence series by adding them to the [`recurrenceException`](../api/schedule/field#recurrenceexception) field. Exception dates must be provided in ISO date-time format without hyphens (-) separating date elements.
 
-> For example, February 22, 2018, should be represented as "20180222". The time component in UTC format requires a "Z" suffix without spaces. For instance, "07:30:00 UTC" becomes "073000Z".
+> For example, February 22, 2026, should be represented as "20260222". The time component in UTC format requires a "Z" suffix without spaces. For instance, "07:30:00 UTC" becomes "073000Z".
 
 {% if page.publishingplatform == "typescript" %}
 
diff --git a/ej2-javascript/ts/skills.md b/ej2-javascript/ts/skills.md
index bfd436af6..f5ed6015d 100644
--- a/ej2-javascript/ts/skills.md
+++ b/ej2-javascript/ts/skills.md
@@ -89,7 +89,10 @@ The terminal will display a list of available skills. Use the arrow keys to navi
 {% endtabs %}
 
 Next, select which AI agent you're using and where to store the skills. In Syncfusion Code Studio, the `.agents/skills` directory is used as a skills storage location and you can refer this [link](https://github.com/vercel-labs/skills?tab=readme-ov-file#supported-agents) for more details on supported agents and skill paths.
+<<<<<<< HEAD
+=======
 
+>>>>>>> a475736541c1931072a7aa7a11369f14a9f147a4
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
 
diff --git a/ej2-typescript-toc.html b/ej2-typescript-toc.html
index 311bb7aaa..c211cf369 100644
--- a/ej2-typescript-toc.html
+++ b/ej2-typescript-toc.html
@@ -807,11 +807,19 @@
 <li><a href="/ej2-typescript/data/overview">Overview</a></li>
 <li><a href="/ej2-typescript/data/getting-started">Getting Started</a></li>
 <li><a href="/ej2-typescript/data/data-binding">Data Binding</a></li>
+<li><a href="/ej2-typescript/data/cache">Cache</a></li>
 <li><a href="/ej2-typescript/data/querying">Querying</a></li>
 <li><a href="/ej2-typescript/data/adaptors">Adaptors</a></li>
-<li><a href="/ej2-typescript/data/crud-operations">CRUD Operations</a></li>
+<li><a href="/ej2-typescript/data/crud-operations">CRUD Data Operations</a></li>
 <li><a href="/ej2-typescript/data/dataManager-persistence">State Persistence</a></li>
 <li><a href="/ej2-typescript/data/applying-middleware-logic">Applying Middleware Logic</a></li>
+<li>How To
+    <ul>
+        <li><a href="/ej2-typescript/data/how-to/working-in-offline-mode">Working in offline mode</a></li>
+        <li><a href="/ej2-typescript/data/how-to/sending-additional-parameters">Sending additional parameters to server</a></li>
+        <li><a href="/ej2-typescript/data/how-to/adding-custom-headers">Adding custom headers</a></li>
+    </ul>
+</li>
 <li><a href="/ej2-typescript/data/advanced-scenarios">Advanced Scenarios</a></li>
 <li><a href="https://ej2.syncfusion.com/documentation/api/data/overview/">API Reference</a></li>
 </ul>
@@ -1281,8 +1289,7 @@
             <ul>
                 <li><a href="/ej2-typescript/gantt/excel-export/excel-export">Excel Export</a>
                     <ul>
-                        <li><a href="/ej2-typescript/gantt/excel-export/custom-data-source">Custom Data Source</a></li>
-                        <li><a href="/ej2-typescript/gantt/excel-export/multiple-gantt-exporting">Multiple Gantt Exporting</a>
+                        <li><a href="/ej2-typescript/gantt/excel-export/excel-export-options">Excel Export Options</a></li>
                         </li>
                     </ul>
                 </li>