From e3de00b6982dd7253a037b95ccab67a680afc214 Mon Sep 17 00:00:00 2001
From: Build Automaion <buildautomation@syncfusion.com>
Date: Wed, 22 May 2024 15:38:09 +0530
Subject: [PATCH] Integrated latest changes at 05-22-2024 10:39:18 AM

---
 ej2-javascript-toc.html                       |   3 +-
 .../grid/data-binding-cs1/datasource.ts       |  76 ++++++
 .../grid/data-binding-cs1/es5-datasource.js   |  76 ++++++
 .../grid/data-binding-cs1/index.css           |  14 ++
 .../grid/data-binding-cs1/index.js            |  45 ++++
 .../grid/data-binding-cs1/index.ts            |  51 +++++
 .../grid/data-binding-cs1/js/index.html       |  35 +++
 .../grid/data-binding-cs1/systemjs.config.js  |  43 ++++
 .../grid/data-binding-cs1/ts/index.html       |  31 +++
 .../grid/data-binding-cs2/datasource.ts       |  76 ++++++
 .../grid/data-binding-cs2/es5-datasource.js   |  76 ++++++
 .../grid/data-binding-cs2/index.css           |  14 ++
 .../grid/data-binding-cs2/index.js            |  65 ++++++
 .../grid/data-binding-cs2/index.ts            |  68 ++++++
 .../grid/data-binding-cs2/js/index.html       |  34 +++
 .../grid/data-binding-cs2/systemjs.config.js  |  43 ++++
 .../grid/data-binding-cs2/ts/index.html       |  30 +++
 .../grid/data-binding-cs3/datasource.ts       |  76 ++++++
 .../grid/data-binding-cs3/es5-datasource.js   |  76 ++++++
 .../grid/data-binding-cs3/index.css           |  14 ++
 .../grid/data-binding-cs3/index.js            |  28 +++
 .../grid/data-binding-cs3/index.ts            |  33 +++
 .../grid/data-binding-cs3/js/index.html       |  34 +++
 .../grid/data-binding-cs3/systemjs.config.js  |  43 ++++
 .../grid/data-binding-cs3/ts/index.html       |  30 +++
 .../grid/data-binding/data-binding.md         | 216 ++++++++++++++----
 ej2-javascript/uploader/async.md              |   6 +-
 ej2-typescript-toc.html                       |   3 +-
 28 files changed, 1291 insertions(+), 48 deletions(-)
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs1/datasource.ts
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs1/es5-datasource.js
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs1/index.css
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs1/index.js
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs1/index.ts
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs1/js/index.html
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs1/systemjs.config.js
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs1/ts/index.html
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs2/datasource.ts
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs2/es5-datasource.js
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs2/index.css
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs2/index.js
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs2/index.ts
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs2/js/index.html
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs2/systemjs.config.js
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs2/ts/index.html
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs3/datasource.ts
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs3/es5-datasource.js
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs3/index.css
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs3/index.js
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs3/index.ts
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs3/js/index.html
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs3/systemjs.config.js
 create mode 100644 ej2-javascript/code-snippet/grid/data-binding-cs3/ts/index.html

diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html
index b9336ff5c..c20a07ab6 100644
--- a/ej2-javascript-toc.html
+++ b/ej2-javascript-toc.html
@@ -1148,9 +1148,8 @@
 <ul>
 <li><a href="/ej2-javascript/grid/getting-started">Getting Started</a></li>
 <li><a href="/ej2-javascript/grid/module">Feature Modules</a></li>
-<li>Data Binding
+<li><a href="/ej2-javascript/grid/data-binding/data-binding">Data Binding</a>
 <ul>
-<li><a href="/ej2-javascript/grid/data-binding/data-binding">Data Binding</a></li>
 <li><a href="/ej2-javascript/grid/data-binding/local-data">Local Data</a></li>
 <li><a href="/ej2-javascript/grid/data-binding/remote-data">Remote Data</a></li>
 </ul>
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs1/datasource.ts b/ej2-javascript/code-snippet/grid/data-binding-cs1/datasource.ts
new file mode 100644
index 000000000..b9bed901a
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs1/datasource.ts
@@ -0,0 +1,76 @@
+export let data: Object[] =  [
+    {
+        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
+        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
+    },
+    {
+        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),ShippedDate: new Date(8367642e5),
+        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
+        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
+    },
+    {
+        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),ShippedDate: 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
+    },
+    {
+        OrderID: 10251, CustomerID: 'VINET', EmployeeID: 3, OrderDate: new Date(8367642e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
+        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
+    },
+    {
+        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
+        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
+    },
+    {
+        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),ShippedDate: new Date(8367642e5),
+        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
+        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
+    },
+    {
+        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
+        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
+    },
+    {
+        OrderID: 10255, CustomerID: 'VINET', EmployeeID: 9, OrderDate: new Date(8371098e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
+        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
+    },
+    {
+        OrderID: 10256, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(837369e6),ShippedDate: new Date(8367642e5),
+        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
+        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
+    },
+    {
+        OrderID: 10257, CustomerID: 'VINET', EmployeeID: 4, OrderDate: new Date(8374554e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
+        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
+    },
+    {
+        OrderID: 10258, CustomerID: 'VINET', EmployeeID: 1, OrderDate: new Date(8375418e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
+        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
+    },
+    {
+        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
+        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
+    },
+    {
+        OrderID: 10260, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
+        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
+    },
+    {
+        OrderID: 10261, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
+        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
+    },
+    {
+        OrderID: 10262, CustomerID: 'VINET', EmployeeID: 8, OrderDate: new Date(8379738e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
+        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
+    }];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs1/es5-datasource.js b/ej2-javascript/code-snippet/grid/data-binding-cs1/es5-datasource.js
new file mode 100644
index 000000000..924ac658e
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs1/es5-datasource.js
@@ -0,0 +1,76 @@
+var data =  [
+    {
+        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
+        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
+    },
+    {
+        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),ShippedDate: new Date(8367642e5),
+        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
+        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
+    },
+    {
+        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),ShippedDate: 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
+    },
+    {
+        OrderID: 10251, CustomerID: 'VINET', EmployeeID: 3, OrderDate: new Date(8367642e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
+        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
+    },
+    {
+        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
+        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
+    },
+    {
+        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),ShippedDate: new Date(8367642e5),
+        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
+        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
+    },
+    {
+        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
+        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
+    },
+    {
+        OrderID: 10255, CustomerID: 'VINET', EmployeeID: 9, OrderDate: new Date(8371098e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
+        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
+    },
+    {
+        OrderID: 10256, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(837369e6),ShippedDate: new Date(8367642e5),
+        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
+        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
+    },
+    {
+        OrderID: 10257, CustomerID: 'VINET', EmployeeID: 4, OrderDate: new Date(8374554e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
+        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
+    },
+    {
+        OrderID: 10258, CustomerID: 'VINET', EmployeeID: 1, OrderDate: new Date(8375418e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
+        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
+    },
+    {
+        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
+        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
+    },
+    {
+        OrderID: 10260, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
+        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
+    },
+    {
+        OrderID: 10261, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
+        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
+    },
+    {
+        OrderID: 10262, CustomerID: 'VINET', EmployeeID: 8, OrderDate: new Date(8379738e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
+        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
+    }];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs1/index.css b/ej2-javascript/code-snippet/grid/data-binding-cs1/index.css
new file mode 100644
index 000000000..0fba63172
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-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/grid/data-binding-cs1/index.js b/ej2-javascript/code-snippet/grid/data-binding-cs1/index.js
new file mode 100644
index 000000000..9a8c6365f
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs1/index.js
@@ -0,0 +1,45 @@
+var data = new ej.data.DataManager({
+  url: 'https://ej2services.syncfusion.com/js/development/api/UrlDataSource',
+  adaptor: new ej.data.UrlAdaptor
+});
+
+var grid = new ej.grids.Grid({
+    dataSource: data,
+    allowPaging: true,
+    allowSorting: true,
+    allowFiltering: true,
+    pageSettings: { pageCount: 3 },
+    loadingIndicator: { indicatorType: 'Spinner' },
+    columns: [
+      { field: 'EmployeeID', headerText: 'Employee ID', width: 130, textAlign: 'Right' },
+      { field: 'Employees', headerText: 'Employee Name', width: 145 },
+      { field: 'Designation', headerText: 'Designation', width: 130 },
+      { field: 'CurrentSalary', headerText: 'Current Salary', format:'C2', width: 140, textAlign: 'Right' },
+    ],
+    height: 315
+});
+grid.appendTo('#Grid');
+
+var dropdownData = [
+  { id: 'Spinner', value: 'Spinner' },
+  { id: 'Shimmer', value: 'Shimmer' }
+];
+
+var dropdownList = new ej.dropdowns.DropDownList({
+  index: 0,
+  width: 120,
+  fields: { text: 'value', value: 'id' },
+  dataSource: dropdownData,
+  change: valueChange,
+ });
+ dropdownList.appendTo('#dropdown');
+
+ function valueChange() {
+  if (dropdownList.value === 'Shimmer') {
+    grid.loadingIndicator.indicatorType = 'Shimmer';
+    grid.refreshColumns();
+} else {
+    grid.loadingIndicator.indicatorType = 'Spinner';
+    grid.refreshColumns();
+}
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs1/index.ts b/ej2-javascript/code-snippet/grid/data-binding-cs1/index.ts
new file mode 100644
index 000000000..c5250057f
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs1/index.ts
@@ -0,0 +1,51 @@
+import { Grid, Page, Sort, Filter } from '@syncfusion/ej2-grids';
+import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
+import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
+
+Grid.Inject(Page,Sort,Filter);
+
+let data: DataManager = new DataManager({
+  url: 'https://ej2services.syncfusion.com/js/development/api/UrlDataSource',
+  adaptor: new UrlAdaptor
+});
+
+let grid: Grid = new Grid({
+  dataSource: data,
+  allowPaging: true,
+  allowSorting: true,
+  allowFiltering: true,
+  pageSettings: { pageCount: 3 },
+  loadingIndicator: { indicatorType: 'Spinner' },
+  columns: [
+    { field: 'EmployeeID', headerText: 'Employee ID', width: 130, textAlign: 'Right' },
+    { field: 'Employees', headerText: 'Employee Name', width: 145 },
+    { field: 'Designation', headerText: 'Designation', width: 130 },
+    { field: 'CurrentSalary', headerText: 'Current Salary', format:'C2', width: 140, textAlign: 'Right' },
+    ],
+  height: 315
+});
+grid.appendTo('#Grid');
+
+let dropdownData: object[] = [
+  { id: 'Spinner', value: 'Spinner' },
+  { id: 'Shimmer', value: 'Shimmer' }
+];
+
+let dropdownList: DropDownList = new DropDownList({
+  index: 0,
+  width: 120,
+  fields: { text: 'value', value: 'id' },
+  dataSource: dropdownData,
+  change: valueChange,
+});
+dropdownList.appendTo('#dropdown');
+
+function valueChange(args: ChangeEventArgs ) {
+  if (dropdownList.value === 'Shimmer') {
+    grid.loadingIndicator.indicatorType = 'Shimmer';
+    grid.refreshColumns();
+} else {
+    grid.loadingIndicator.indicatorType = 'Spinner';
+    grid.refreshColumns();
+}
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs1/js/index.html b/ej2-javascript/code-snippet/grid/data-binding-cs1/js/index.html
new file mode 100644
index 000000000..ee90c98aa
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs1/js/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/25.2.3/ej2-base/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
+<script src="https://cdn.syncfusion.com/ej2/25.2.3/dist/ej2.min.js" type="text/javascript"></script>
+<script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+<body>
+    <div id="container">
+        <label  style="padding: 10px 10px 26px 0" > Change the loading indicator type:</label>
+        <input type="text" id="dropdown" />
+        <div style="padding: 10px 10px" id="Grid"></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/grid/data-binding-cs1/systemjs.config.js b/ej2-javascript/code-snippet/grid/data-binding-cs1/systemjs.config.js
new file mode 100644
index 000000000..e705c4607
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs1/systemjs.config.js
@@ -0,0 +1,43 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/25.2.3/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.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-grids": "syncfusion:ej2-grids/dist/ej2-grids.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
+    },
+     meta: { 
+       '*.json': { loader: 'plugin-json' }
+    }
+});
+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/grid/data-binding-cs1/ts/index.html b/ej2-javascript/code-snippet/grid/data-binding-cs1/ts/index.html
new file mode 100644
index 000000000..883fcc274
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs1/ts/index.html
@@ -0,0 +1,31 @@
+<!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/25.2.3/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-grids/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>
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <label  style="padding: 10px 10px 26px 0"> Change the loading indicator type:</label>
+        <input type="text" id="dropdown" />
+        <div style="padding: 10px 10px" id='Grid'></div>        
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs2/datasource.ts b/ej2-javascript/code-snippet/grid/data-binding-cs2/datasource.ts
new file mode 100644
index 000000000..b9bed901a
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs2/datasource.ts
@@ -0,0 +1,76 @@
+export let data: Object[] =  [
+    {
+        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
+        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
+    },
+    {
+        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),ShippedDate: new Date(8367642e5),
+        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
+        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
+    },
+    {
+        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),ShippedDate: 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
+    },
+    {
+        OrderID: 10251, CustomerID: 'VINET', EmployeeID: 3, OrderDate: new Date(8367642e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
+        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
+    },
+    {
+        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
+        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
+    },
+    {
+        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),ShippedDate: new Date(8367642e5),
+        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
+        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
+    },
+    {
+        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
+        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
+    },
+    {
+        OrderID: 10255, CustomerID: 'VINET', EmployeeID: 9, OrderDate: new Date(8371098e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
+        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
+    },
+    {
+        OrderID: 10256, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(837369e6),ShippedDate: new Date(8367642e5),
+        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
+        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
+    },
+    {
+        OrderID: 10257, CustomerID: 'VINET', EmployeeID: 4, OrderDate: new Date(8374554e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
+        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
+    },
+    {
+        OrderID: 10258, CustomerID: 'VINET', EmployeeID: 1, OrderDate: new Date(8375418e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
+        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
+    },
+    {
+        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
+        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
+    },
+    {
+        OrderID: 10260, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
+        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
+    },
+    {
+        OrderID: 10261, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
+        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
+    },
+    {
+        OrderID: 10262, CustomerID: 'VINET', EmployeeID: 8, OrderDate: new Date(8379738e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
+        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
+    }];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs2/es5-datasource.js b/ej2-javascript/code-snippet/grid/data-binding-cs2/es5-datasource.js
new file mode 100644
index 000000000..924ac658e
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs2/es5-datasource.js
@@ -0,0 +1,76 @@
+var data =  [
+    {
+        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
+        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
+    },
+    {
+        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),ShippedDate: new Date(8367642e5),
+        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
+        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
+    },
+    {
+        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),ShippedDate: 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
+    },
+    {
+        OrderID: 10251, CustomerID: 'VINET', EmployeeID: 3, OrderDate: new Date(8367642e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
+        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
+    },
+    {
+        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
+        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
+    },
+    {
+        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),ShippedDate: new Date(8367642e5),
+        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
+        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
+    },
+    {
+        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
+        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
+    },
+    {
+        OrderID: 10255, CustomerID: 'VINET', EmployeeID: 9, OrderDate: new Date(8371098e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
+        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
+    },
+    {
+        OrderID: 10256, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(837369e6),ShippedDate: new Date(8367642e5),
+        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
+        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
+    },
+    {
+        OrderID: 10257, CustomerID: 'VINET', EmployeeID: 4, OrderDate: new Date(8374554e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
+        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
+    },
+    {
+        OrderID: 10258, CustomerID: 'VINET', EmployeeID: 1, OrderDate: new Date(8375418e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
+        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
+    },
+    {
+        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
+        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
+    },
+    {
+        OrderID: 10260, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
+        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
+    },
+    {
+        OrderID: 10261, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
+        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
+    },
+    {
+        OrderID: 10262, CustomerID: 'VINET', EmployeeID: 8, OrderDate: new Date(8379738e5),ShippedDate: new Date(8367642e5),
+        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
+        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
+    }];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs2/index.css b/ej2-javascript/code-snippet/grid/data-binding-cs2/index.css
new file mode 100644
index 000000000..0fba63172
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs2/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/grid/data-binding-cs2/index.js b/ej2-javascript/code-snippet/grid/data-binding-cs2/index.js
new file mode 100644
index 000000000..fafc9316a
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs2/index.js
@@ -0,0 +1,65 @@
+var grid = new ej.grids.Grid({
+    dataSource: data,
+    columns: [
+      { field: 'OrderID', headerText: 'OrderID', textAlign: 'Right', width: 90 },
+      { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
+      { field: 'Freight', headerText: 'Freight', textAlign: 'Right', format:'C2', width: 90 },
+      { field: 'ShipCity', headerText: 'Ship City', width: 120 },
+    ],
+    height: 280
+});
+grid.appendTo('#Grid');
+
+var button = new ej.buttons.Button();
+ button.appendTo('#sample');
+
+document.getElementById('sample').addEventListener('click', function () {
+  changeDatasource();
+});
+
+function changeDatasource() {
+  for (var i = 0; i < 5; i++) {
+      var newRecord = {
+          OrderID: generateOrderId(),
+          CustomerID: generateCustomerId(),
+          ShipCity: generateShipCity(),
+          Freight: generateFreight(),
+          ShipName: generateShipName()
+      };
+ 
+      grid.dataSource.unshift(newRecord);
+      grid.setProperties({dataSource: grid.dataSource});
+  }
+}
+
+// Generate a random OrderID
+function generateOrderId() {
+  return Math.floor(10000 + Math.random() * 90000);
+}
+
+// Generate a random CustomerID
+function generateCustomerId() {
+  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  var result = '';
+  for (var i = 0; i < 5; i++) {
+      result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return result;
+}
+
+// Generate a random ShipCity
+function generateShipCity() {
+  var cities = ['London', 'Paris', 'New York', 'Tokyo', 'Berlin'];
+  return cities[Math.floor(Math.random() * cities.length)];
+}
+
+// Generate a random Freight value
+function generateFreight() {
+  return Math.random() * 100;
+}
+
+// Generate a random ShipName
+function generateShipName() {
+  var names = ['Que Delícia', 'Bueno Foods', 'Island Trading', 'Laughing Bacchus Winecellars'];
+  return names[Math.floor(Math.random() * names.length)];
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs2/index.ts b/ej2-javascript/code-snippet/grid/data-binding-cs2/index.ts
new file mode 100644
index 000000000..d8b61bd78
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs2/index.ts
@@ -0,0 +1,68 @@
+import { Grid } from '@syncfusion/ej2-grids';
+import { Button } from '@syncfusion/ej2-buttons';
+import { data } from './datasource.ts';
+
+let grid: Grid = new Grid({
+  dataSource: data,
+  columns: [
+    { field: 'OrderID', headerText: 'OrderID', textAlign: 'Right', width: 90 },
+    { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
+    { field: 'Freight', headerText: 'Freight', textAlign: 'Right', format:'C2', width: 90 },
+    { field: 'ShipCity', headerText: 'Ship City', width: 120 },
+  ],
+  height: 280
+});
+grid.appendTo('#Grid');
+
+let button: Button = new Button();
+button.appendTo('#sample');
+
+(document.getElementById('sample')as HTMLElement).addEventListener('click', function () {
+  changeDatasource();
+});
+
+function changeDatasource() {
+  for (let i = 0; i < 5; i++) {
+      let newRecord = {
+          OrderID: generateOrderId(),
+          CustomerID: generateCustomerId(),
+          ShipCity: generateShipCity(),
+          Freight: generateFreight(),
+          ShipName: generateShipName()
+      };
+      grid.dataSource.unshift(newRecord);
+      grid.setProperties({dataSource: grid.dataSource as object[] });
+}
+
+// Generate a random OrderID
+function generateOrderId(): number {
+  return Math.floor(10000 + Math.random() * 90000);
+}
+
+// Generate a random CustomerID
+function generateCustomerId(): string {
+  let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  let result = '';
+  for (let i = 0; i < 5; i++) {
+      result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return result;
+}
+
+// Generate a random ShipCity
+function generateShipCity(): string  {
+  let cities = ['London', 'Paris', 'New York', 'Tokyo', 'Berlin'];
+  return cities[Math.floor(Math.random() * cities.length)];
+}
+
+// Generate a random Freight value
+function generateFreight(): number {
+  return Math.random() * 100;
+}
+
+// Generate a random ShipName
+function generateShipName(): string {
+  let names = ['Que Delícia', 'Bueno Foods', 'Island Trading', 'Laughing Bacchus Winecellars'];
+  return names[Math.floor(Math.random() * names.length)];
+}
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs2/js/index.html b/ej2-javascript/code-snippet/grid/data-binding-cs2/js/index.html
new file mode 100644
index 000000000..97948ca14
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs2/js/index.html
@@ -0,0 +1,34 @@
+<!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/25.2.3/ej2-base/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
+<script src="https://cdn.syncfusion.com/ej2/25.2.3/dist/ej2.min.js" type="text/javascript"></script>
+<script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+<body>
+    <div id="container">
+        <button id="sample">Refresh Datasource</button>
+        <div style="padding: 10px 10px" id="Grid"></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/grid/data-binding-cs2/systemjs.config.js b/ej2-javascript/code-snippet/grid/data-binding-cs2/systemjs.config.js
new file mode 100644
index 000000000..e705c4607
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs2/systemjs.config.js
@@ -0,0 +1,43 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/25.2.3/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.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-grids": "syncfusion:ej2-grids/dist/ej2-grids.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
+    },
+     meta: { 
+       '*.json': { loader: 'plugin-json' }
+    }
+});
+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/grid/data-binding-cs2/ts/index.html b/ej2-javascript/code-snippet/grid/data-binding-cs2/ts/index.html
new file mode 100644
index 000000000..9bf1d18fa
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs2/ts/index.html
@@ -0,0 +1,30 @@
+<!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/25.2.3/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-grids/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>
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <button id="sample">Refresh Datasource</button>
+        <div style="padding: 10px 10px" id='Grid'></div>        
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs3/datasource.ts b/ej2-javascript/code-snippet/grid/data-binding-cs3/datasource.ts
new file mode 100644
index 000000000..64abb9f7b
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs3/datasource.ts
@@ -0,0 +1,76 @@
+export let data: Object[] =  [
+    {
+        OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, CustomerName: 'Aria Cruz',OrderDate: new Date(8364186e5),
+        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
+        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
+    },
+    {
+        OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6,CustomerName: 'Michael Holz', OrderDate: new Date(836505e6),
+        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
+        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
+    },
+    {
+        OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, CustomerName: 'Michael Holz',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
+    },
+    {
+        OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3,CustomerName: 'Janete Limeira', OrderDate: new Date(8367642e5),
+        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
+        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
+    },
+    {
+        OrderID: 10252, CustomerID: 'SUPRD', Role: 'Manager', EmployeeID: 4,CustomerName: 'Alejandra Camino', OrderDate: new Date(8368506e5),
+        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
+        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
+    },
+    {
+        OrderID: 10253, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 3,CustomerName: 'Alejandra Camin', OrderDate: new Date(836937e6),
+        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
+        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
+    },
+    {
+        OrderID: 10254, CustomerID: 'CHOPS', Role: 'Employee', EmployeeID: 5,CustomerName: 'Jonas Bergulfsen', OrderDate: new Date(8370234e5),
+        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
+        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
+    },
+    {
+        OrderID: 10255, CustomerID: 'RICSU', Role: 'Admin', EmployeeID: 9, CustomerName: 'Jose Pavarotti',OrderDate: new Date(8371098e5),
+        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
+        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
+    },
+    {
+        OrderID: 10256, CustomerID: 'WELLI', Role: 'Employee', EmployeeID: 3, CustomerName: 'Hari Kumar',OrderDate: new Date(837369e6),
+        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
+        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
+    },
+    {
+        OrderID: 10257, CustomerID: 'HILAA', Role: 'Admin', EmployeeID: 4, CustomerName: 'Jytte Petersen',OrderDate: new Date(8374554e5),
+        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
+        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
+    },
+    {
+        OrderID: 10258, CustomerID: 'ERNSH', Role: 'Manager', EmployeeID: 1, CustomerName: 'Mary Saveley',OrderDate: new Date(8375418e5),
+        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
+        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
+    },
+    {
+        OrderID: 10259, CustomerID: 'CENTC', Role: 'Manager', EmployeeID: 4,CustomerName: 'Dominique Perrier', OrderDate: new Date(8376282e5),
+        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
+        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
+    },
+    {
+        OrderID: 10260, CustomerID: 'OTTIK', Role: 'Admin', EmployeeID: 4, CustomerName: 'Mary Saveley',OrderDate: new Date(8377146e5),
+        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
+        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
+    },
+    {
+        OrderID: 10261, CustomerID: 'QUEDE', Role: 'Manager', EmployeeID: 4,CustomerName: 'Pirkko Koskitalo', OrderDate: new Date(8377146e5),
+        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
+        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
+    },
+    {
+        OrderID: 10262, CustomerID: 'RATTC', Role: 'Employee', EmployeeID: 8, CustomerName: 'Paula Parente', OrderDate: new Date(8379738e5),
+        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
+        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
+    }];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs3/es5-datasource.js b/ej2-javascript/code-snippet/grid/data-binding-cs3/es5-datasource.js
new file mode 100644
index 000000000..fd85a1682
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs3/es5-datasource.js
@@ -0,0 +1,76 @@
+var data =  [
+    {
+        OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, CustomerName: 'Aria Cruz',OrderDate: new Date(8364186e5),
+        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
+        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
+    },
+    {
+        OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6,CustomerName: 'Michael Holz', OrderDate: new Date(836505e6),
+        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
+        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
+    },
+    {
+        OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, CustomerName: 'Michael Holz',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
+    },
+    {
+        OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3,CustomerName: 'Janete Limeira', OrderDate: new Date(8367642e5),
+        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
+        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
+    },
+    {
+        OrderID: 10252, CustomerID: 'SUPRD', Role: 'Manager', EmployeeID: 4,CustomerName: 'Alejandra Camino', OrderDate: new Date(8368506e5),
+        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
+        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
+    },
+    {
+        OrderID: 10253, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 3,CustomerName: 'Alejandra Camin', OrderDate: new Date(836937e6),
+        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
+        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
+    },
+    {
+        OrderID: 10254, CustomerID: 'CHOPS', Role: 'Employee', EmployeeID: 5,CustomerName: 'Jonas Bergulfsen', OrderDate: new Date(8370234e5),
+        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
+        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
+    },
+    {
+        OrderID: 10255, CustomerID: 'RICSU', Role: 'Admin', EmployeeID: 9, CustomerName: 'Jose Pavarotti',OrderDate: new Date(8371098e5),
+        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
+        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
+    },
+    {
+        OrderID: 10256, CustomerID: 'WELLI', Role: 'Employee', EmployeeID: 3, CustomerName: 'Hari Kumar',OrderDate: new Date(837369e6),
+        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
+        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
+    },
+    {
+        OrderID: 10257, CustomerID: 'HILAA', Role: 'Admin', EmployeeID: 4, CustomerName: 'Jytte Petersen',OrderDate: new Date(8374554e5),
+        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
+        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
+    },
+    {
+        OrderID: 10258, CustomerID: 'ERNSH', Role: 'Manager', EmployeeID: 1, CustomerName: 'Mary Saveley',OrderDate: new Date(8375418e5),
+        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
+        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
+    },
+    {
+        OrderID: 10259, CustomerID: 'CENTC', Role: 'Manager', EmployeeID: 4,CustomerName: 'Dominique Perrier', OrderDate: new Date(8376282e5),
+        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
+        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
+    },
+    {
+        OrderID: 10260, CustomerID: 'OTTIK', Role: 'Admin', EmployeeID: 4, CustomerName: 'Mary Saveley',OrderDate: new Date(8377146e5),
+        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
+        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
+    },
+    {
+        OrderID: 10261, CustomerID: 'QUEDE', Role: 'Manager', EmployeeID: 4,CustomerName: 'Pirkko Koskitalo', OrderDate: new Date(8377146e5),
+        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
+        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
+    },
+    {
+        OrderID: 10262, CustomerID: 'RATTC', Role: 'Employee', EmployeeID: 8, CustomerName: 'Paula Parente', OrderDate: new Date(8379738e5),
+        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
+        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
+    }];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs3/index.css b/ej2-javascript/code-snippet/grid/data-binding-cs3/index.css
new file mode 100644
index 000000000..0fba63172
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs3/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/grid/data-binding-cs3/index.js b/ej2-javascript/code-snippet/grid/data-binding-cs3/index.js
new file mode 100644
index 000000000..3e0521b9b
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs3/index.js
@@ -0,0 +1,28 @@
+var count = 0;
+var grid = new ej.grids.Grid({
+    dataSource: data,
+    allowPaging: true,
+    pageSettings: { pageSize: 5, pageCount: 3 },
+    columns: [
+      { field: 'OrderID', headerText: 'OrderID', textAlign: 'Right', width: 120 },
+      { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Right', width: 120 },
+      { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120 }
+    ],
+    height: 280
+});
+grid.appendTo('#Grid');
+
+var newColumn = [
+  { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 125 },
+  { field: 'CustomerName', headerText: 'Customer Name', width: 125 },
+  { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right'},
+  { field: 'Freight', headerText: 'Freight', width: 120, textAlign: 'Right'},
+];
+
+var button = new ej.buttons.Button();
+button.appendTo('#changebutton');
+
+document.getElementById('changebutton').addEventListener('click', function () {
+  count = count + 100;
+  grid.changeDataSource(data.slice(0, count + 100), newColumn);
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs3/index.ts b/ej2-javascript/code-snippet/grid/data-binding-cs3/index.ts
new file mode 100644
index 000000000..bbe44ea72
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs3/index.ts
@@ -0,0 +1,33 @@
+import { Grid, Page } from '@syncfusion/ej2-grids';
+import { Button } from '@syncfusion/ej2-buttons';
+import { data } from './datasource.ts';
+
+Grid.Inject(Page);
+
+let count = 0;
+let grid: Grid = new Grid({
+  dataSource: data,
+  allowPaging: true,
+  pageSettings: { pageSize: 5, pageCount: 3 },
+  columns: [
+    { field: 'OrderID', headerText: 'OrderID', textAlign: 'Right', width: 120 },
+    { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Right', width: 120 },
+    { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120 }
+  ],
+});
+grid.appendTo('#Grid');
+
+let newColumn: object[] = [
+  { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 125 },
+  { field: 'CustomerName', headerText: 'Customer Name', width: 125 },
+  { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right'},
+  { field: 'Freight', headerText: 'Freight', width: 120, textAlign: 'Right'},
+];
+
+let button: Button = new Button();
+button.appendTo('#changebutton');
+
+(document.getElementById('changebutton')as HTMLElement).addEventListener('click', function () {
+  count = count + 100;
+  grid.changeDataSource(data.slice(0, count + 100), newColumn as Object[]);
+});
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/data-binding-cs3/js/index.html b/ej2-javascript/code-snippet/grid/data-binding-cs3/js/index.html
new file mode 100644
index 000000000..76caaa294
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs3/js/index.html
@@ -0,0 +1,34 @@
+<!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/25.2.3/ej2-base/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
+<script src="https://cdn.syncfusion.com/ej2/25.2.3/dist/ej2.min.js" type="text/javascript"></script>
+<script src="es5-datasource.js" type="text/javascript"></script>
+</head>
+<body>
+    <div id="container">
+        <button id="changebutton">Change datasource and column</button>
+        <div style="padding: 10px 10px" id="Grid"></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/grid/data-binding-cs3/systemjs.config.js b/ej2-javascript/code-snippet/grid/data-binding-cs3/systemjs.config.js
new file mode 100644
index 000000000..e705c4607
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs3/systemjs.config.js
@@ -0,0 +1,43 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/25.2.3/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.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-grids": "syncfusion:ej2-grids/dist/ej2-grids.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
+    },
+     meta: { 
+       '*.json': { loader: 'plugin-json' }
+    }
+});
+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/grid/data-binding-cs3/ts/index.html b/ej2-javascript/code-snippet/grid/data-binding-cs3/ts/index.html
new file mode 100644
index 000000000..0d1eb0d97
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/data-binding-cs3/ts/index.html
@@ -0,0 +1,30 @@
+<!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/25.2.3/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-grids/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>
+<body>
+    <div id='loader'>Loading....</div>
+    <div id='container'>
+        <button id="changebutton">Change datasource and column</button>
+        <div style="padding: 10px 10px" id='Grid'></div>        
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/ej2-javascript/grid/data-binding/data-binding.md b/ej2-javascript/grid/data-binding/data-binding.md
index 7e2f7e3fe..da8ca6dd8 100644
--- a/ej2-javascript/grid/data-binding/data-binding.md
+++ b/ej2-javascript/grid/data-binding/data-binding.md
@@ -11,84 +11,218 @@ domainurl: ##DomainURL##
 
 # Data binding in ##Platform_Name## Grid control
 
-The Grid uses [DataManager](../../data), which supports both RESTful JSON data services binding and local JavaScript object array binding. The [dataSource](../../api/grid/#datasource) property can be assigned either with the instance of [DataManager](../../data) or JavaScript object array collection.
-It supports two kinds of data binding method:
+Data binding is a fundamental technique that empowers the Grid control to integrate data into its interface, enabling the creation of dynamic and interactive grid views. This feature is particularly valuable when working with large datasets or when data needs to be fetched remotely. 
+
+The Syncfusion Grid utilizes the **DataManager**, which supports both local binding with JavaScript object arrays and remote binding with RESTful JSON data services. The key property, [dataSource](../../api/grid/#datasource), can be assigned to a DataManager instance or a collection of JavaScript object arrays.
+
+It supports two kinds of data binding methods:
+
 * Local data
 * Remote data
 
-## Sending additional parameters to the server
+## Loading indicator
+
+The Syncfusion ##Platform_Name##  Grid offers a loading animation feature, which makes it easy to identify when data is being loaded or refreshed. This feature provides a clear understanding of the grid's current state and actions, such as sorting, filtering, grouping, and more.
+
+To achieve this, you can utilize the [loadingIndicator.indicatorType](../../api/grid/loadingIndicatorModel/) property of the grid, which supports two types of indicators:
+
+* Spinner (default indicator)
+* Shimmer
+
+The following example demonstrates how to set the `loadingIndicator.indicatorType` property based on changing the dropdown value using the [change](../../api/drop-down-list/#change) event of the `DropDownList` control. The [refreshColumns](../../api/grid/#refreshcolumns) method is used to apply the changes and display the updated loading indicator type. 
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/grid/data-binding-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/grid/data-binding-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/grid/data-binding-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/grid/data-binding-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/grid/data-binding-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/grid/data-binding-cs1" %}
+{% endif %}
+
+## Refresh the datasource using property
+
+Refreshing the data source in a Syncfusion Grid involves updating the data that the grid displays dynamically. This operation is essential when you need to reflect changes in the underlying data without reloading the entire page or control.
+
+To achieve this, you can make use of the [datasource](../../api/grid/#datasource) property in conjunction with the [setProperties](../../api/grid/#refresh) method. This ensures that the grid reflects the changes in the data source without requiring a complete page or control reload.
+
+For example, if you add or delete data source records, follow these steps:
+
+**Step 1**: Add/delete the datasource record by using the following code.
+
+```typescript
+grid.dataSource.unshift(data); // Add a new record.
+grid.dataSource.splice(selectedRow, 1); // Delete a record.
+```
+
+**Step 2**:  Refresh the datasource after changes by invoking the `setProperties` method.
 
-To add a custom parameter to the data request, use the **addParams** method of **Query** class. Assign the **Query** object with additional parameters to the grid [query](../../api/grid/#query) property.
+```typescript
+(grid as Grid).setProperties({ dataSource:  (grid as Grid).dataSource as object[] });
+
+```
+The following example demonstrates adding a new record to the data source through an external button:
 
 {% if page.publishingplatform == "typescript" %}
 
  {% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/grid/grid-cs9/index.ts %}
+{% include code-snippet/grid/data-binding-cs2/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/grid/grid-cs9/index.html %}
+{% include code-snippet/grid/data-binding-cs2/index.html %}
 {% endhighlight %}
 {% endtabs %}
         
-{% previewsample "page.domainurl/code-snippet/grid/grid-cs9" %}
+{% previewsample "page.domainurl/code-snippet/grid/data-binding-cs2" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/grid/grid-cs9/index.js %}
+{% include code-snippet/grid/data-binding-cs2/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/grid/grid-cs9/index.html %}
+{% include code-snippet/grid/data-binding-cs2/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/grid/grid-cs9" %}
+{% previewsample "page.domainurl/code-snippet/grid/data-binding-cs2" %}
 {% endif %}
 
-> The parameters added using the [query](../../api/grid/#query) property will be sent along with the data request for every grid action.
+## Dynamically change the datasource or columns or both
+
+The Grid control in Syncfusion allows dynamic modification of the data source, columns, or both . This feature is particularly valuable when you need to refresh the grid's content and structure without requiring a complete page reload.
+
+To achieve dynamic changes, you can utilize the [changeDataSource](../../api/grid/#changedatasource) method. This method enables you to update the data source, columns, or both, based on your application's requirements. However, it is important to note that during the changing process for the data source and columns, the grid's existing actions such as sorting, filtering, grouping, aggregation, and searching will be reset. The `changeDataSource` method has two optional arguments: the first argument represents the data source, and the second argument represents the columns. The various uses of the `changeDataSource` method are explained in the following topic.
+
+**1. Change both data source and columns:**
+
+To modify both the existing columns and the data source, you need to pass the both arguments to the `changeDataSource` method. The following example demonstrates how to change both the data source and columns.
+
+You can assign a JavaScript object array to the [dataSource](../../api/grid/#datasource) property to bind local data to the grid. The code below provides an example of how to create a data source for the grid.
+
+```typescript
+    export let data: Object[] = [
+    {
+        OrderID: 10248, CustomerID: 'VINET', Freight: 32.38,
+        ShipCity: 'Reims'
+    },
+    {
+        OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61,
+        ShipCity: 'Münster'
+    },
+    {
+        OrderID: 10250, CustomerID: 'HANAR', Freight: 61.34,
+        ShipCity: 'Rio de Janeiro'
+    }];
+```
+
+The following code demonstrates how to create the [columns](../../grid/columns/columns) for the grid, which are based on the provided grid data source.
 
-## Handling HTTP error
+```typescript
+    public newColumn: ColumnModel[] = [
+        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 125 },
+        { field: 'CustomerID', headerText: 'Customer ID', width: 125 },
+    ];
+```
 
-During server interaction from the grid, some server-side exceptions may occur, and you can acquire those error messages or exception details
-in client-side using the [actionFailure](../../api/grid/#actionfailure) event.
+The following code demonstrates updating the data source and columns defined above using the `changeDataSource` method.
 
-The argument passed to the [actionFailure](../../api/grid/#actionfailure) event contains the error details returned from the server.
+```typescript
+    gridInstance.changeDataSource(data, newColumn);
+```
 
-> The [actionFailure](../../api/grid/#actionfailure) event will be triggered not only for the server errors, but also when there is an exception while processing the grid actions.
+**2. Modify only the existing columns:**
 
-## Binding with ajax
+To modify the existing columns in a grid, you can either add or remove columns or change the entire set of columns using the [changeDataSource](../../api/grid/#changedatasource) method. To use this method, you should set the first parameter to null and provide the new columns as the second parameter. However, please note that if a column field is not specified in the data source, its corresponding column values will be empty. The following example illustrates how to modify existing columns.
 
-You can use Grid [dataSource](../../api/grid/#datasource) property to bind the datasource to Grid from external ajax request. In the below code we have fetched the datasource from the server with the help of ajax request and provided that to [dataSource](../../api/grid/#datasource) property by using **onSuccess** event of the ajax.
+The following code demonstrates how to add new columns with existing grid columns ('newColumn') by using `changeDataSource` method.
 
-```ts
-import { Grid, Page } from '@syncfusion/ej2-grids';
-import { Ajax } from '@syncfusion/ej2-base';
+```typescript
+    public newColumn1: ColumnModel[] = [
+        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 125 },
+        { field: 'ShipCity', headerText: 'ShipCity', width: 125 },
+    ];
+    let column: any = newColumn.push(newColumn1);
+    gridInstance.changeDataSource(null, column);
+```
 
-Grid.Inject(Page);
-let grid: Grid = new Grid({
-    allowPaging: true,
-    columns: [
-        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
-        { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Right', width: 120 },
-        { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 120 },
-        { field: 'ShipCountry', headerText: 'Ship Country', textAlign: 'Right', width: 120 }
-    ]
-});
-grid.appendTo('#Grid');
+**3. Modify only the data source:**
+
+You can change the entire data source in the grid using the `changeDataSource` method. To use this method, you should provide the data source as the first argument, and  the second argument which is optional can be used to specify new columns for the grid. If you are not specifying the columns, the grid will generate the columns automatically based on the data source. The following example demonstrates how to modify the data source.
+
+You can assign a JavaScript object array to the `dataSource` property to bind local data to the grid. The code below provides an example of how to create a new data source for the grid.
+
+```typescript
+     export let employeeData: Object[] = [
+    {
+        FirstName: 'Nancy', City: 'Seattle', Region: 'WA',
+        Country: 'USA'
+    },
+    {
+        FirstName: 'Andrew', City: 'London', Region: null,
+        Country: 'UK',
+    },
+    {
+        FirstName: 'Janet', City: 'Kirkland', Region: 'WA',
+        Country: 'USA'
+    }];
+```
 
-let button = document.getElementById('btn');
-button.addEventListener("click", function(e){
-    let ajax = new Ajax("https://ej2services.syncfusion.com/production/web-services/api/Orders", "GET");
-    ajax.send();
-    ajax.onSuccess = function (data: string) {
-        grid.dataSource = JSON.parse(data);
-    };
-});
+The following code demonstrates, how to use the `changeDataSource` method to bind the new **employeeData** to the grid.
+
+```typescript
+    gridInstance.changeDataSource(employeeData);
 ```
 
-> * If you bind the dataSource from this way, then it acts like a local dataSource. So you cannot perform any server side crud actions.
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/grid/data-binding-cs3/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/grid/data-binding-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/grid/data-binding-cs3" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/grid/data-binding-cs3/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/grid/data-binding-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/grid/data-binding-cs3" %}
+{% endif %}
+
+>* The Grid state persistence feature does not support the  `changeDataSource` method.
+>* In this document, the above sample uses the local data for `changeDataSource` method. For those using a remote data source, refer to the [FlexibleData](https://ej2.syncfusion.com/demos/#/bootstrap5/grid/flexible-data.html) resource.
 
 ## See Also
 
diff --git a/ej2-javascript/uploader/async.md b/ej2-javascript/uploader/async.md
index e7744cb06..7df2bac4c 100644
--- a/ej2-javascript/uploader/async.md
+++ b/ej2-javascript/uploader/async.md
@@ -477,9 +477,9 @@ The following code block shows how to add the additional headers with save and r
 import { Uploader} from '@syncfusion/ej2-inputs';
 
 let uploadObj: Uploader = new Uploader({
-    asyncSettings: {
-        saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
-        removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove'
+asyncSettings: {
+        saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
+        removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
     },
     uploading: addHeaders,
     removing: addHeaders
diff --git a/ej2-typescript-toc.html b/ej2-typescript-toc.html
index 74accc62d..0b2419807 100644
--- a/ej2-typescript-toc.html
+++ b/ej2-typescript-toc.html
@@ -1154,9 +1154,8 @@
 <ul>
 <li><a href="/ej2-typescript/grid/getting-started">Getting Started</a></li>
 <li><a href="/ej2-typescript/grid/module">Feature Modules</a></li>
-<li>Data Binding
+<li><a href="/ej2-typescript/grid/data-binding/data-binding">Data Binding</a>
 <ul>
-<li><a href="/ej2-typescript/grid/data-binding/data-binding">Data Binding</a></li>
 <li><a href="/ej2-typescript/grid/data-binding/local-data">Local Data</a></li>
 <li><a href="/ej2-typescript/grid/data-binding/remote-data">Remote Data</a></li>
 </ul>