+
+
+
-
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/change-header-text-cs1/systemjs.config.js b/ej2-javascript/code-snippet/grid/change-header-text-cs1/systemjs.config.js
index cf6802bff..0f7f79e2a 100644
--- a/ej2-javascript/code-snippet/grid/change-header-text-cs1/systemjs.config.js
+++ b/ej2-javascript/code-snippet/grid/change-header-text-cs1/systemjs.config.js
@@ -10,7 +10,7 @@ System.config({
}
},
paths: {
- "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/23.2.4/"
},
map: {
main: "index.ts",
diff --git a/ej2-javascript/code-snippet/grid/change-header-text-cs1/ts/index.html b/ej2-javascript/code-snippet/grid/change-header-text-cs1/ts/index.html
index 501cce37c..c73cbb9be 100644
--- a/ej2-javascript/code-snippet/grid/change-header-text-cs1/ts/index.html
+++ b/ej2-javascript/code-snippet/grid/change-header-text-cs1/ts/index.html
@@ -2,35 +2,43 @@
-
Loading....
-
-
+
Loading....
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-allcolumn/datasource.ts b/ej2-javascript/code-snippet/grid/column-header-allcolumn/datasource.ts
new file mode 100644
index 000000000..ada2e0c74
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-allcolumn/datasource.ts
@@ -0,0 +1,77 @@
+export let data: Object[] = [
+ {
+ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, 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', EmployeeID: 6, 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', 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
+ },
+ {
+ OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 3, 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', EmployeeID: 5, 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', 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
+ },
+ {
+ OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 1, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 8, 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
+ }];
+
diff --git a/ej2-javascript/code-snippet/grid/column-header-allcolumn/es5-datasource.js b/ej2-javascript/code-snippet/grid/column-header-allcolumn/es5-datasource.js
new file mode 100644
index 000000000..955466c83
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-allcolumn/es5-datasource.js
@@ -0,0 +1,76 @@
+var data = [
+ {
+ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, 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', EmployeeID: 6, 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', 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
+ },
+ {
+ OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 3, 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', EmployeeID: 5, 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', 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
+ },
+ {
+ OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 1, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 8, 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/column-header-allcolumn/index.css b/ej2-javascript/code-snippet/grid/column-header-allcolumn/index.css
new file mode 100644
index 000000000..0fba63172
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-allcolumn/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/column-header-allcolumn/index.js b/ej2-javascript/code-snippet/grid/column-header-allcolumn/index.js
new file mode 100644
index 000000000..030c5981c
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-allcolumn/index.js
@@ -0,0 +1,32 @@
+var grid = new ej.grids.Grid({
+ dataSource: data,
+ columns: [
+ { field: 'OrderID', headerText: 'OrderID', textAlign: 'Right', width: 90 },
+ { field: 'CustomerID', headerText: 'CustomerID', width: 120 },
+ { field: 'Freight', headerText: 'Freight', textAlign: 'Right', format: 'C2', width: 90 },
+ { field: 'ShipCity', headerText: 'Ship City', format: 'yMd', width: 120 },
+ ],
+ height: 280,
+});
+grid.appendTo('#Grid');
+
+var headerTextMap =
+{
+ 'OrderID': 'Order ID',
+ 'CustomerID': 'Customer ID',
+ 'Freight': 'Freight Charge',
+ 'ShipCity': 'Ship To City'
+}
+
+var button = new ej.buttons.Button({
+ content: 'Change Header Text',
+ cssClass: "e-success",
+});
+button.appendTo('#buttons');
+
+document.getElementById('buttons').onclick = function () {
+ grid.columns.forEach((column) => {
+ column.headerText = headerTextMap[column.field];
+ });
+ grid.refreshHeader();
+};
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-allcolumn/index.ts b/ej2-javascript/code-snippet/grid/column-header-allcolumn/index.ts
new file mode 100644
index 000000000..335276153
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-allcolumn/index.ts
@@ -0,0 +1,35 @@
+import { Button } from '@syncfusion/ej2-buttons';
+import { Grid, ColumnModel } from '@syncfusion/ej2-grids';
+import { data } from './datasource.ts';
+
+let grid: Grid = new Grid({
+ dataSource: data,
+ height: 280,
+ columns: [
+ { field: 'OrderID', headerText: 'OrderID', textAlign: 'Right', width: 100 },
+ { field: 'CustomerID', headerText: 'CustomerID', width: 120 },
+ { field: 'Freight', headerText: 'Freight', width: 120 },
+ { field: 'ShipCity', headerText: 'Ship City', format: 'yMd', width: 100 },
+ ],
+});
+grid.appendTo('#Grid');
+
+let headerTextMap = {
+ 'OrderID': 'Order ID',
+ 'CustomerID': 'Customer ID',
+ 'Freight': 'Freight Charge',
+ 'ShipCity': 'Ship To City',
+}
+
+let button: Button = new Button({
+ content: 'Change Header Text',
+ cssClass: "e-success",
+});
+button.appendTo('#buttons');
+
+(document.getElementById('buttons') as HTMLElement).onclick = function () {
+ grid.columns.forEach((column: ColumnModel) => {
+ column.headerText = headerTextMap[column.field];
+ });
+ grid.refreshHeader();
+};
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-allcolumn/js/index.html b/ej2-javascript/code-snippet/grid/column-header-allcolumn/js/index.html
new file mode 100644
index 000000000..09b67b68e
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-allcolumn/js/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+
EJ2 Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-allcolumn/systemjs.config.js b/ej2-javascript/code-snippet/grid/column-header-allcolumn/systemjs.config.js
new file mode 100644
index 000000000..c2cf2f86d
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-allcolumn/systemjs.config.js
@@ -0,0 +1,44 @@
+System.config({
+ transpiler: "typescript",
+ typescriptOptions: {
+ compilerOptions: {
+ target: "umd",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/23.2.4/"
+ },
+ 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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.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-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.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-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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/column-header-allcolumn/ts/index.html b/ej2-javascript/code-snippet/grid/column-header-allcolumn/ts/index.html
new file mode 100644
index 000000000..e6bebec33
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-allcolumn/ts/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
EJ2 Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading....
+
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-autowrap/datasource.ts b/ej2-javascript/code-snippet/grid/column-header-autowrap/datasource.ts
new file mode 100644
index 000000000..9ac28b3c1
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-autowrap/datasource.ts
@@ -0,0 +1,113 @@
+export let inventoryData: Object[] = [
+
+ {
+ 'Inventor': 'Kia Silverbrook',
+ 'NumberofPatentFamilies': 4737,
+ 'Country': 'Australia',
+ 'Number of INPADOC patents': 9839,
+ 'Active': '1994-2016',
+ 'Mainfieldsofinvention': 'Printing, Digital paper, Internet, Electronics,Lab-on-a-chip, MEMS, Mechanical, VLSI',
+
+ },
+
+ {
+ 'Inventor': 'Shunpei Yamazaki',
+ 'NumberofPatentFamilies': 4677,
+ 'Country': 'Japan',
+ 'Number of INPADOC patents': '10000+',
+ 'Active': '1976-2016',
+ 'Mainfieldsofinvention': 'Thin film transistors, Liquid crystal displays, Solar cells, Flash memory, OLED',
+
+ },
+
+ {
+ 'Inventor': 'Lowell L. Wood, Jr.',
+ 'NumberofPatentFamilies': 1419,
+ 'Country': 'USA',
+ 'Number of INPADOC patents': 1332,
+ 'Active': '1977-2016',
+ 'Mainfieldsofinvention': 'Mosquito laser, Nuclear weapons',
+
+ },
+
+ {
+ 'Inventor': 'Paul Lapstun',
+ 'NumberofPatentFamilies': 1281,
+ 'Country': 'Australia',
+ 'Number of INPADOC patents': 3099,
+ 'Active': '2000-2016',
+ 'Mainfieldsofinvention': 'Printing, Digital paper, Internet, Electronics, CGI, VLSI',
+
+ },
+
+ {
+ 'Inventor': 'Gurtej Sandhu',
+ 'NumberofPatentFamilies': 1255,
+ 'Country': 'India',
+ 'Number of INPADOC patents': 2038,
+ 'Active': '1991-2016',
+ 'Mainfieldsofinvention': 'Thin film processes and materials, VLSI, Semiconductor device fabrication',
+
+ },
+
+ {
+ 'Inventor': 'Jun Koyama',
+ 'NumberofPatentFamilies': 1240,
+ 'Country': 'Japan',
+ 'Number of INPADOC patents': 4126,
+ 'Active': '1991-2016',
+ 'Mainfieldsofinvention': 'Thin film transistors, Liquid crystal displays, OLED',
+
+ },
+
+ {
+ 'Inventor': 'Roderick A. Hyde',
+ 'NumberofPatentFamilies': 1240,
+ 'Country': 'USA',
+ 'Number of INPADOC patents': 3360,
+ 'Active': '2001-2016',
+ 'Mainfieldsofinvention': 'Various',
+
+ },
+
+ {
+ 'Inventor': 'Leonard Forbes',
+ 'NumberofPatentFamilies': 1093,
+ 'Country': 'Canada',
+ 'Number of INPADOC patents': 1398,
+ 'Active': '1991-2016',
+ 'Mainfieldsofinvention': 'Semiconductor Memories, CCDs, Thin film processes and materials, VLSI',
+
+ },
+
+ {
+ 'Inventor': 'Thomas Edison',
+ 'NumberofPatentFamilies': 1084,
+ 'Country': 'USA',
+ 'Number of INPADOC patents': 2332,
+ 'Active': '1847(b)-1931(d)',
+ 'Mainfieldsofinvention': 'Electric power, Lighting, Batteries, Phonograph, Cement, Telegraphy, Mining',
+
+ },
+
+ {
+ 'Inventor': 'Donald E. Weder',
+ 'NumberofPatentFamilies': 999,
+ 'Country': 'USA',
+ 'Number of INPADOC patents': 1993,
+ 'Active': '1976-2015',
+ 'Mainfieldsofinvention': 'Florist supplies',
+
+ },
+
+ {
+ 'Inventor': 'George Albert Lyon',
+ 'NumberofPatentFamilies': 993,
+ 'Country': 'Canada',
+ 'Number of INPADOC patents': 'NA',
+ 'Active': '1882(b)-1961(d)',
+ 'Mainfieldsofinvention': 'Automotive, Stainless steel products',
+
+ },
+
+];
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-autowrap/es5-datasource.js b/ej2-javascript/code-snippet/grid/column-header-autowrap/es5-datasource.js
new file mode 100644
index 000000000..432353593
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-autowrap/es5-datasource.js
@@ -0,0 +1,111 @@
+var data = [
+ {
+ 'Inventor': 'Kia Silverbrook',
+ 'NumberofPatentFamilies': 4737,
+ 'Country': 'Australia',
+ 'Number of INPADOC patents': 9839,
+ 'Active': '1994-2016',
+ 'Mainfieldsofinvention': 'Printing, Digital paper, Internet, Electronics,Lab-on-a-chip, MEMS, Mechanical, VLSI',
+
+ },
+
+ {
+ 'Inventor': 'Shunpei Yamazaki',
+ 'NumberofPatentFamilies': 4677,
+ 'Country': 'Japan',
+ 'Number of INPADOC patents': '10000+',
+ 'Active': '1976-2016',
+ 'Mainfieldsofinvention': 'Thin film transistors, Liquid crystal displays, Solar cells, Flash memory, OLED',
+
+ },
+
+ {
+ 'Inventor': 'Lowell L. Wood, Jr.',
+ 'NumberofPatentFamilies': 1419,
+ 'Country': 'USA',
+ 'Number of INPADOC patents': 1332,
+ 'Active': '1977-2016',
+ 'Mainfieldsofinvention': 'Mosquito laser, Nuclear weapons',
+
+ },
+
+ {
+ 'Inventor': 'Paul Lapstun',
+ 'NumberofPatentFamilies': 1281,
+ 'Country': 'Australia',
+ 'Number of INPADOC patents': 3099,
+ 'Active': '2000-2016',
+ 'Mainfieldsofinvention': 'Printing, Digital paper, Internet, Electronics, CGI, VLSI',
+
+ },
+
+ {
+ 'Inventor': 'Gurtej Sandhu',
+ 'NumberofPatentFamilies': 1255,
+ 'Country': 'India',
+ 'Number of INPADOC patents': 2038,
+ 'Active': '1991-2016',
+ 'Mainfieldsofinvention': 'Thin film processes and materials, VLSI, Semiconductor device fabrication',
+
+ },
+
+ {
+ 'Inventor': 'Jun Koyama',
+ 'NumberofPatentFamilies': 1240,
+ 'Country': 'Japan',
+ 'Number of INPADOC patents': 4126,
+ 'Active': '1991-2016',
+ 'Mainfieldsofinvention': 'Thin film transistors, Liquid crystal displays, OLED',
+
+ },
+
+ {
+ 'Inventor': 'Roderick A. Hyde',
+ 'NumberofPatentFamilies': 1240,
+ 'Country': 'USA',
+ 'Number of INPADOC patents': 3360,
+ 'Active': '2001-2016',
+ 'Mainfieldsofinvention': 'Various',
+
+ },
+
+ {
+ 'Inventor': 'Leonard Forbes',
+ 'NumberofPatentFamilies': 1093,
+ 'Country': 'Canada',
+ 'Number of INPADOC patents': 1398,
+ 'Active': '1991-2016',
+ 'Mainfieldsofinvention': 'Semiconductor Memories, CCDs, Thin film processes and materials, VLSI',
+
+ },
+
+ {
+ 'Inventor': 'Thomas Edison',
+ 'NumberofPatentFamilies': 1084,
+ 'Country': 'USA',
+ 'Number of INPADOC patents': 2332,
+ 'Active': '1847(b)-1931(d)',
+ 'Mainfieldsofinvention': 'Electric power, Lighting, Batteries, Phonograph, Cement, Telegraphy, Mining',
+
+ },
+
+ {
+ 'Inventor': 'Donald E. Weder',
+ 'NumberofPatentFamilies': 999,
+ 'Country': 'USA',
+ 'Number of INPADOC patents': 1993,
+ 'Active': '1976-2015',
+ 'Mainfieldsofinvention': 'Florist supplies',
+
+ },
+
+ {
+ 'Inventor': 'George Albert Lyon',
+ 'NumberofPatentFamilies': 993,
+ 'Country': 'Canada',
+ 'Number of INPADOC patents': 'NA',
+ 'Active': '1882(b)-1961(d)',
+ 'Mainfieldsofinvention': 'Automotive, Stainless steel products',
+
+ },
+];
diff --git a/ej2-javascript/code-snippet/grid/column-header-autowrap/index.css b/ej2-javascript/code-snippet/grid/column-header-autowrap/index.css
new file mode 100644
index 000000000..3e3720eea
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-autowrap/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%;
+}
diff --git a/ej2-javascript/code-snippet/grid/column-header-autowrap/index.js b/ej2-javascript/code-snippet/grid/column-header-autowrap/index.js
new file mode 100644
index 000000000..a627aa2cb
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-autowrap/index.js
@@ -0,0 +1,35 @@
+var grid = new ej.grids.Grid({
+
+ dataSource: data,
+ allowPaging: true,
+ allowTextWrap: true,
+ textWrapSettings: { wrapMode: 'Header' },
+ height: 400,
+
+ columns: [
+ { field: 'Inventor', headerText: 'Inventor Name', width: 180, textAlign: 'Right' },
+ { field: 'NumberofPatentFamilies', headerText: 'Number of Patent Families', width: 180, textAlign: "Right" },
+ { field: 'Country', headerText: 'Country', width: 140, textAlign: 'Right', },
+ { field: 'Active', headerText: 'Active', width: 120 },
+ { field: 'Mainfieldsofinvention', headerText: 'Main Feilds Of Invention', width: 200 },
+ ],
+});
+grid.appendTo('#Grid');
+
+var dropdownData = [
+ { text: 'Header', value: 'Header' },
+ { text: 'Both', value: 'Both' },
+]
+
+var dropdown = new ej.dropdowns.DropDownList({
+ dataSource: dropdownData,
+ popupHeight: '240px',
+ width: '100px',
+ value: grid.textWrapSettings.wrapMode,
+ change: valueChange,
+});
+dropdown.appendTo('#dropdownlist');
+
+function valueChange(args) {
+ grid.textWrapSettings.wrapMode = args.value;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-autowrap/index.ts b/ej2-javascript/code-snippet/grid/column-header-autowrap/index.ts
new file mode 100644
index 000000000..1dbec90d2
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-autowrap/index.ts
@@ -0,0 +1,39 @@
+import { Grid, Page, ChangeEventArgs } from '@syncfusion/ej2-grids';
+import { DropDownList } from '@syncfusion/ej2-dropdowns';
+import { inventoryData } from './datasource.ts';
+
+Grid.Inject(Page);
+
+let grid: Grid = new Grid(
+ {
+ dataSource: inventoryData,
+ allowPaging: true,
+ allowTextWrap: true,
+ textWrapSettings: { wrapMode: 'Header' },
+ columns: [
+ { field: 'Inventor', headerText: 'Inventor Name', width: 180, textAlign: 'Right' },
+ { field: 'NumberofPatentFamilies', headerText: 'Number of Patent Families', width: 180 },
+ { field: 'Country', headerText: 'Country', width: 140 },
+ { field: 'Active', headerText: 'Active', width: 120 },
+ { field: 'Mainfieldsofinvention', headerText: 'Main Feilds Of Invention', width: 200 },
+ ],
+ });
+grid.appendTo('#Grid');
+
+let dropdownData = [
+ { text: 'Header', value: 'Header' },
+ { text: 'Both', value: 'Both' },
+]
+
+let dropDownColumn: DropDownList = new DropDownList({
+ dataSource: dropdownData,
+ popupHeight: '240px',
+ width: '120px',
+ value: 'Header',
+ change: change,
+});
+dropDownColumn.appendTo('#dropdownlist');
+
+function change(args: ChangeEventArgs) {
+ grid.textWrapSettings.wrapMode = args.value;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-autowrap/js/index.html b/ej2-javascript/code-snippet/grid/column-header-autowrap/js/index.html
new file mode 100644
index 000000000..0e539d801
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-autowrap/js/index.html
@@ -0,0 +1,44 @@
+
+
+
+
+
EJ2 Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-autowrap/systemjs.config.js b/ej2-javascript/code-snippet/grid/column-header-autowrap/systemjs.config.js
new file mode 100644
index 000000000..482b04ee5
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-autowrap/systemjs.config.js
@@ -0,0 +1,44 @@
+System.config({
+ transpiler: "typescript",
+ typescriptOptions: {
+ compilerOptions: {
+ target: "umd",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/23.2.4/"
+ },
+ 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-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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.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-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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/column-header-autowrap/ts/index.html b/ej2-javascript/code-snippet/grid/column-header-autowrap/ts/index.html
new file mode 100644
index 000000000..b7bdfcb2c
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-autowrap/ts/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
EJ2 Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading....
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-height/datasource.ts b/ej2-javascript/code-snippet/grid/column-header-height/datasource.ts
new file mode 100644
index 000000000..ada2e0c74
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-height/datasource.ts
@@ -0,0 +1,77 @@
+export let data: Object[] = [
+ {
+ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, 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', EmployeeID: 6, 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', 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
+ },
+ {
+ OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 3, 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', EmployeeID: 5, 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', 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
+ },
+ {
+ OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 1, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 8, 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
+ }];
+
diff --git a/ej2-javascript/code-snippet/grid/column-header-height/es5-datasource.js b/ej2-javascript/code-snippet/grid/column-header-height/es5-datasource.js
new file mode 100644
index 000000000..955466c83
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-height/es5-datasource.js
@@ -0,0 +1,76 @@
+var data = [
+ {
+ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, 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', EmployeeID: 6, 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', 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
+ },
+ {
+ OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 3, 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', EmployeeID: 5, 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', 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
+ },
+ {
+ OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 1, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 8, 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/column-header-height/index.css b/ej2-javascript/code-snippet/grid/column-header-height/index.css
new file mode 100644
index 000000000..0fba63172
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-height/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/column-header-height/index.js b/ej2-javascript/code-snippet/grid/column-header-height/index.js
new file mode 100644
index 000000000..ca94508fe
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-height/index.js
@@ -0,0 +1,35 @@
+var grid = new ej.grids.Grid({
+ dataSource: data,
+ columns: [
+ {field: 'OrderID',headerText: 'Order ID',width: 120},
+ {field: 'CustomerID',headerText: 'Customer ID',width: 140,},
+ {field: 'Freight',headerText:'Freight', format: 'C', width: 120 },
+ {field: 'OrderDate',headerText: 'Order Date',format: 'yMd',width: 140},
+ ],
+});
+grid.appendTo('#Grid');
+
+var button = new ej.buttons.Button({
+ content: 'CHANGE HEIGHT TO 20PX',
+});
+button.appendTo('#small');
+
+var button1 = new ej.buttons.Button({
+ content: 'DEFAULT HEIGHT TO 42PX',
+});
+button1.appendTo('#medium');
+
+var button2 = new ej.buttons.Button({
+ content: 'CHANGE HEIGHT TO 60PX',
+});
+button2.appendTo('#big');
+
+document.getElementById('changeHeight').onclick = function (event) {
+ var heightMap = { small: '20px', medium: '42px', big: '60px' };
+ var headerCells = (grid).getHeaderContent().querySelectorAll('.e-headercell');
+ headerCells.forEach((headerCell) => {
+ headerCell.style.height = (heightMap)[
+ event.target.id
+ ];
+ });
+}
diff --git a/ej2-javascript/code-snippet/grid/column-header-height/index.ts b/ej2-javascript/code-snippet/grid/column-header-height/index.ts
new file mode 100644
index 000000000..52bd50504
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-height/index.ts
@@ -0,0 +1,45 @@
+import { Grid } from '@syncfusion/ej2-grids';
+import { data } from './datasource.ts';
+import { Button } from '@syncfusion/ej2-buttons';
+
+let grid: Grid = new Grid({
+ dataSource: data,
+ columns: [
+ { field: 'OrderID', headerText: 'Order ID', width: 120 },
+ { field: 'CustomerID', headerText: 'Customer ID', width: 140 },
+ { field: 'Freight',headerText:'Freight', format: 'C2', width: 120 },
+ { field: 'OrderDate', headerText: 'Order Date', format: 'yMd', width: 140 },
+ ]
+});
+grid.appendTo('#Grid');
+
+let button: Button = new Button(
+ {
+ content: 'CHANGE HEIGHT TO 20PX',
+ }
+)
+button.appendTo('#small');
+
+let button1: Button = new Button(
+ {
+ content: 'DEFAULT HEIGHT TO 42PX',
+ }
+);
+button1.appendTo('#medium');
+
+let button3: Button = new Button(
+ {
+ content: 'CHANGE HEIGHT TO 60PX',
+ }
+);
+button3.appendTo('#big');
+
+(
document.getElementById('changeHeight')).onclick = function (event) {
+ let heightMap = { small: '20px', medium: '42px', big: '60px' };
+ let headerCells = (grid).getHeaderContent().querySelectorAll('.e-headercell');
+ headerCells.forEach((headerCell: HTMLElement) => {
+ (headerCell as HTMLElement).style.height = (heightMap)[
+ (event.target as HTMLButtonElement).id
+ ];
+ });
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-height/js/index.html b/ej2-javascript/code-snippet/grid/column-header-height/js/index.html
new file mode 100644
index 000000000..afee6b978
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-height/js/index.html
@@ -0,0 +1,50 @@
+
+
+
+
+ EJ2 Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-height/systemjs.config.js b/ej2-javascript/code-snippet/grid/column-header-height/systemjs.config.js
new file mode 100644
index 000000000..c2cf2f86d
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-height/systemjs.config.js
@@ -0,0 +1,44 @@
+System.config({
+ transpiler: "typescript",
+ typescriptOptions: {
+ compilerOptions: {
+ target: "umd",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/23.2.4/"
+ },
+ 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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.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-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.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-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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/column-header-height/ts/index.html b/ej2-javascript/code-snippet/grid/column-header-height/ts/index.html
new file mode 100644
index 000000000..df2716b64
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-height/ts/index.html
@@ -0,0 +1,45 @@
+
+
+
+
+ EJ2 Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading....
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-property/datasource.ts b/ej2-javascript/code-snippet/grid/column-header-property/datasource.ts
new file mode 100644
index 000000000..ada2e0c74
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-property/datasource.ts
@@ -0,0 +1,77 @@
+export let data: Object[] = [
+ {
+ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, 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', EmployeeID: 6, 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', 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
+ },
+ {
+ OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 3, 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', EmployeeID: 5, 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', 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
+ },
+ {
+ OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 1, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 8, 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
+ }];
+
diff --git a/ej2-javascript/code-snippet/grid/column-header-property/es5-datasource.js b/ej2-javascript/code-snippet/grid/column-header-property/es5-datasource.js
new file mode 100644
index 000000000..955466c83
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-property/es5-datasource.js
@@ -0,0 +1,76 @@
+var data = [
+ {
+ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, 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', EmployeeID: 6, 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', 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
+ },
+ {
+ OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 3, 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', EmployeeID: 5, 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', 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
+ },
+ {
+ OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 1, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 8, 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/column-header-property/index.css b/ej2-javascript/code-snippet/grid/column-header-property/index.css
new file mode 100644
index 000000000..0fba63172
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-property/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/column-header-property/index.js b/ej2-javascript/code-snippet/grid/column-header-property/index.js
new file mode 100644
index 000000000..abfaa777d
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-property/index.js
@@ -0,0 +1,50 @@
+var grid = new ej.grids.Grid({
+ dataSource: data,
+ allowPaging: true,
+ columns: [
+ { field: 'OrderID', headerText: 'Order ID', headerValueAccessor: headerValueAccessor, width: 120 },
+ { field: 'CustomerID', headerText: 'Customer ID', headerValueAccessor: headerValueAccessor, width: 140 },
+ { field: 'Freight', headerText: 'Freight', headerValueAccessor: headerValueAccessor, format: 'C', width: 120 },
+ { field: 'OrderDate', headerText: 'Order Date', headerValueAccessor: headerValueAccessor, format: 'yMd', width: 140 },
+ ],
+});
+grid.appendTo('#Grid');
+
+var columns = [
+ { text: 'OrderID', value: 'OrderID' },
+ { text: 'CustomerID', value: 'CustomerID' },
+ { text: 'Freight', value: 'Freight' },
+ { text: 'OrderDate', value: 'OrderDate' },
+];
+
+var field = { text: 'text', value: 'value' };
+
+var dropdown = new ej.dropdowns.DropDownList({
+ dataSource: columns,
+ fields: field,
+ value: 'OrderID',
+ popupHeight: '240px',
+ width: 220,
+});
+dropdown.appendTo('#dropdownlist');
+
+var textbox = new ej.inputs.TextBox({
+ placeholder: 'Enter new header text',
+ width: 220,
+});
+textbox.appendTo('#textboxvalue');
+
+var button = new ej.buttons.Button({
+ content: 'Change',
+});
+button.appendTo('#buttons');
+
+function headerValueAccessor(field, columns) {
+ if (textbox && textbox.value && textbox.value.trim() !== '' && columns.field === dropdown.value) {
+ columns.headerText = textbox.value;
+ }
+}
+
+document.getElementById('buttons').onclick = function () {
+ grid.refreshHeader();
+};
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-property/index.ts b/ej2-javascript/code-snippet/grid/column-header-property/index.ts
new file mode 100644
index 000000000..8e7d81551
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-property/index.ts
@@ -0,0 +1,59 @@
+import { Grid, Page, ColumnModel } from '@syncfusion/ej2-grids';
+import { DropDownList } from '@syncfusion/ej2-dropdowns';
+import { data } from './datasource.ts';
+import { Button } from '@syncfusion/ej2-buttons';
+import { TextBox } from '@syncfusion/ej2-inputs';
+
+Grid.Inject(Page);
+
+let grid: Grid = new Grid({
+ dataSource: data,
+ allowPaging: true,
+
+ columns: [
+ { field: 'OrderID', headerText: 'Order ID', width: 120, headerValueAccessor: headerValueAccessor },
+ { field: 'CustomerID', headerText: 'Customer ID', width: 150, headerValueAccessor: headerValueAccessor },
+ { field: 'Freight', width: 120, format: 'C2', headerValueAccessor: headerValueAccessor },
+ { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', headerValueAccessor: headerValueAccessor },
+ ]
+});
+grid.appendTo('#Grid');
+
+let columns = [
+ { text: 'OrderID', value: 'OrderID' },
+ { text: 'CustomerID', value: 'CustomerID' },
+ { text: 'Freight', value: 'Freight' },
+ { text: 'OrderDate', value: 'OrderDate' },
+];
+
+let field = { text: 'text', value: 'value' };
+
+let dropDownColumn: DropDownList = new DropDownList({
+ dataSource: columns,
+ fields: field,
+ value: 'OrderID',
+ popupHeight: '240px',
+ width: '120px',
+});
+dropDownColumn.appendTo('#dropdownlist');
+
+let textbox: TextBox = new TextBox({
+ placeholder: 'Enter new header text',
+ width: 140,
+});
+textbox.appendTo('#textboxvalue');
+
+let button: Button = new Button({
+ content: 'Change',
+});
+button.appendTo('#buttons');
+
+function headerValueAccessor(field, columns: ColumnModel) {
+ if (textbox && textbox.value && textbox.value.trim() !== '' && columns.field === dropDownColumn.value) {
+ columns.headerText = textbox.value;
+ }
+}
+
+(document.getElementById('buttons')).onclick = function () {
+ grid.refreshHeader();
+};
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-property/js/index.html b/ej2-javascript/code-snippet/grid/column-header-property/js/index.html
new file mode 100644
index 000000000..5f761142a
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-property/js/index.html
@@ -0,0 +1,50 @@
+
+
+
+
+ EJ2 Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-property/systemjs.config.js b/ej2-javascript/code-snippet/grid/column-header-property/systemjs.config.js
new file mode 100644
index 000000000..c2cf2f86d
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-property/systemjs.config.js
@@ -0,0 +1,44 @@
+System.config({
+ transpiler: "typescript",
+ typescriptOptions: {
+ compilerOptions: {
+ target: "umd",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/23.2.4/"
+ },
+ 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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.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-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.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-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.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/column-header-property/ts/index.html b/ej2-javascript/code-snippet/grid/column-header-property/ts/index.html
new file mode 100644
index 000000000..0ba231a3d
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-property/ts/index.html
@@ -0,0 +1,45 @@
+
+
+
+
+ EJ2 Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading....
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/grid/column-header-refreshHeader/datasource.ts b/ej2-javascript/code-snippet/grid/column-header-refreshHeader/datasource.ts
new file mode 100644
index 000000000..ada2e0c74
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-refreshHeader/datasource.ts
@@ -0,0 +1,77 @@
+export let data: Object[] = [
+ {
+ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, 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', EmployeeID: 6, 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', 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
+ },
+ {
+ OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 3, 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', EmployeeID: 5, 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', 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
+ },
+ {
+ OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 1, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 8, 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
+ }];
+
diff --git a/ej2-javascript/code-snippet/grid/column-header-refreshHeader/es5-datasource.js b/ej2-javascript/code-snippet/grid/column-header-refreshHeader/es5-datasource.js
new file mode 100644
index 000000000..955466c83
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-refreshHeader/es5-datasource.js
@@ -0,0 +1,76 @@
+var data = [
+ {
+ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, 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', EmployeeID: 6, 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', 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
+ },
+ {
+ OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 3, 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', EmployeeID: 5, 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', 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
+ },
+ {
+ OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, 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', EmployeeID: 4, 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', EmployeeID: 1, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 4, 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', EmployeeID: 8, 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/column-header-refreshHeader/index.css b/ej2-javascript/code-snippet/grid/column-header-refreshHeader/index.css
new file mode 100644
index 000000000..0fba63172
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-refreshHeader/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/column-header-refreshHeader/index.js b/ej2-javascript/code-snippet/grid/column-header-refreshHeader/index.js
new file mode 100644
index 000000000..a955da254
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-refreshHeader/index.js
@@ -0,0 +1,22 @@
+var grid = new ej.grids.Grid({
+ dataSource: data,
+ columns: [
+ { field: 'OrderID', headerText: 'Order ID', width: 100, },
+ { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
+ { field: 'OrderDate', headerText: 'Order Date', format: 'yMd' },
+ { field: 'Freight', headerText: 'Freight', width: 120 }
+ ],
+ height: 280,
+});
+grid.appendTo('#Grid');
+
+var button = new ej.buttons.Button({
+ content: 'Refresh Header',
+});
+button.appendTo('#buttons');
+
+document.getElementById('buttons').onclick = function () {
+ var column = grid.getColumnByIndex(1);
+ column.headerText = 'New Header Text'; // update the header text of the column object
+ grid.refreshHeader();
+};
diff --git a/ej2-javascript/code-snippet/grid/column-header-refreshHeader/index.ts b/ej2-javascript/code-snippet/grid/column-header-refreshHeader/index.ts
new file mode 100644
index 000000000..9b5e9f3e2
--- /dev/null
+++ b/ej2-javascript/code-snippet/grid/column-header-refreshHeader/index.ts
@@ -0,0 +1,25 @@
+import { Button } from '@syncfusion/ej2-buttons';
+import { Grid } from '@syncfusion/ej2-grids';
+import { data } from './datasource.ts';
+
+let grid: Grid = new Grid({
+ dataSource: data,
+ columns: [
+ { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
+ { field: 'OrderDate', headerText: 'Order Date', textAlign: 'Right', width: 135, format: 'yMd' },
+ { field: 'Freight', headerText: 'Freight($)', textAlign: 'Right', width: 120, format: 'C2' },
+ { field: 'ShipCity', headerText: 'Ship City', textAlign: 'Right', width: 100 },
+ ],
+});
+grid.appendTo('#Grid');
+
+let button = new Button({
+ content: 'Refresh Header',
+});
+button.appendTo('#buttons');
+
+(