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 000000000..109820742 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.jsx @@ -0,0 +1,23 @@ +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 000000000..109820742 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/App.tsx @@ -0,0 +1,23 @@ +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 000000000..7fc15c7d5 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.jsx @@ -0,0 +1,8 @@ +import { WebApiAdaptor } from '@syncfusion/ej2-data'; +export class CustomAdaptor extends WebApiAdaptor { + 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 new file mode 100644 index 000000000..7fe15a29f --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/CustomAdaptor.tsx @@ -0,0 +1,8 @@ +import { WebApiAdaptor } from '@syncfusion/ej2-data'; +export class CustomAdaptor extends WebApiAdaptor { + 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/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 000000000..5acd9c891 --- /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 000000000..85fa3adf5 --- /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 000000000..9cf56b6c6 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/index.tsx @@ -0,0 +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 new file mode 100644 index 000000000..4989105bc --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/app/orderModel.tsx @@ -0,0 +1,11 @@ +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 000000000..7b66b92a9 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/index.css @@ -0,0 +1,8 @@ +.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 000000000..74e9fe710 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/index.html @@ -0,0 +1,39 @@ + + + + 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 000000000..01b41f5e6 --- /dev/null +++ b/ej2-react/code-snippet/grid/custom-headers-cs1/systemjs.config.js @@ -0,0 +1,55 @@ +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 d2ab9d361..7391e14eb 100644 --- a/ej2-react/grid/data-binding/data-binding.md +++ b/ej2-react/grid/data-binding/data-binding.md @@ -276,4 +276,34 @@ 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 React Grid + +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 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" %} +{% 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