diff --git a/ej2-react/code-snippet/grid/column-cs10/app/App.jsx b/ej2-react/code-snippet/grid/column-cs10/app/App.jsx
index 92297db3c..6fa25defc 100644
--- a/ej2-react/code-snippet/grid/column-cs10/app/App.jsx
+++ b/ej2-react/code-snippet/grid/column-cs10/app/App.jsx
@@ -1,5 +1,5 @@
 import { ColumnDirective, ColumnMenu, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
-import { Filter, Inject, Page, Sort, Group } from '@syncfusion/ej2-react-grids';
+import { Filter, Inject, Page, Sort, Group, Resize } from '@syncfusion/ej2-react-grids';
 import * as React from 'react';
 import { data } from './datasource';
 function App() {
@@ -19,7 +19,7 @@ function App() {
                     <ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right'/>
                     <ColumnDirective field='ShipName' headerText='Ship Name' width='200'/>
                 </ColumnsDirective>
-                <Inject services={[Sort, ColumnMenu, Page, Filter, Group]}/>
+                <Inject services={[Sort, ColumnMenu, Page, Filter, Group, Resize]}/>
             </GridComponent>
         </div>);
 }
diff --git a/ej2-react/code-snippet/grid/column-cs10/app/App.tsx b/ej2-react/code-snippet/grid/column-cs10/app/App.tsx
index ea6822d21..903d9e3cf 100644
--- a/ej2-react/code-snippet/grid/column-cs10/app/App.tsx
+++ b/ej2-react/code-snippet/grid/column-cs10/app/App.tsx
@@ -1,5 +1,5 @@
 import { ColumnDirective, ColumnMenu, ColumnMenuOpenEventArgs, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
-import { Column, ColumnMenuItemModel, Filter, FilterSettingsModel, Inject, Page, Sort, Group } from '@syncfusion/ej2-react-grids';
+import { Column, ColumnMenuItemModel, Filter, FilterSettingsModel, Inject, Page, Sort, Group, Resize } from '@syncfusion/ej2-react-grids';
 import * as React from 'react';
 import { data } from './datasource';
 
@@ -24,7 +24,7 @@ function App() {
                     <ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right' />
                     <ColumnDirective field='ShipName' headerText='Ship Name' width='200' />
                 </ColumnsDirective>
-                <Inject services={[Sort, ColumnMenu, Page, Filter, Group]} />
+                <Inject services={[Sort, ColumnMenu, Page, Filter, Group, Resize]} />
             </GridComponent>
         </div>
     );
diff --git a/ej2-react/code-snippet/grid/column-cs7/app/App.jsx b/ej2-react/code-snippet/grid/column-cs7/app/App.jsx
index fd22e2339..ba6cad644 100644
--- a/ej2-react/code-snippet/grid/column-cs7/app/App.jsx
+++ b/ej2-react/code-snippet/grid/column-cs7/app/App.jsx
@@ -1,6 +1,6 @@
 import { ColumnDirective, ColumnMenu, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
 import { Edit, Group } from '@syncfusion/ej2-react-grids';
-import { Filter, Inject, Page, Sort } from '@syncfusion/ej2-react-grids';
+import { Filter, Inject, Page, Sort, Resize } from '@syncfusion/ej2-react-grids';
 import * as React from 'react';
 import { data } from './datasource';
 function App() {
@@ -14,7 +14,7 @@ function App() {
                 <ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right'/>
                 <ColumnDirective field='ShipName' headerText='Ship Name' width='200'/>
             </ColumnsDirective>
-            <Inject services={[Sort, ColumnMenu, Filter, Page, Group, Edit]}/>
+            <Inject services={[Sort, ColumnMenu, Filter, Page, Group, Edit, Resize]}/>
         </GridComponent>
     </div>;
 }
diff --git a/ej2-react/code-snippet/grid/column-cs7/app/App.tsx b/ej2-react/code-snippet/grid/column-cs7/app/App.tsx
index 762d91dfe..56e965033 100644
--- a/ej2-react/code-snippet/grid/column-cs7/app/App.tsx
+++ b/ej2-react/code-snippet/grid/column-cs7/app/App.tsx
@@ -2,7 +2,7 @@
 
 import { ColumnDirective, ColumnMenu, ColumnsDirective, GridComponent, GroupSettingsModel } from '@syncfusion/ej2-react-grids';
 import { Edit, Group } from '@syncfusion/ej2-react-grids';
-import { Filter, FilterSettingsModel, Inject, Page, Sort } from '@syncfusion/ej2-react-grids';
+import { Filter, FilterSettingsModel, Inject, Page, Sort, Resize } from '@syncfusion/ej2-react-grids';
 import * as React from 'react';
 import { data } from './datasource';
 
@@ -18,7 +18,7 @@ function App() {
                 <ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right' />
                 <ColumnDirective field='ShipName' headerText='Ship Name' width='200' />
             </ColumnsDirective>
-            <Inject services={[Sort, ColumnMenu, Filter, Page, Group, Edit]} />
+            <Inject services={[Sort, ColumnMenu, Filter, Page, Group, Edit, Resize]} />
         </GridComponent>
     </div>
 };
diff --git a/ej2-react/code-snippet/grid/column-cs8/app/App.jsx b/ej2-react/code-snippet/grid/column-cs8/app/App.jsx
index 0d9bae543..0ae718b4c 100644
--- a/ej2-react/code-snippet/grid/column-cs8/app/App.jsx
+++ b/ej2-react/code-snippet/grid/column-cs8/app/App.jsx
@@ -2,7 +2,7 @@
 
 import { ColumnDirective, ColumnMenu, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
 import { Edit, ExcelExport } from '@syncfusion/ej2-react-grids';
-import { Filter, Inject, Page, PdfExport, Sort, Group } from '@syncfusion/ej2-react-grids';
+import { Filter, Inject, Page, PdfExport, Sort, Group, Resize } from '@syncfusion/ej2-react-grids';
 import React, { useState } from 'react';
 import { data } from './datasource';
 function App() {
@@ -29,7 +29,7 @@ function App() {
                     <ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right' />
                     <ColumnDirective field='ShipName' headerText='Ship Name' width='200' />
                 </ColumnsDirective>
-                <Inject services={[Sort, ColumnMenu, Filter, Page, ExcelExport, Edit, PdfExport, Group]} />
+                <Inject services={[Sort, ColumnMenu, Filter, Page, ExcelExport, Edit, PdfExport, Group, Resize]} />
             </GridComponent>
         </div>
     );
diff --git a/ej2-react/code-snippet/grid/column-cs8/app/App.tsx b/ej2-react/code-snippet/grid/column-cs8/app/App.tsx
index 46dec91fc..101ea166b 100644
--- a/ej2-react/code-snippet/grid/column-cs8/app/App.tsx
+++ b/ej2-react/code-snippet/grid/column-cs8/app/App.tsx
@@ -2,7 +2,7 @@
 
 import { ColumnDirective, ColumnMenu, ColumnsDirective, GridComponent, GroupSettingsModel } from '@syncfusion/ej2-react-grids';
 import { Edit, ExcelExport } from '@syncfusion/ej2-react-grids';
-import { Filter, FilterSettingsModel, Inject, Page, PdfExport, Sort, Group } from '@syncfusion/ej2-react-grids';
+import { Filter, FilterSettingsModel, Inject, Page, PdfExport, Sort, Group, Resize } from '@syncfusion/ej2-react-grids';
 import React, { useState } from 'react';
 import { data } from './datasource';
 function App() {
@@ -29,7 +29,7 @@ function App() {
                     <ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right' />
                     <ColumnDirective field='ShipName' headerText='Ship Name' width='200' />
                 </ColumnsDirective>
-                <Inject services={[Sort, ColumnMenu, Filter, Page, ExcelExport, Edit, PdfExport, Group]} />
+                <Inject services={[Sort, ColumnMenu, Filter, Page, ExcelExport, Edit, PdfExport, Group, Resize]} />
             </GridComponent>
         </div>
     );
diff --git a/ej2-react/code-snippet/grid/context-menu-cs1/app/App.jsx b/ej2-react/code-snippet/grid/context-menu-cs1/app/App.jsx
index ad1d63517..7f2d56ef8 100644
--- a/ej2-react/code-snippet/grid/context-menu-cs1/app/App.jsx
+++ b/ej2-react/code-snippet/grid/context-menu-cs1/app/App.jsx
@@ -1,5 +1,5 @@
 import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
-import { ContextMenu, Edit, Filter, Group, Inject, Page, Sort } from '@syncfusion/ej2-react-grids';
+import { ContextMenu, Edit, Filter, Group, Inject, Page, Sort, Resize } from '@syncfusion/ej2-react-grids';
 import { ExcelExport, PdfExport } from '@syncfusion/ej2-react-grids';
 import * as React from 'react';
 import { data } from './datasource';
@@ -17,7 +17,7 @@ function App() {
           <ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right' editType='numericedit' width='140'/>
           <ColumnDirective field='ShipName' headerText='Ship Name' width='200'/>
         </ColumnsDirective>
-        <Inject services={[Sort, ContextMenu, Filter, Page, ExcelExport, Edit, PdfExport, Group]}/>
+        <Inject services={[Sort, ContextMenu, Filter, Page, ExcelExport, Edit, PdfExport, Group, Resize]}/>
       </GridComponent>
     </div>);
 }
diff --git a/ej2-react/code-snippet/grid/context-menu-cs1/app/App.tsx b/ej2-react/code-snippet/grid/context-menu-cs1/app/App.tsx
index eed77821b..4f6d86d2e 100644
--- a/ej2-react/code-snippet/grid/context-menu-cs1/app/App.tsx
+++ b/ej2-react/code-snippet/grid/context-menu-cs1/app/App.tsx
@@ -1,7 +1,7 @@
 
 
 import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
-import { ContextMenu, Edit, EditSettingsModel, Filter, Group, Inject, Page, Sort } from '@syncfusion/ej2-react-grids';
+import { ContextMenu, Edit, EditSettingsModel, Filter, Group, Inject, Page, Sort, Resize } from '@syncfusion/ej2-react-grids';
 import { ContextMenuItem, ExcelExport, PdfExport } from '@syncfusion/ej2-react-grids';
 import * as React from 'react';
 import { data } from './datasource';
@@ -23,7 +23,7 @@ function App() {
           <ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right' editType='numericedit' width='140' />
           <ColumnDirective field='ShipName' headerText='Ship Name' width='200' />
         </ColumnsDirective>
-        <Inject services={[Sort, ContextMenu, Filter, Page, ExcelExport, Edit, PdfExport, Group]} />
+        <Inject services={[Sort, ContextMenu, Filter, Page, ExcelExport, Edit, PdfExport, Group, Resize]} />
       </GridComponent>
     </div>
   );
diff --git a/ej2-react/code-snippet/grid/custom-column-menu-icon-cs1/app/App.jsx b/ej2-react/code-snippet/grid/custom-column-menu-icon-cs1/app/App.jsx
index d84a58154..805aae4b2 100644
--- a/ej2-react/code-snippet/grid/custom-column-menu-icon-cs1/app/App.jsx
+++ b/ej2-react/code-snippet/grid/custom-column-menu-icon-cs1/app/App.jsx
@@ -1,4 +1,4 @@
-import { ColumnDirective, ColumnMenu, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
+import { ColumnDirective, ColumnMenu, ColumnsDirective, GridComponent, Inject, Resize } from '@syncfusion/ej2-react-grids';
 import * as React from 'react';
 import { data } from './datasource';
 function App() {
@@ -11,7 +11,7 @@ function App() {
                 <ColumnDirective field='Freight' headerText='Freight' width='100' format="C2"/>
                 <ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
             </ColumnsDirective>
-            <Inject services={[ColumnMenu]}/>
+            <Inject services={[ColumnMenu, Resize]}/>
         </GridComponent>
     </div>;
 }
diff --git a/ej2-react/code-snippet/grid/custom-column-menu-icon-cs1/app/App.tsx b/ej2-react/code-snippet/grid/custom-column-menu-icon-cs1/app/App.tsx
index 22e273a61..43ba6b02e 100644
--- a/ej2-react/code-snippet/grid/custom-column-menu-icon-cs1/app/App.tsx
+++ b/ej2-react/code-snippet/grid/custom-column-menu-icon-cs1/app/App.tsx
@@ -1,6 +1,6 @@
 
 
-import { ColumnDirective, ColumnMenu, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
+import { ColumnDirective, ColumnMenu, ColumnsDirective, GridComponent, Inject, Resize } from '@syncfusion/ej2-react-grids';
 import * as React from 'react';
 import { data } from './datasource';
 
@@ -14,7 +14,7 @@ function App() {
                 <ColumnDirective field='Freight' headerText='Freight' width='100' format="C2" />
                 <ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
             </ColumnsDirective>
-            <Inject services={[ColumnMenu]} />
+            <Inject services={[ColumnMenu, Resize]} />
         </GridComponent>
     </div>
 };
diff --git a/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/App.jsx b/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/App.jsx
new file mode 100644
index 000000000..35cfef930
--- /dev/null
+++ b/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/App.jsx
@@ -0,0 +1,28 @@
+import { ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-grids';
+import { Filter, Page, Sort, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
+import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
+import * as React from 'react';
+import { orderData } from './datasource';
+function App() {
+  const FilterOptions = {
+    type: 'Excel'
+  };
+  const pageOptions = { pageSize: 12 }
+  const actionBegin = (args) => {
+    const hostUrl = 'https://services.syncfusion.com/react/production/';
+    if (args.requestType === "filterBeforeOpen") {
+      // Assign custom remote data source to the filter module data source
+      args.filterModel.options.dataSource = new DataManager({ url: hostUrl + 'api/Orders', adaptor: new WebApiAdaptor });
+    }
+  }
+  return <GridComponent dataSource={orderData} filterSettings={FilterOptions} allowFiltering={true} height={273} allowPaging={true} pageSettings={pageOptions} allowSorting={true} actionBegin={actionBegin}>
+    <ColumnsDirective>
+      <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
+      <ColumnDirective field='CustomerID' headerText='Customer ID' width='100' />
+      <ColumnDirective field='Freight' headerText='Freight' width='100' format="C2" />
+      <ColumnDirective field='OrderDate' headerText='Order Date' width='100' format='yMd' />
+    </ColumnsDirective>
+    <Inject services={[Filter, Page, Sort]} />
+  </GridComponent>
+};
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/App.tsx b/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/App.tsx
new file mode 100644
index 000000000..f52330660
--- /dev/null
+++ b/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/App.tsx
@@ -0,0 +1,28 @@
+import { ColumnDirective, ColumnsDirective, ActionArgs, CheckBoxFilterBase, ExcelFilterBase } from '@syncfusion/ej2-react-grids';
+import { Filter, Page, Sort, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
+import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
+import * as React from 'react';
+import { orderData } from './datasource';
+function App() {
+  const FilterOptions = {
+    type: 'Excel'
+  };
+  const pageOptions = { pageSize: 12 }
+  const actionBegin = (args: ActionArgs) => {
+    const hostUrl = 'https://services.syncfusion.com/react/production/';
+    if (args.requestType === "filterBeforeOpen") {
+      // Assign custom remote data source to the filter module data source
+      (args['filterModel'] as CheckBoxFilterBase | ExcelFilterBase).options.dataSource = new DataManager({ url: hostUrl + 'api/Orders', adaptor: new WebApiAdaptor });
+    }
+  }
+  return <GridComponent dataSource={orderData} filterSettings={FilterOptions} allowFiltering={true} height={273} allowPaging={true} pageSettings={pageOptions} allowSorting={true} actionBegin={actionBegin}>
+    <ColumnsDirective>
+      <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
+      <ColumnDirective field='CustomerID' headerText='Customer ID' width='100' />
+      <ColumnDirective field='Freight' headerText='Freight' width='100' format="C2" />
+      <ColumnDirective field='OrderDate' headerText='Order Date' width='100' format='yMd' />
+    </ColumnsDirective>
+    <Inject services={[Filter, Page, Sort]} />
+  </GridComponent>
+};
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/datasource.jsx b/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/datasource.jsx
new file mode 100644
index 000000000..17cf4e6f8
--- /dev/null
+++ b/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/datasource.jsx
@@ -0,0 +1,589 @@
+import { DataUtil } from "@syncfusion/ej2-data";
+export const orderData = DataUtil.parse.parseJson([
+  {
+      "OrderID": 10001,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 1,
+      "Freight": 2.3,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10002,
+      "CustomerID": "ANATR",
+      "EmployeeID": 3,
+      "Freight": 3.3,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10003,
+      "CustomerID": "ANTON",
+      "EmployeeID": 2,
+      "Freight": 4.3,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10004,
+      "CustomerID": "BLONP",
+      "EmployeeID": 4,
+      "Freight": 5.3,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10005,
+      "CustomerID": "BOLID",
+      "EmployeeID": 5,
+      "Freight": 6.3,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10006,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 2,
+      "Freight": 4.6,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10007,
+      "CustomerID": "ANATR",
+      "EmployeeID": 4,
+      "Freight": 6.6,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10008,
+      "CustomerID": "ANTON",
+      "EmployeeID": 3,
+      "Freight": 8.6,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10009,
+      "CustomerID": "BLONP",
+      "EmployeeID": 5,
+      "Freight": 10.6,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10010,
+      "CustomerID": "BOLID",
+      "EmployeeID": 6,
+      "Freight": 12.6,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10011,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 3,
+      "Freight": 6.8999999999999995,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10012,
+      "CustomerID": "ANATR",
+      "EmployeeID": 5,
+      "Freight": 9.899999999999999,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10013,
+      "CustomerID": "ANTON",
+      "EmployeeID": 4,
+      "Freight": 12.899999999999999,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10014,
+      "CustomerID": "BLONP",
+      "EmployeeID": 6,
+      "Freight": 15.899999999999999,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10015,
+      "CustomerID": "BOLID",
+      "EmployeeID": 7,
+      "Freight": 18.9,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10016,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 4,
+      "Freight": 9.2,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10017,
+      "CustomerID": "ANATR",
+      "EmployeeID": 6,
+      "Freight": 13.2,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10018,
+      "CustomerID": "ANTON",
+      "EmployeeID": 5,
+      "Freight": 17.2,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10019,
+      "CustomerID": "BLONP",
+      "EmployeeID": 7,
+      "Freight": 21.2,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10020,
+      "CustomerID": "BOLID",
+      "EmployeeID": 8,
+      "Freight": 25.2,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10021,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 5,
+      "Freight": 11.5,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10022,
+      "CustomerID": "ANATR",
+      "EmployeeID": 7,
+      "Freight": 16.5,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10023,
+      "CustomerID": "ANTON",
+      "EmployeeID": 6,
+      "Freight": 21.5,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10024,
+      "CustomerID": "BLONP",
+      "EmployeeID": 8,
+      "Freight": 26.5,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10025,
+      "CustomerID": "BOLID",
+      "EmployeeID": 9,
+      "Freight": 31.5,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10026,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 6,
+      "Freight": 13.799999999999999,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10027,
+      "CustomerID": "ANATR",
+      "EmployeeID": 8,
+      "Freight": 19.799999999999997,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10028,
+      "CustomerID": "ANTON",
+      "EmployeeID": 7,
+      "Freight": 25.799999999999997,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10029,
+      "CustomerID": "BLONP",
+      "EmployeeID": 9,
+      "Freight": 31.799999999999997,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10030,
+      "CustomerID": "BOLID",
+      "EmployeeID": 10,
+      "Freight": 37.8,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10031,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 7,
+      "Freight": 16.099999999999998,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10032,
+      "CustomerID": "ANATR",
+      "EmployeeID": 9,
+      "Freight": 23.099999999999998,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10033,
+      "CustomerID": "ANTON",
+      "EmployeeID": 8,
+      "Freight": 30.099999999999998,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10034,
+      "CustomerID": "BLONP",
+      "EmployeeID": 10,
+      "Freight": 37.1,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10035,
+      "CustomerID": "BOLID",
+      "EmployeeID": 11,
+      "Freight": 44.1,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10036,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 8,
+      "Freight": 18.4,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10037,
+      "CustomerID": "ANATR",
+      "EmployeeID": 10,
+      "Freight": 26.4,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10038,
+      "CustomerID": "ANTON",
+      "EmployeeID": 9,
+      "Freight": 34.4,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10039,
+      "CustomerID": "BLONP",
+      "EmployeeID": 11,
+      "Freight": 42.4,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10040,
+      "CustomerID": "BOLID",
+      "EmployeeID": 12,
+      "Freight": 50.4,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10041,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 9,
+      "Freight": 20.7,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10042,
+      "CustomerID": "ANATR",
+      "EmployeeID": 11,
+      "Freight": 29.7,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10043,
+      "CustomerID": "ANTON",
+      "EmployeeID": 10,
+      "Freight": 38.699999999999996,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10044,
+      "CustomerID": "BLONP",
+      "EmployeeID": 12,
+      "Freight": 47.699999999999996,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10045,
+      "CustomerID": "BOLID",
+      "EmployeeID": 13,
+      "Freight": 56.699999999999996,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  }
+]);
+  
\ No newline at end of file
diff --git a/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/datasource.tsx b/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/datasource.tsx
new file mode 100644
index 000000000..0e598810b
--- /dev/null
+++ b/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/datasource.tsx
@@ -0,0 +1,589 @@
+import { DataUtil } from "@syncfusion/ej2-data";
+export const orderData: Object[] = DataUtil.parse.parseJson([
+  {
+      "OrderID": 10001,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 1,
+      "Freight": 2.3,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10002,
+      "CustomerID": "ANATR",
+      "EmployeeID": 3,
+      "Freight": 3.3,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10003,
+      "CustomerID": "ANTON",
+      "EmployeeID": 2,
+      "Freight": 4.3,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10004,
+      "CustomerID": "BLONP",
+      "EmployeeID": 4,
+      "Freight": 5.3,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10005,
+      "CustomerID": "BOLID",
+      "EmployeeID": 5,
+      "Freight": 6.3,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10006,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 2,
+      "Freight": 4.6,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10007,
+      "CustomerID": "ANATR",
+      "EmployeeID": 4,
+      "Freight": 6.6,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10008,
+      "CustomerID": "ANTON",
+      "EmployeeID": 3,
+      "Freight": 8.6,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10009,
+      "CustomerID": "BLONP",
+      "EmployeeID": 5,
+      "Freight": 10.6,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10010,
+      "CustomerID": "BOLID",
+      "EmployeeID": 6,
+      "Freight": 12.6,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10011,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 3,
+      "Freight": 6.8999999999999995,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10012,
+      "CustomerID": "ANATR",
+      "EmployeeID": 5,
+      "Freight": 9.899999999999999,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10013,
+      "CustomerID": "ANTON",
+      "EmployeeID": 4,
+      "Freight": 12.899999999999999,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10014,
+      "CustomerID": "BLONP",
+      "EmployeeID": 6,
+      "Freight": 15.899999999999999,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10015,
+      "CustomerID": "BOLID",
+      "EmployeeID": 7,
+      "Freight": 18.9,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10016,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 4,
+      "Freight": 9.2,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10017,
+      "CustomerID": "ANATR",
+      "EmployeeID": 6,
+      "Freight": 13.2,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10018,
+      "CustomerID": "ANTON",
+      "EmployeeID": 5,
+      "Freight": 17.2,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10019,
+      "CustomerID": "BLONP",
+      "EmployeeID": 7,
+      "Freight": 21.2,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10020,
+      "CustomerID": "BOLID",
+      "EmployeeID": 8,
+      "Freight": 25.2,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10021,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 5,
+      "Freight": 11.5,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10022,
+      "CustomerID": "ANATR",
+      "EmployeeID": 7,
+      "Freight": 16.5,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10023,
+      "CustomerID": "ANTON",
+      "EmployeeID": 6,
+      "Freight": 21.5,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10024,
+      "CustomerID": "BLONP",
+      "EmployeeID": 8,
+      "Freight": 26.5,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10025,
+      "CustomerID": "BOLID",
+      "EmployeeID": 9,
+      "Freight": 31.5,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10026,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 6,
+      "Freight": 13.799999999999999,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10027,
+      "CustomerID": "ANATR",
+      "EmployeeID": 8,
+      "Freight": 19.799999999999997,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10028,
+      "CustomerID": "ANTON",
+      "EmployeeID": 7,
+      "Freight": 25.799999999999997,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10029,
+      "CustomerID": "BLONP",
+      "EmployeeID": 9,
+      "Freight": 31.799999999999997,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10030,
+      "CustomerID": "BOLID",
+      "EmployeeID": 10,
+      "Freight": 37.8,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10031,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 7,
+      "Freight": 16.099999999999998,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10032,
+      "CustomerID": "ANATR",
+      "EmployeeID": 9,
+      "Freight": 23.099999999999998,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10033,
+      "CustomerID": "ANTON",
+      "EmployeeID": 8,
+      "Freight": 30.099999999999998,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10034,
+      "CustomerID": "BLONP",
+      "EmployeeID": 10,
+      "Freight": 37.1,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10035,
+      "CustomerID": "BOLID",
+      "EmployeeID": 11,
+      "Freight": 44.1,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10036,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 8,
+      "Freight": 18.4,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10037,
+      "CustomerID": "ANATR",
+      "EmployeeID": 10,
+      "Freight": 26.4,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10038,
+      "CustomerID": "ANTON",
+      "EmployeeID": 9,
+      "Freight": 34.4,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10039,
+      "CustomerID": "BLONP",
+      "EmployeeID": 11,
+      "Freight": 42.4,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10040,
+      "CustomerID": "BOLID",
+      "EmployeeID": 12,
+      "Freight": 50.4,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  },
+  {
+      "OrderID": 10041,
+      "CustomerID": "ALFKI",
+      "EmployeeID": 9,
+      "Freight": 20.7,
+      "ShipCity": "Berlin",
+      "Verified": false,
+      "OrderDate": "1991-05-15T00:00:00.000Z",
+      "ShipName": "Simons bistro",
+      "ShipCountry": "Denmark",
+      "ShippedDate": "1996-07-16T00:00:00.000Z",
+      "ShipAddress": "Kirchgasse 6"
+  },
+  {
+      "OrderID": 10042,
+      "CustomerID": "ANATR",
+      "EmployeeID": 11,
+      "Freight": 29.7,
+      "ShipCity": "Madrid",
+      "Verified": true,
+      "OrderDate": "1990-04-04T00:00:00.000Z",
+      "ShipName": "Queen Cozinha",
+      "ShipCountry": "Brazil",
+      "ShippedDate": "1996-09-11T00:00:00.000Z",
+      "ShipAddress": "Avda. Azteca 123"
+  },
+  {
+      "OrderID": 10043,
+      "CustomerID": "ANTON",
+      "EmployeeID": 10,
+      "Freight": 38.699999999999996,
+      "ShipCity": "Cholchester",
+      "Verified": true,
+      "OrderDate": "1957-11-30T00:00:00.000Z",
+      "ShipName": "Frankenversand",
+      "ShipCountry": "Germany",
+      "ShippedDate": "1996-10-07T00:00:00.000Z",
+      "ShipAddress": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"
+  },
+  {
+      "OrderID": 10044,
+      "CustomerID": "BLONP",
+      "EmployeeID": 12,
+      "Freight": 47.699999999999996,
+      "ShipCity": "Marseille",
+      "Verified": false,
+      "OrderDate": "1930-10-22T00:00:00.000Z",
+      "ShipName": "Ernst Handel",
+      "ShipCountry": "Austria",
+      "ShippedDate": "1996-12-30T00:00:00.000Z",
+      "ShipAddress": "Magazinweg 7"
+  },
+  {
+      "OrderID": 10045,
+      "CustomerID": "BOLID",
+      "EmployeeID": 13,
+      "Freight": 56.699999999999996,
+      "ShipCity": "Tsawassen",
+      "Verified": true,
+      "OrderDate": "1953-02-18T00:00:00.000Z",
+      "ShipName": "Hanari Carnes",
+      "ShipCountry": "Switzerland",
+      "ShippedDate": "1997-12-03T00:00:00.000Z",
+      "ShipAddress": "1029 - 12th Ave. S."
+  }
+]);
+  
\ No newline at end of file
diff --git a/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/index.tsx b/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/index.tsx
new file mode 100644
index 000000000..80b1b6ab0
--- /dev/null
+++ b/ej2-react/code-snippet/grid/excel-like-filter-cs6/app/index.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import App  from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
\ No newline at end of file
diff --git a/ej2-react/code-snippet/grid/excel-like-filter-cs6/index.css b/ej2-react/code-snippet/grid/excel-like-filter-cs6/index.css
new file mode 100644
index 000000000..e2de99fc9
--- /dev/null
+++ b/ej2-react/code-snippet/grid/excel-like-filter-cs6/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/excel-like-filter-cs6/index.html b/ej2-react/code-snippet/grid/excel-like-filter-cs6/index.html
new file mode 100644
index 000000000..f8696ec81
--- /dev/null
+++ b/ej2-react/code-snippet/grid/excel-like-filter-cs6/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Grid</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/26.1.40/ej2-react-grids/styles/material.css" rel="stylesheet" />
+    
+    <link href="https://cdn.syncfusion.com/ej2/26.1.40/ej2-react-buttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/26.1.40/ej2-react-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/26.1.40/ej2-react-navigations/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/26.1.40/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/26.1.40/ej2-react-lists/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/26.1.40/ej2-react-inputs/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/26.1.40/ej2-react-calendars/styles/material.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css">
+    
+    <link href="https://cdn.syncfusion.com/ej2/26.1.40/ej2-base/styles/material.css" rel="stylesheet" />
+    
+    <link href="https://cdn.syncfusion.com/ej2/26.1.40/ej2-react-splitbuttons/styles/material.css" rel="stylesheet" />
+    
+    
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+     <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+
+        #reorderMultipleCols {
+            text-transform: none;
+        }
+
+        .e-grid .e-rowcell.customcss{
+            background-color: #ecedee;
+        }
+
+        .e-grid .e-headercell.customcss{
+            background-color: #ecedee;
+        }
+    </style>
+</head>
+
+<body>
+        <div id='root'>
+            <div id='loader'>Loading....</div>
+        </div>
+        <style>
+            .e-grid .e-headercell.customcss {
+                background-color: #ecedee;
+            }
+            
+            .e-grid .e-rowcell.customcss {
+                background-color: #ecedee;
+            }
+        </style>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ej2-react/code-snippet/grid/excel-like-filter-cs6/systemjs.config.js b/ej2-react/code-snippet/grid/excel-like-filter-cs6/systemjs.config.js
new file mode 100644
index 000000000..384936b03
--- /dev/null
+++ b/ej2-react/code-snippet/grid/excel-like-filter-cs6/systemjs.config.js
@@ -0,0 +1,57 @@
+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/26.1.40/"
+    },
+    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-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.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/filtering/excel-like-filter.md b/ej2-react/grid/filtering/excel-like-filter.md
index af43be938..6e05973b6 100644
--- a/ej2-react/grid/filtering/excel-like-filter.md
+++ b/ej2-react/grid/filtering/excel-like-filter.md
@@ -175,6 +175,29 @@ The following example demonstrates how to remove the context menu option in the
 {% endtabs %}
 
  {% previewsample "page.domainurl/code-snippet/grid/excel-like-filter-cs4" %}
+
+## Bind custom remote datasource for excel/checkbox filtering
+
+The Syncfusion Grid allows you to dynamically change the filter data source for the Excel or checkbox filter module using custom remote data as well. This can be done by either assigning a custom remote `DataManager` as the `dataSource` or by fetching the data initially and storing it in a global variable. This data can then be bound directly to the filter module's `dataSource` in the [actionBegin](https://ej2.syncfusion.com/react/documentation/api/grid/#actionbegin) event for the `filterBeforeOpen` [requestType](https://ej2.syncfusion.com/react/documentation/api/grid/filterEventArgs/#requesttype), as detailed in our [knowledge base](https://support.syncfusion.com/kb/article/10065/how-to-change-the-data-source-for-checkbox-filter-popup-in-grid).
+
+The following example demonstrates how to dynamically change the remote custom data source for all columns in the Excel or checkbox filter dialog using a `DataManager` with `WebApiAdaptor`.
+
+{% tabs %}
+{% highlight js tabtitle="App.jsx" %}
+{% include code-snippet/grid/excel-like-filter-cs6/app/App.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="App.tsx" %}
+{% include code-snippet/grid/excel-like-filter-cs6/app/App.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/grid/excel-like-filter-cs6/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/grid/excel-like-filter-cs6/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+ {% previewsample "page.domainurl/code-snippet/grid/excel-like-filter-cs6" %}
  
 ## Render checkbox list data in on-demand for excel/checkbox filtering
 
diff --git a/ej2-react/pdfviewer/open-pdf-file/from-amazon-s3.md b/ej2-react/pdfviewer/open-pdf-file/from-amazon-s3.md
index fa1bdfd7b..95c585cc3 100644
--- a/ej2-react/pdfviewer/open-pdf-file/from-amazon-s3.md
+++ b/ej2-react/pdfviewer/open-pdf-file/from-amazon-s3.md
@@ -10,6 +10,72 @@ domainurl: ##DomainURL##
 
 # Open PDF file from AWS S3
 
+PDF Viewer allows to load PDF file from AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from AWS S3.
+
+## Using Standalone PDF Viewer
+
+To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below.
+
+**Step 1:** Create a Simple PDF Viewer Sample in React
+
+Start by following the steps provided in this [link](https://ej2.syncfusion.com/react/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in React. This will give you a basic setup of the PDF viewer component.
+
+**Step 2:** Modify the `src/index.js` File in the React Project
+
+1. Import the required namespaces at the top of the file:
+
+```typescript
+import AWS from 'aws-sdk';
+```
+
+2. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3.
+
+N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account.
+
+```typescript
+AWS.config.update({
+  region: '**Your Region**', // Update this your region
+  accessKeyId: '*Your Access Key*', // Update this with your access key id
+  secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key
+});
+```
+
+3. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then Uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion PDF Viewer then load Base64 string generated into the viewer.load method.
+
+N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account.
+
+```typescript
+const s3 = new AWS.S3();
+
+loadDocument() {
+  const getObjectParams = {
+    Bucket: '**Your Bucket Name**',
+    Key: '**Your Key**',
+  };
+  s3.getObject(getObjectParams, (err, data) => {
+    if (err) {
+      console.error('Error fetching document:', err);
+    } else {
+      if (data && data.Body) {
+        const bytes = new Uint8Array(data.Body);
+        let binary = '';
+        bytes.forEach((byte) => (binary += String.fromCharCode(byte)));
+        const base64String = window.btoa(binary);
+        setTimeout(() => {
+          viewer.load("data:application/pdf;base64,"+base64String);
+        }, 2000);
+      }
+    }
+  });
+}
+```
+
+N> The **npm install aws-sdk** package must be installed in your application to use the previous code example.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone).
+
+## Using Server-Backed PDF Viewer
+
 To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below
 
 **Step 1:** Create a Simple PDF Viewer Sample in React
@@ -155,4 +221,4 @@ root.render(<App />);
 
 N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
 
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3)
\ No newline at end of file
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend)
\ No newline at end of file
diff --git a/ej2-react/pdfviewer/save-pdf-file/to-amazon-s3.md b/ej2-react/pdfviewer/save-pdf-file/to-amazon-s3.md
index 8a88473d3..00cb66493 100644
--- a/ej2-react/pdfviewer/save-pdf-file/to-amazon-s3.md
+++ b/ej2-react/pdfviewer/save-pdf-file/to-amazon-s3.md
@@ -10,6 +10,111 @@ domainurl: ##DomainURL##
 
 # Save PDF file to AWS S3
 
+PDF Viewer allows to save PDF file to AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to save PDF to AWS S3.
+
+## Using Standalone PDF Viewer
+
+To save a PDF file to AWS S3, you can follow the steps below
+
+**Step 1:** Create a PDF Viewer sample in React
+
+Follow the instructions provided in this [link](https://ej2.syncfusion.com/react/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in React. This will set up the basic structure of your PDF Viewer application.
+
+**Step 2:** Modify the `src/index.js` File in the React Project
+
+1. Import the required namespaces at the top of the file:
+
+```typescript
+import * as AWS from 'aws-sdk';
+```
+
+2. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3.
+
+N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account.
+
+```typescript
+AWS.config.update({
+  region: '**Your Region**', // Update this your region
+  accessKeyId: '*Your Access Key*', // Update this with your access key id
+  secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key
+});
+```
+
+3. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage.
+
+```typescript
+var toolItem1 = {
+  prefixIcon: 'e-icons e-pv-download-document-icon',
+  id: 'download_pdf',
+  tooltipText: 'Download file',
+  align: 'right'
+};
+
+function toolbarClick(args){
+  if (args.item && args.item.id === 'download_pdf') {
+    saveDocument();
+  }
+};
+
+return (<div>
+    <div className='control-section'>
+    {/* Render the PDF Viewer */}
+      <PdfViewerComponent
+        ref={(scope) => {
+          viewer = scope;
+        }}
+        created={loadDocument}
+        id="container"
+        resourceUrl="https://cdn.syncfusion.com/ej2/23.1.40/dist/ej2-pdfviewer-lib"
+        style={{ 'height': '640px' }}
+        toolbarSettings={{ showTooltip : true, toolbarItems: [ 'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', toolItem1, 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']}}
+            toolbarClick={toolbarClick}
+        >
+
+        <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
+                            ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]}/>
+      </PdfViewerComponent>
+    </div>
+  </div>);
+```
+
+4. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then, read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to AWS S3 using the putObject method of the S3 instance.
+
+N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account.
+
+```typescript
+private s3 = new AWS.S3();
+
+function saveDocument() {
+  viewer.saveAsBlob().then(function (value) {
+    var reader = new FileReader();
+    reader.onload = () => {
+      const uint8Array = new Uint8Array(reader.result);
+      const putObjectParams = {
+        Bucket: '**Your Bucket Name**', 
+        Key: '**Your Key**',
+        Body: uint8Array,
+        ContentType: 'application/pdf',
+      };
+      s3.putObject(putObjectParams, (err, data) => {
+        if (err) {
+          console.error('Error uploading document:', err);
+        } else {
+          console.log('Document uploaded successfully:', data);
+        }
+      });
+    };
+    reader.readAsArrayBuffer(value);
+  });
+};
+```
+
+N> The **npm install aws-sdk** package must be installed in your application to use the previous code example.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone).
+
+## Using Server-Backed PDF Viewer
+
 To save a PDF file to AWS S3, you can follow the steps below
 
 **Step 1:** Create a PDF Viewer sample in React
@@ -144,4 +249,4 @@ root.render(<App />);
 
 N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
 
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3)
\ No newline at end of file
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend)
\ No newline at end of file