From 25c5ddc13f0573b7b6a0ef7996e55e7d865fec58 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Fri, 14 Feb 2025 11:28:18 +0530 Subject: [PATCH 1/3] Added the topic of How to set custom headers using a custom adaptor in Syncfusion Grid --- .../grid/custom-headers-cs1/app/App.jsx | 21 +++++ .../grid/custom-headers-cs1/app/App.tsx | 22 ++++++ .../custom-headers-cs1/app/CustomAdaptor.jsx | 7 ++ .../custom-headers-cs1/app/CustomAdaptor.tsx | 7 ++ .../custom-headers-cs1/app/datasource.jsx | 77 +++++++++++++++++++ .../custom-headers-cs1/app/datasource.tsx | 76 ++++++++++++++++++ .../grid/custom-headers-cs1/app/index.tsx | 5 ++ .../custom-headers-cs1/app/orderModel.tsx | 12 +++ .../grid/custom-headers-cs1/index.css | 9 +++ .../grid/custom-headers-cs1/index.html | 63 +++++++++++++++ .../custom-headers-cs1/systemjs.config.js | 59 ++++++++++++++ ej2-react/grid/data-binding/data-binding.md | 25 +++++- 12 files changed, 382 insertions(+), 1 deletion(-) create mode 100644 ej2-react/code-snippet/grid/custom-headers-cs1/app/App.jsx create mode 100644 ej2-react/code-snippet/grid/custom-headers-cs1/app/App.tsx create mode 100644 ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx create mode 100644 ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx create mode 100644 ej2-react/code-snippet/grid/custom-headers-cs1/app/datasource.jsx create mode 100644 ej2-react/code-snippet/grid/custom-headers-cs1/app/datasource.tsx create mode 100644 ej2-react/code-snippet/grid/custom-headers-cs1/app/index.tsx create mode 100644 ej2-react/code-snippet/grid/custom-headers-cs1/app/orderModel.tsx create mode 100644 ej2-react/code-snippet/grid/custom-headers-cs1/index.css create mode 100644 ej2-react/code-snippet/grid/custom-headers-cs1/index.html create mode 100644 ej2-react/code-snippet/grid/custom-headers-cs1/systemjs.config.js diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.jsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.jsx new file mode 100644 index 0000000000..6e0364c168 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.jsx @@ -0,0 +1,21 @@ +import { ColumnDirective, ColumnsDirective, Grid, GridComponent, Page, Inject } from '@syncfusion/ej2-react-grids'; +import * as React from 'react'; +import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data'; +import { CustomAdaptor } from './CustomAdaptor'; +function App() { + const data = new DataManager({ + adaptor: new CustomAdaptor(), + url: 'https://services.syncfusion.com/react/production/api/Orders', + }); + return
+ + + + + + + + +
+}; +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.tsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.tsx new file mode 100644 index 0000000000..4eadcef5e3 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.tsx @@ -0,0 +1,22 @@ +import { ColumnDirective, ColumnsDirective, Grid, GridComponent, Page, Inject } from '@syncfusion/ej2-react-grids'; +import * as React from 'react'; +import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data'; +import { CustomAdaptor } from './CustomAdaptor'; + +function App() { + const data = new DataManager({ + adaptor: new CustomAdaptor(), + url: 'https://services.syncfusion.com/react/production/api/Orders', + }); + return
+ + + + + + + + +
+}; +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx new file mode 100644 index 0000000000..b7bb9605a6 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx @@ -0,0 +1,7 @@ +import { WebApiAdaptor } from '@syncfusion/ej2-data'; +export class CustomAdaptor extends WebApiAdaptor { + beforeSend(dm, request, settings) { + request.headers.set('Syncfusion', true); + super.beforeSend(dm, request, settings); + } +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx new file mode 100644 index 0000000000..91ec85cb81 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx @@ -0,0 +1,7 @@ +import { WebApiAdaptor,DataManager,Fetch } from '@syncfusion/ej2-data'; +export class CustomAdaptor extends WebApiAdaptor { + beforeSend(dm: DataManager, request: Request, settings: Fetch) { + request.headers.set('Syncfusion', 'true'); + super.beforeSend(dm, request, settings); + } +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/datasource.jsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/datasource.jsx new file mode 100644 index 0000000000..5acd9c891b --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/datasource.jsx @@ -0,0 +1,77 @@ +export let data = [ + { + OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', Mask: '1111', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 + }, + { + OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', Mask: '2222', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 + }, + { + OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', Mask: '3333', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 + }, + { + OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', Mask: '4444', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0 + }, + { + OrderID: 10252, CustomerID: 'SUPRD', Role: 'Manager', EmployeeID: 4, OrderDate: new Date(8368506e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', Mask: '5555', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0 + }, + { + OrderID: 10253, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 3, OrderDate: new Date(836937e6), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', Mask: '6666', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + }, + { + OrderID: 10254, CustomerID: 'CHOPS', Role: 'Employee', EmployeeID: 5, OrderDate: new Date(8370234e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', Mask: '7777', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + }, + { + OrderID: 10255, CustomerID: 'RICSU', Role: 'Admin', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', Mask: '8888', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + }, + { + OrderID: 10256, CustomerID: 'WELLI', Role: 'Employee', EmployeeID: 3, OrderDate: new Date(837369e6), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', Mask: '9999', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + }, + { + OrderID: 10257, CustomerID: 'HILAA', Role: 'Admin', 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', Mask: '1234', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + }, + { + OrderID: 10258, CustomerID: 'ERNSH', Role: 'Manager', EmployeeID: 1, OrderDate: new Date(8375418e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', Mask: '2345', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + }, + { + OrderID: 10259, CustomerID: 'CENTC', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8376282e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', Mask: '3456', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + }, + { + OrderID: 10260, CustomerID: 'OTTIK', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', Mask: '4567', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + }, + { + OrderID: 10261, CustomerID: 'QUEDE', Role: 'Manager', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', Mask: '5678', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + }, + { + OrderID: 10262, CustomerID: 'RATTC', Role: 'Employee', EmployeeID: 8, OrderDate: new Date(8379738e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', Mask: '6789', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + } +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/datasource.tsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/datasource.tsx new file mode 100644 index 0000000000..85fa3adf55 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/datasource.tsx @@ -0,0 +1,76 @@ +export let data: Object[] = [ + { + OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', Mask: '1111', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 + }, + { + OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', Mask: '2222', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 + }, + { + OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', Mask: '3333', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 + }, + { + OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', Mask: '4444', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0 + }, + { + OrderID: 10252, CustomerID: 'SUPRD', Role: 'Manager', EmployeeID: 4, OrderDate: new Date(8368506e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', Mask: '5555', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0 + }, + { + OrderID: 10253, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 3, OrderDate: new Date(836937e6), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', Mask: '6666', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + }, + { + OrderID: 10254, CustomerID: 'CHOPS', Role: 'Employee', EmployeeID: 5, OrderDate: new Date(8370234e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', Mask: '7777', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + }, + { + OrderID: 10255, CustomerID: 'RICSU', Role: 'Admin', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', Mask: '8888', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + }, + { + OrderID: 10256, CustomerID: 'WELLI', Role: 'Employee', EmployeeID: 3, OrderDate: new Date(837369e6), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', Mask: '9999', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + }, + { + OrderID: 10257, CustomerID: 'HILAA', Role: 'Admin', 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', Mask: '1234', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + }, + { + OrderID: 10258, CustomerID: 'ERNSH', Role: 'Manager', EmployeeID: 1, OrderDate: new Date(8375418e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', Mask: '2345', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + }, + { + OrderID: 10259, CustomerID: 'CENTC', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8376282e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', Mask: '3456', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + }, + { + OrderID: 10260, CustomerID: 'OTTIK', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', Mask: '4567', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + }, + { + OrderID: 10261, CustomerID: 'QUEDE', Role: 'Manager', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', Mask: '5678', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + }, + { + OrderID: 10262, CustomerID: 'RATTC', Role: 'Employee', EmployeeID: 8, OrderDate: new Date(8379738e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', Mask: '6789', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + }]; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/index.tsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/index.tsx new file mode 100644 index 0000000000..80b1b6ab05 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(, document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/orderModel.tsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/orderModel.tsx new file mode 100644 index 0000000000..49d726321d --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/orderModel.tsx @@ -0,0 +1,12 @@ + +export interface IOrderModel { + OrderID?: number; + CustomerID?: string; + Freight?: number; + OrderDate?: Date; + ShipCity?: string; + ShipCountry?: string; + ShipAddress?: string; + isAdd?: boolean; + Verified?: boolean; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/index.css b/ej2-react/code-snippet/grid/custom-headers-cs1/index.css new file mode 100644 index 0000000000..e2de99fc99 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/index.css @@ -0,0 +1,9 @@ +.e-grid .custom { + background-color: #f48fb1 !important;/* csslint allow: important */ + color: white; +} + +.e-grid .custom { + background-color: #fce4ec; + color: white; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/index.html b/ej2-react/code-snippet/grid/custom-headers-cs1/index.html new file mode 100644 index 0000000000..0b9ebb656a --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/index.html @@ -0,0 +1,63 @@ + + + + + Syncfusion React Grid + + + + + + + + + + + + + + + + + + + + + + +
+
Loading....
+
+ + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/systemjs.config.js b/ej2-react/code-snippet/grid/custom-headers-cs1/systemjs.config.js new file mode 100644 index 0000000000..f1228bac41 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/systemjs.config.js @@ -0,0 +1,59 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "system", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/28.1.33/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.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-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-calendars": "syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js", + "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/grid/data-binding/data-binding.md b/ej2-react/grid/data-binding/data-binding.md index d2ab9d3617..86868fdaed 100644 --- a/ej2-react/grid/data-binding/data-binding.md +++ b/ej2-react/grid/data-binding/data-binding.md @@ -276,4 +276,27 @@ The following code demonstrates, how to use the `changeDataSource` method to bin {% previewsample "page.domainurl/code-snippet/grid/data-datasource" %} >* 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/react/demos/#/bootstrap5/grid/flexible-data) resource. \ No newline at end of file +>* 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/react/demos/#/bootstrap5/grid/flexible-data) resource. + +## How to set custom headers using a custom adaptor in Syncfusion Grid + +Custom headers allow you to send extra information along with your HTTP requests. This information can include authentication tokens, API keys, or any other data required by the server to process the request correctly. By adding custom headers, you can enhance the security and functionality of your application's data communication process. + +This section explains how to integrate custom headers into Syncfusion Grid using the `beforeSend` method of the `WebApiAdaptor`. + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} +{% include code-snippet/grid/custom-headers-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/custom-headers-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="CustomAdaptor.jsx" %} +{% include code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="CustomAdaptor.tsx" %} +{% include code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/custom-headers-cs1" %} \ No newline at end of file From 4b64f42a156c54d75f05b3ad2e112cfd65c2d6f5 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Fri, 7 Mar 2025 19:12:59 +0530 Subject: [PATCH 2/3] Modified the content and removed the extra spaces in code snippets --- .../grid/custom-headers-cs1/app/App.jsx | 12 +++---- .../grid/custom-headers-cs1/app/App.tsx | 29 ++++++++--------- .../custom-headers-cs1/app/CustomAdaptor.jsx | 2 +- .../custom-headers-cs1/app/CustomAdaptor.tsx | 2 +- .../grid/custom-headers-cs1/app/index.tsx | 1 - .../custom-headers-cs1/app/orderModel.tsx | 1 - .../grid/custom-headers-cs1/index.css | 1 - .../grid/custom-headers-cs1/index.html | 32 +++---------------- .../custom-headers-cs1/systemjs.config.js | 8 ++--- ej2-react/grid/data-binding/data-binding.md | 10 ++++-- 10 files changed, 35 insertions(+), 63 deletions(-) diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.jsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.jsx index 6e0364c168..075879c796 100644 --- a/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.jsx +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.jsx @@ -9,12 +9,12 @@ function App() { }); return
- - - - - - + + + + + +
}; diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.tsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.tsx index 4eadcef5e3..7a6ffb1bd4 100644 --- a/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.tsx +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.tsx @@ -2,21 +2,20 @@ import { ColumnDirective, ColumnsDirective, Grid, GridComponent, Page, Inject } import * as React from 'react'; import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data'; import { CustomAdaptor } from './CustomAdaptor'; - function App() { - const data = new DataManager({ - adaptor: new CustomAdaptor(), - url: 'https://services.syncfusion.com/react/production/api/Orders', - }); - return
- - - - - - - - -
+ const data = new DataManager({ + adaptor: new CustomAdaptor(), + url: 'https://services.syncfusion.com/react/production/api/Orders', + }); + return
+ + + + + + + + +
}; export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx index b7bb9605a6..9848350b47 100644 --- a/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx @@ -1,7 +1,7 @@ import { WebApiAdaptor } from '@syncfusion/ej2-data'; export class CustomAdaptor extends WebApiAdaptor { beforeSend(dm, request, settings) { - request.headers.set('Syncfusion', true); + request.headers.set('Syncfusion', true); // Assign custom headers here. super.beforeSend(dm, request, settings); } } \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx index 91ec85cb81..0e0bebc69a 100644 --- a/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx @@ -1,7 +1,7 @@ import { WebApiAdaptor,DataManager,Fetch } from '@syncfusion/ej2-data'; export class CustomAdaptor extends WebApiAdaptor { beforeSend(dm: DataManager, request: Request, settings: Fetch) { - request.headers.set('Syncfusion', 'true'); + request.headers.set('Syncfusion', 'true'); // Assign custom headers here. super.beforeSend(dm, request, settings); } } \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/index.tsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/index.tsx index 80b1b6ab05..9cf56b6c67 100644 --- a/ej2-react/code-snippet/grid/custom-headers-cs1/app/index.tsx +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/index.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import App from './App'; - ReactDOM.render(, document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/orderModel.tsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/orderModel.tsx index 49d726321d..4989105bc4 100644 --- a/ej2-react/code-snippet/grid/custom-headers-cs1/app/orderModel.tsx +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/orderModel.tsx @@ -1,4 +1,3 @@ - export interface IOrderModel { OrderID?: number; CustomerID?: string; diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/index.css b/ej2-react/code-snippet/grid/custom-headers-cs1/index.css index e2de99fc99..7b66b92a9e 100644 --- a/ej2-react/code-snippet/grid/custom-headers-cs1/index.css +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/index.css @@ -2,7 +2,6 @@ background-color: #f48fb1 !important;/* csslint allow: important */ color: white; } - .e-grid .custom { background-color: #fce4ec; color: white; diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/index.html b/ej2-react/code-snippet/grid/custom-headers-cs1/index.html index 0b9ebb656a..74e9fe7107 100644 --- a/ej2-react/code-snippet/grid/custom-headers-cs1/index.html +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/index.html @@ -1,6 +1,5 @@ - Syncfusion React Grid @@ -21,7 +20,7 @@ - - -
-
Loading....
-
- +
+
Loading....
+
- \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/systemjs.config.js b/ej2-react/code-snippet/grid/custom-headers-cs1/systemjs.config.js index f1228bac41..01b41f5e61 100644 --- a/ej2-react/code-snippet/grid/custom-headers-cs1/systemjs.config.js +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/systemjs.config.js @@ -36,23 +36,19 @@ System.config({ "@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-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", - "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js", "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", "@syncfusion/ej2-react-calendars": "syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js", "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", -"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", -"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", - + "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", + "react":"https://unpkg.com/react@16.3.1/umd/react.development.js", }, packages: { 'app': { main: 'index', defaultExtension: 'tsx' }, } - }); - System.import('app'); diff --git a/ej2-react/grid/data-binding/data-binding.md b/ej2-react/grid/data-binding/data-binding.md index 86868fdaed..28149b2504 100644 --- a/ej2-react/grid/data-binding/data-binding.md +++ b/ej2-react/grid/data-binding/data-binding.md @@ -278,11 +278,15 @@ The following code demonstrates, how to use the `changeDataSource` method to bin >* 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/react/demos/#/bootstrap5/grid/flexible-data) resource. -## How to set custom headers using a custom adaptor in Syncfusion Grid +## How to set custom headers using a custom adaptor in Syncfusion React Grid -Custom headers allow you to send extra information along with your HTTP requests. This information can include authentication tokens, API keys, or any other data required by the server to process the request correctly. By adding custom headers, you can enhance the security and functionality of your application's data communication process. +Custom headers in HTTP requests are used to send additional information such as authentication tokens, API keys, or metadata required by the server. These headers improve security and enable better control over data communication. In the Syncfusion React Grid, custom headers can be added when making API requests, ensuring that each request carries the necessary information for server-side validation and processing. -This section explains how to integrate custom headers into Syncfusion Grid using the `beforeSend` method of the `WebApiAdaptor`. +This method is particularly useful when integrating the Grid with authenticated APIs, where requests must include authorization tokens or other security credentials to ensure secure access. + +To achieve this, the `WebApiAdaptor` can be extended to create the custom adaptor. The `beforeSend` method in the custom adaptor allows modifying request headers before sending them to the server. This ensures that every request from the Grid includes the required headers. + +The following example demonstrates how to set custom headers using the custom adaptor in Syncfusion React Grid. {% tabs %} {% highlight js tabtitle="App.jsx" %} From eb9c71687c80b12cc5101ab6fc730f6f36e6c616 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Fri, 21 Mar 2025 17:50:55 +0530 Subject: [PATCH 3/3] 858871: changed the code snippets --- .../grid/custom-headers-cs1/app/App.jsx | 22 ++++++++++--------- .../grid/custom-headers-cs1/app/App.tsx | 8 ++++--- .../custom-headers-cs1/app/CustomAdaptor.jsx | 7 +++--- .../custom-headers-cs1/app/CustomAdaptor.tsx | 9 ++++---- ej2-react/grid/data-binding/data-binding.md | 3 +++ 5 files changed, 29 insertions(+), 20 deletions(-) diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.jsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.jsx index 075879c796..1098207426 100644 --- a/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.jsx +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.jsx @@ -7,15 +7,17 @@ function App() { adaptor: new CustomAdaptor(), url: 'https://services.syncfusion.com/react/production/api/Orders', }); - return
- - - - - - - - -
+ return
+ + + + + + + + + + +
}; export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.tsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.tsx index 7a6ffb1bd4..1098207426 100644 --- a/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.tsx +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.tsx @@ -8,11 +8,13 @@ function App() { url: 'https://services.syncfusion.com/react/production/api/Orders', }); return
- + + - - + + + diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx index 9848350b47..7fc15c7d58 100644 --- a/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx @@ -1,7 +1,8 @@ import { WebApiAdaptor } from '@syncfusion/ej2-data'; export class CustomAdaptor extends WebApiAdaptor { - beforeSend(dm, request, settings) { - request.headers.set('Syncfusion', true); // Assign custom headers here. - super.beforeSend(dm, request, settings); + beforeSend(args, xhr, settings) { + xhr.withCredentials = true; + super.beforeSend(args, xhr, settings); + xhr.headers.set('Syncfusion', true); // Assign custom headers here. } } \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx b/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx index 0e0bebc69a..7fe15a29ff 100644 --- a/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx @@ -1,7 +1,8 @@ -import { WebApiAdaptor,DataManager,Fetch } from '@syncfusion/ej2-data'; +import { WebApiAdaptor } from '@syncfusion/ej2-data'; export class CustomAdaptor extends WebApiAdaptor { - beforeSend(dm: DataManager, request: Request, settings: Fetch) { - request.headers.set('Syncfusion', 'true'); // Assign custom headers here. - super.beforeSend(dm, request, settings); + beforeSend(args:any, xhr:any, settings:any) { + xhr.withCredentials = true; + super.beforeSend(args, xhr, settings); + xhr.headers.set('Syncfusion', true); // Assign custom headers here. } } \ No newline at end of file diff --git a/ej2-react/grid/data-binding/data-binding.md b/ej2-react/grid/data-binding/data-binding.md index 28149b2504..7391e14ebb 100644 --- a/ej2-react/grid/data-binding/data-binding.md +++ b/ej2-react/grid/data-binding/data-binding.md @@ -292,12 +292,15 @@ The following example demonstrates how to set custom headers using the custom ad {% highlight js tabtitle="App.jsx" %} {% include code-snippet/grid/custom-headers-cs1/app/App.jsx %} {% endhighlight %} + {% highlight ts tabtitle="App.tsx" %} {% include code-snippet/grid/custom-headers-cs1/app/App.tsx %} {% endhighlight %} + {% highlight js tabtitle="CustomAdaptor.jsx" %} {% include code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx %} {% endhighlight %} + {% highlight ts tabtitle="CustomAdaptor.tsx" %} {% include code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx %} {% endhighlight %}