Searching in React Grid component
7 Dec 202324 minutes to read
The Syncfusion React Grid includes a powerful built-in searching feature that allows users to search for specific data within the grid. This feature enables efficient filtering of grid records based on user-defined search criteria, making it easier to locate and display relevant information. Whether you have a large dataset or simply need to find specific records quickly, the search feature provides a convenient solution.
To use the searching feature, need to inject Search module in the grid and set the allowSearching property to true to enable the searching feature in the grid.
To further enhance the search functionality, you can integrate a search text box directly into the grid’s toolbar. This allows users to enter search criteria conveniently within the grid interface. To add the search item to the grid’s toolbar, use the toolbar property and add Search item.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Search, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const toolbarOptions = ['Search'];
return (<GridComponent dataSource={data} toolbar={toolbarOptions} height={272}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
<Inject services={[Search, Toolbar]}/>
</GridComponent>);
};
export default App;import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Search, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const toolbarOptions: ToolbarItems[] = ['Search'];
return (
<GridComponent dataSource={data} toolbar={toolbarOptions} height={272}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
<Inject services={[Search, Toolbar]} />
</GridComponent>)
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];The clear icon is shown in the Data Grid search text box when it is focused on search text or after typing the single character in the search text box. A single click of the clear icon clears the text in the search box as well as the search results in the Grid.
Initial search
By default, the search operation can be performed on the grid data after the grid renders. However, there might be scenarios where need to perform a search operation on the grid data during the initial rendering of the grid. In such cases, you can make use of the initial search feature provided by the grid.
To apply search at initial rendering, need to set the following properties in the searchSettings object.
| Property | Description |
|---|---|
| fields | Specifies the fields in which the search operation needs to be performed. |
| operator | Specifies the operator to be used for the search operation. |
| key | Specifies the key value to be searched. |
| ignoreCase | ignoreCase specifies whether the search operation needs to be case-sensitive or case-insensitive. |
| ignoreAccent | ignoreAccent property will ignore the diacritic characters or accents in the text during a search operation. |
The following example demonstrates how to set an initial search in the grid using the searchSettings property. The searchSettings property is set with the following values:
-
fields: CustomerID specifies that the search should be performed only in the ‘CustomerID’ field. -
operator: contains indicates that the search should find records that contain the specified search key. -
key: Ha is the initial search key that will be applied when the grid is rendered. -
ignoreCase: true makes the search case-insensitive. -
ignoreAccent: true will ignores diacritic characters or accents during the search operation.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Search, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const toolbarOptions = ['Search'];
const searchOptions = {
fields: ['CustomerID'],
ignoreCase: true,
key: 'Ha',
operator: 'contains'
};
return (<GridComponent dataSource={data} toolbar={toolbarOptions} searchSettings={searchOptions} height={272}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
<Inject services={[Search, Toolbar]}/>
</GridComponent>);
};
export default App;import { ColumnDirective, ColumnsDirective, GridComponent, SearchSettingsModel} from '@syncfusion/ej2-react-grids';
import { Inject, Search, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App () {
const toolbarOptions: ToolbarItems[] = ['Search'];
const searchOptions: SearchSettingsModel = {
fields: ['CustomerID'],
ignoreCase: true,
key: 'Ha',
operator: 'contains'
};
return (
<GridComponent dataSource={data} toolbar={toolbarOptions} searchSettings={searchOptions}
height={272}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
<Inject services={[Search, Toolbar]} />
</GridComponent>)
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];By default, grid searches all the bound column values. However, you can customize this behavior by definining the searchSettings.fields property.
Search operators
Search operators are symbols or keywords used to define the type of comparison or condition applied during a search operation. They help specify how the search key should match the data being searched. The searchSettings.operator property can be used to define the search operator in the grid.
By default, the searchSettings.operator is set to contains, which returns the values contains the search key. The following operators are supported in searching:
| Operator | Description |
|---|---|
| startswith | Checks whether a value begins with the specified value. |
| endswith | Checks whether a value ends with the specified value. |
| contains | Checks whether a value contains with the specified value. |
| wildcard | Processes one or more search patterns using the “*“ symbol, returning values that match the given patterns. |
| like | Processes a single search pattern using the ”%” symbol, retrieving values that match the specified pattern. |
| equal | Checks whether a value equal to the specified value. |
| notequal | Checks whether a value not equal to the specified value. |
These operators provide flexibility in defining the search behavior and allow you to perform different types of comparisons based on your requirements.
The following example demonstrates how to set the searchSettings.operator property based on changing the dropdown value using the change event of the DropDownList component.
import { ColumnDirective, ColumnsDirective, GridComponent, SearchSettingsModel } from '@syncfusion/ej2-react-grids';
import { Inject, Search, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import React, { useState } from 'react';
import { data } from './datasource';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns'
function App() {
const [searchOptions, setSearchOptions] = useState({ operator: 'contains' });
const toolbarOptions = ['Search'];
const ddlData = [
{ text: 'startswith', value: 'startswith' },
{ text: 'endswith', value: 'endswith' },
{ text: 'wildcard', value: 'wildcard' },
{ text: 'like', value: 'like' },
{ text: 'equal', value: 'equal' },
{ text: 'notequal', value: 'notequal' },
];
const valueChange = (args) => {
const searchOperator = { operator: args.value };
setSearchOptions(searchOperator);
}
return (<div>
<label style=>Change the search operators:</label>
<DropDownListComponent id="value" index={0} width={100} dataSource={ddlData} change={valueChange}></DropDownListComponent>
<GridComponent dataSource={data} toolbar={toolbarOptions} searchSettings={searchOptions}
height={272}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right" />
<ColumnDirective field='CustomerID' width='100' />
<ColumnDirective field='EmployeeID' width='100' textAlign="Right" />
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right" />
<ColumnDirective field='ShipCountry' width='100' />
</ColumnsDirective>
<Inject services={[Search, Toolbar]} />
</GridComponent></div>)
};
export default App;import { ColumnDirective, ColumnsDirective, GridComponent, SearchSettingsModel } from '@syncfusion/ej2-react-grids';
import { Inject, Search, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import React, { useState } from 'react';
import { data } from './datasource';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns'
function App() {
const [searchOptions, setSearchOptions] = useState<SearchSettingsModel>({ operator: 'contains' });
const toolbarOptions: ToolbarItems[] = ['Search'];
const ddlData: { [key: string]: Object; }[] = [
{ text: 'startswith', value: 'startswith' },
{ text: 'endswith', value: 'endswith' },
{ text: 'wildcard', value: 'wildcard' },
{ text: 'like', value: 'like' },
{ text: 'equal', value: 'equal' },
{ text: 'notequal', value: 'notequal' },
];
const valueChange = (args: ChangeEventArgs) => {
const searchOperator: SearchSettingsModel = { operator: args.value };
setSearchOptions(searchOperator);
}
return (<div>
<label style=>Change the search operators:</label>
<DropDownListComponent id="value" index={0} width={100} dataSource={ddlData} change={valueChange}></DropDownListComponent>
<GridComponent dataSource={data} toolbar={toolbarOptions} searchSettings={searchOptions}
height={272}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right" />
<ColumnDirective field='CustomerID' width='100' />
<ColumnDirective field='EmployeeID' width='100' textAlign="Right" />
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right" />
<ColumnDirective field='ShipCountry' width='100' />
</ColumnsDirective>
<Inject services={[Search, Toolbar]} />
</GridComponent></div>)
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Search by external button
The Syncfusion Grid component allows you to perform searches programmatically, enabling you to search for records using an external button instead of relying solely on the built-in search bar. This feature provides flexibility and allows for custom search implementations within your application. To search for records using an external button, you can utilize the search method provided by the Grid component.
The search method allows you to perform a search operation based on a search key or criteria. The following example demonstatres how to implement search by an external button using the following steps:
- Add a button element outside of the grid component.
- Attach a click event handler to the button.
- Inside the event handler, get the reference of the grid component.
- Invoke the
searchmethod of the grid by passing the search key as a parameter.
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { employeeData } from './datasource';
function App() {
let grid;
const inputStyle = { width: '200px', display: 'inline-block' };
const clickHandler = () => {
const searchText = document.getElementsByClassName('searchtext')[0].value;
if (grid) {
grid.search(searchText);
}
};
return (<div>
<div className="e-float-input" style={inputStyle}>
<input type="text" className="searchtext"/>
<span className="e-float-line"/>
<label className="e-float-text">Search text</label>
</div>
<ButtonComponent onClick={clickHandler}>Search</ButtonComponent>
<GridComponent dataSource={employeeData} height={260} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign='Right'/>
<ColumnDirective field='FirstName' headerText='First Name' width='150'/>
<ColumnDirective field='City' headerText='City' width='150'/>
<ColumnDirective field='Country' headerText='Country' width='150'/>
</ColumnsDirective>
</GridComponent>
</div>);
};
export default App;import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { employeeData } from './datasource';
function App() {
let grid: GridComponent | null;
const inputStyle: object = { width: '200px', display: 'inline-block' };
const clickHandler = () => {
const searchText: string = (document.getElementsByClassName('searchtext')[0] as HTMLFormElement).value;
if (grid) {
(grid as GridComponent).search(searchText);
}
};
return (
<div>
<div className="e-float-input" style={inputStyle}>
<input type="text" className="searchtext" />
<span className="e-float-line" />
<label className="e-float-text">Search text</label>
</div>
<ButtonComponent onClick={clickHandler}>Search</ButtonComponent>
<GridComponent dataSource={employeeData} height={260} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign='Right' />
<ColumnDirective field='FirstName' headerText='First Name' width='150' />
<ColumnDirective field='City' headerText='City' width='150' />
<ColumnDirective field='Country' headerText='Country' width='150' />
</ColumnsDirective>
</GridComponent>
</div>
)
};
export default App;export let employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];Search specific columns
By default, the search functionality searches all visible columns. However, if you want to search only specific columns, you can define the specific column’s field names in the searchSettings.fields property. This allows you to narrow down the search to a targeted set of columns, which is particularly useful when dealing with large datasets or grids with numerous columns.
The following example demonstrates how to search specific columns such as CustomerID, Freight, and ShipCity by using the searchSettings.fields property.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const searchSettings = {
fields: ['CustomerID', 'Freight', 'ShipCountry']
};
return (<div>
<GridComponent dataSource={data} height={280} toolbar={['Search']} searchSettings={searchSettings}>
<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='C' textAlign="Right" />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
</ColumnsDirective>
<Inject services={[Toolbar]} />
</GridComponent>
</div>);
};
export default App;import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, SearchSettingsModel, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const searchSettings: SearchSettingsModel = {
fields: ['CustomerID', 'Freight', 'ShipCountry']
};
return (<div>
<GridComponent dataSource={data} height={280} toolbar={['Search']}
searchSettings={searchSettings}>
<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='C' textAlign="Right" />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
</ColumnsDirective>
<Inject services={[Toolbar]} />
</GridComponent>
</div>)
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Search on each key stroke
The search on each keystroke feature in Syncfusion Grid enables you to perform real-time searching of grid data as they type in the search text box. This functionality provides a seamless and interactive searching experience, allowing you to see the search results dynamically updating in real time as they enter each keystroke in the search box.
To achieve this, you need to bind the keyup event to the search input element inside the created event of the grid component.
In the following example, the created event is bound to the grid component, and inside the event handler, the keyup event is bound to the search input element. Whenever the keyup event is triggered, the current search string is obtained from the search input element, and the search method is invoked on the grid instance with the current search string as a parameter. This allows the search results to be displayed in real-time as you type in the search box.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const created = () => {
document.getElementById(grid.element.id + "_searchbar").addEventListener('keyup', () => {
grid.search(event.target.value);
});
};
return (<div>
<GridComponent dataSource={data} height={280} toolbar={['Search']} ref={g => grid = g} created={created}>
<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' textAlign="Right"/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
</ColumnsDirective>
<Inject services={[Toolbar]}/>
</GridComponent>
</div>);
};
export default App;import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: GridComponent | null;
const created = () => {
(document.getElementById((grid as GridComponent).element.id + "_searchbar") as HTMLElement).addEventListener('keyup', (event) => {
(grid as GridComponent).search((event.target as HTMLInputElement).value)
});
}
return (<div>
<GridComponent dataSource={data} height={280} toolbar= {['Search']}
ref={g => grid = g} created={created}>
<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' textAlign="Right"/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
</ColumnsDirective>
<Inject services={[Toolbar]} />
</GridComponent>
</div>)
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Search on each key stroke approach may affect the performance of the application when dealing with a large number of records.
Perform search based on column formatting
By default, the search operation considers the underlying raw data of each cell for searching. However, in some cases, you may want to search based on the formatted data visible to the users. To search data based on column formatting, you can utilize the grid.valueFormatterService.fromView method within the actionBegin event. This method allows you to retrieve the formatted value of a cell and perform searching on each column using the OR predicate.
The following example demonstrates how to implement searching based on column formatting in the Grid. In the actionBegin event, retrieve the search value from the getColumns method. Iterate through the columns and check whether the column has a format specified. If the column has a format specified, use the grid.valueFormatterService.fromView method to get the formatted value of the cell. If the formatted value matches the search value, set the OR predicate that includes the current column filter and the new filter based on the formatted value.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import { Predicate, Query } from '@syncfusion/ej2-data';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const actionBegin = (args) => {
if (args.requestType === 'searching') {
args.cancel = true;
setTimeout(() => {
var columns = grid.getColumns();
var predicate = null;
for (var i = 0; i < columns.length; i++) {
var val = grid.valueFormatterService.fromView(args.searchString, columns[i].getParser(), columns[i].type);
if (val) {
if (predicate == null) {
predicate = new Predicate(columns[i].field, 'contains', val, true, true);
} else {
predicate = predicate.or(columns[i].field, 'contains', val, true, true);
}
}
}
grid.query = new Query().where(predicate);
}, 200);
}
}
const keyPressed = (args) => {
if (args.key === 'Enter' && args.target && args.target.closest('.e-search') && args.target.value === '') {
args.cancel = true;
grid.query = new Query();
}
}
return (<div>
<GridComponent ref={g => grid = g} dataSource={data} height={280} toolbar={['Search']} actionBegin={actionBegin} keyPressed={keyPressed}>
<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='C' textAlign="Right" />
<ColumnDirective field='OrderDate' headerText='OrderDate' width='100' format='yMd' />
</ColumnsDirective>
<Inject services={[Toolbar]} />
</GridComponent>
</div>);
};
export default App;import { ColumnDirective, ColumnsDirective, GridComponent, SearchEventArgs } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import { Predicate, Query } from '@syncfusion/ej2-data';
import { KeyboardEventArgs } from '@syncfusion/ej2-base';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: GridComponent | null;
const actionBegin = (args: SearchEventArgs) => {
if (args.requestType === 'searching') {
args.cancel = true;
setTimeout(() => {
var columns = (grid as GridComponent).getColumns();
var predicate: Predicate = null;
for (var i = 0; i < columns.length; i++) {
var val = (grid as GridComponent).valueFormatterService.fromView(args.searchString, columns[i].getParser(), columns[i].type);
if (val) {
if (predicate == null) {
predicate = new Predicate(columns[i].field, 'contains', val, true, true);
} else {
predicate = predicate.or(columns[i].field, 'contains', val, true, true);
}
}
}
(grid as GridComponent).query = new Query().where(predicate as Predicate);
}, 200);
}
}
const keyPressed = (args: KeyboardEventArgs) => {
if (args.key === 'Enter' && args.target && args.target.closest('.e-search') && args.target.value === '') {
args.cancel = true;
(grid as GridComponent).query = new Query();
}
}
return (<div>
<GridComponent ref={g => grid = g} dataSource={data} height={280} toolbar={['Search']} actionBegin={actionBegin} keyPressed={keyPressed}>
<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='C' textAlign="Right" />
<ColumnDirective field='OrderDate' headerText='OrderDate' width='100' format='yMd' />
</ColumnsDirective>
<Inject services={[Toolbar]} />
</GridComponent>
</div>);
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Perform search operation in Grid using multiple keywords
In addition to searching with a single keyword, the Grid component offers the capability to perform a search operation using multiple keywords. This feature enables you to narrow down your search results by simultaneously matching multiple keywords. It can be particularly useful when you need to find records that meet multiple search conditions simultaneously. This can be achieved by the actionBegin event of the Grid.
The following example demonstrates, how to perform a search with multiple keywords in the grid by using the query property when the requestType is searching in the actionBegin event. The searchString is divided into multiple keywords using a comma (,) as the delimiter. Each keyword is then utilized to create a predicate that checks for a match in the desired columns. If multiple keywords are present, the predicates are combined using an OR condition. Finally, the Grid’s query property is updated with the constructed predicate, and the Grid is refreshed to update the changes in the UI.
On the other hand, the actionComplete event is used to manage the completion of the search operation. It ensures that the search input value is updated if necessary and clears the query when the search input is empty.
import { Toolbar, GridComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-grids';
import { Predicate, Query } from '@syncfusion/ej2-data';
import * as React from 'react';
import { data } from './datasource';
function App() {
let values = '';
const key = '';
let refresh = false;
let removeQuery = false;
let valueAssign = false;
let grid;
const searchOptions = {
fields: ['OrderID', 'CustomerID', 'Freight', 'ShipCountry'],
key: '',
operator:'contains',
ignoreCase: true
};
const toolbarOptions = ['Search'];
const actionBegin = (args) => {
if (args.requestType == 'searching') {
const keys = args.searchString.split(',');
let flag = true;
let predicate;
if (keys.length > 1) {
if (grid.searchSettings.key !== '') {
values = args.searchString;
keys.forEach((key) => {
grid.getColumns().forEach((col) => {
if (flag) {
predicate = new Predicate(col.field, 'contains', key, true);
flag = false;
}
else {
var predic = new Predicate(col.field, 'contains', key, true);
predicate = predicate.or(predic);
}
});
});
grid.query = new Query().where(predicate);
grid.searchSettings.key = '';
refresh = true;
valueAssign = true;
removeQuery = true;
grid.refresh();
}
}
}
};
const actionComplete = (args) => {
if (args.requestType === 'refresh' && valueAssign) {
document.getElementById(grid.element.id + '_searchbar').value =
values;
valueAssign = false;
}
else if (document.getElementById(grid.element.id + '_searchbar').value ===
'' &&
args.requestType === 'refresh' &&
removeQuery) {
grid.query = new Query();
removeQuery = false;
grid.refresh();
}
};
return (<div>
<GridComponent dataSource={data} height={280} toolbar={toolbarOptions} searchSettings={searchOptions} ref={g => grid = g} actionBegin={actionBegin} actionComplete={actionComplete}>
<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='C' textAlign="Right"/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
</ColumnsDirective>
<Inject services={[Toolbar]}/>
</GridComponent>
</div>);
};
export default App;import {Toolbar, ToolbarItems, Grid, GridComponent, SearchSettingsModel, ColumnsDirective,ColumnDirective, Inject, SearchEventArgs} from '@syncfusion/ej2-react-grids';
import { Predicate, Query } from '@syncfusion/ej2-data';
import * as React from 'react';
import { data } from './datasource';
function App() {
let values = '';
const key = '';
let refresh = false;
let removeQuery = false;
let valueAssign = false;
let grid: Grid | null;
const searchOptions: SearchSettingsModel = {
fields: ['OrderID', 'CustomerID', 'Freight', 'ShipCountry'],
key: '',
operator:'contains',
ignoreCase: true
};
const toolbarOptions: ToolbarItems[] = ['Search'];
const actionBegin = (args: SearchEventArgs): void => {
if (args.requestType == 'searching') {
const keys = args.searchString.split(',');
let flag = true;
let predicate;
if (keys.length > 1) {
if (grid.searchSettings.key !== '') {
values = args.searchString;
keys.forEach((key) => {
grid.getColumns().forEach((col) => {
if (flag) {
predicate = new Predicate(col.field, 'contains', key, true);
flag = false;
} else {
var predic = new Predicate(col.field, 'contains', key, true);
predicate = predicate.or(predic);
}
});
});
grid.query = new Query().where(predicate);
grid.searchSettings.key = '';
refresh = true;
valueAssign = true;
removeQuery = true;
grid.refreshColumns();
}
}
}
};
const actionComplete = (args: SearchEventArgs): void => {
if (args.requestType === 'refresh' && valueAssign) {
document.getElementById(grid.element.id + '_searchbar').value =
values;
valueAssign = false;
} else if (
document.getElementById(grid.element.id + '_searchbar').value ===
'' &&
args.requestType === 'refresh' &&
removeQuery
) {
grid.query = new Query();
removeQuery = false;
grid.refreshColumns();
}
};
return (<div>
<GridComponent dataSource={data} height={280} toolbar= {toolbarOptions}
searchSettings={searchOptions} ref={g => grid = g} actionBegin={actionBegin}
actionComplete={actionComplete}>
<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 ='C' textAlign="Right"/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
</ColumnsDirective>
<Inject services={[Toolbar]} />
</GridComponent>
</div>)
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];By using this approach, you can perform a search operation in the grid using multiple keywords.
How to ignore accent while searching
By default, the searching operation in the Grid component does not ignore diacritic characters or accents. However, there are cases where ignoring diacritic characters becomes necessary. This feature enhances the search experience by enabling data searching without considering accents, ensuring a more comprehensive and accurate search and it can be achieved by utilizing the searchSettings.ignoreAccent property of the Grid component as true.
The following example demonstrates how to define the ignoreAccent property within the searchSettings property of the grid. Additionally, the EJ2 Toggle Switch Button component is included to modify the value of the searchSettings.ignoreAccent property. When the switch is toggled, the change event is triggered, and the searchSettings.ignoreAccent property is updated accordingly. This functionality helps to visualize the impact of the searchSettings.ignoreAccent setting when performing search operations.
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, GridComponent, Search } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const valueChange = (args) => {
grid.searchSettings.ignoreAccent = args.checked;
}
return (<div>
<label style=>Enable or disable ignoreAccent property</label>
<SwitchComponent id='switch' change={valueChange}></SwitchComponent>
<GridComponent ref={g => grid = g} dataSource={data} height={280} toolbar={['Search']} >
<ColumnsDirective>
<ColumnDirective field='CategoryName' headerText='Category Name' width='100' textAlign="Right" />
<ColumnDirective field='ProductName' headerText='Product Name' width='100' />
<ColumnDirective field='QuantityPerUnit' headerText='Quantity Per Unit' width='100' textAlign="Right" />
<ColumnDirective field='UnitsInStock' headerText='Units In Stock' width='100' />
</ColumnsDirective>
<Inject services={[Toolbar, Search]} />
</GridComponent>
</div>);
};
export default App;import { SwitchComponent, ChangeEventArgs } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, GridComponent, Search } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: GridComponent | null;
const valueChange = (args: ChangeEventArgs) => {
(grid as GridComponent).searchSettings.ignoreAccent = args.checked;
}
return (<div>
<label style=>Enable or disable ignoreAccent property:</label>
<SwitchComponent id='switch' change={valueChange}></SwitchComponent>
<GridComponent ref={g => grid = g} dataSource={data} height={280} toolbar={['Search']} >
<ColumnsDirective>
<ColumnDirective field='CategoryName' headerText='Category Name' width='100' textAlign="Right" />
<ColumnDirective field='ProductName' headerText='Product Name' width='100' />
<ColumnDirective field='QuantityPerUnit' headerText='Quantity Per Unit' width='100' textAlign="Right" />
<ColumnDirective field='UnitsInStock' headerText='Units In Stock' width='100' />
</ColumnsDirective>
<Inject services={[Toolbar, Search]} />
</GridComponent>
</div>);
};
export default App;export let data = [
{
"CategoryName": "Beveräges",
'ProductID': 1,
'ProductName': 'Chäi',
'SupplierID': 1,
'QuantityPerUnit': '10 boxes x 20 bags',
'UnitPrice': 18.00,
'UnitsInStock': 39,
'Discontinued': true
},
{
"CategoryName": "Beverages",
'ProductID': 2,
'ProductName': 'CHANG',
'SupplierID': 1,
'QuantityPerUnit': '24 - 12 oz bottles',
'UnitPrice': 19.00,
'UnitsInStock': 17,
'Discontinued': true
},
{
"CategoryName": "Beverages",
'ProductID': 3,
'ProductName': 'Aniseed Syrup',
'SupplierID': 1,
'QuantityPerUnit': '12 - 550 ml bottles',
'UnitPrice': 10.00,
'UnitsInStock': 13,
'Discontinued': true
},
{
"CategoryName": "Beverages",
'ProductID': 4,
'ProductName': 'Chef Anton\'s Cajun Seasoning',
'SupplierID': 2,
'QuantityPerUnit': '48 - 6 oz jars',
'UnitPrice': 22.00,
'UnitsInStock': 53,
'Discontinued': true
},
{
"CategoryName": "Beveräges",
'ProductID': 5,
'ProductName': 'Chef Anton\'s Gumbo Mix',
'SupplierID': 2,
'QuantityPerUnit': '36 boxes',
'UnitPrice': 21.35,
'UnitsInStock': 0,
'Discontinued': true
},
{
"CategoryName": "Beverages",
'ProductID': 6,
'ProductName': 'Grandma\'s Boysenberry Spread',
'SupplierID': 3,
'QuantityPerUnit': '12 - 8 oz jars',
'UnitPrice': 25.00,
'UnitsInStock': 120,
'Discontinued': false
},
{
"CategoryName": "Beveräges",
'ProductID': 7,
'ProductName': 'Uncle Bob\'s Organic Dried Pears',
'SupplierID': 3,
'QuantityPerUnit': '12 - 1 lb pkgs.',
'UnitPrice': 30.00,
'UnitsInStock': 15,
'Discontinued': false
},
{
"CategoryName": "Beverages",
'ProductID': 8,
'ProductName': 'Northwoods Cranberry Sauce',
'SupplierID': 3,
'QuantityPerUnit': '12 - 12 oz jars',
'UnitPrice': 40.00,
'UnitsInStock': 6,
'Discontinued': false
},
{
"CategoryName": "Beverages",
'ProductID': 9,
'ProductName': 'Mishi Kobe Niku',
'SupplierID': 4,
'QuantityPerUnit': '18 - 500 g pkgs.',
'UnitPrice': 97.00,
'UnitsInStock': 29,
'Discontinued': true
},
{
"CategoryName": "Beverages",
'ProductID': 10,
'ProductName': 'Ikura',
'SupplierID': 4,
'QuantityPerUnit': '12 - 200 ml jars',
'UnitPrice': 31.00,
'UnitsInStock': 31,
'Discontinued': false
},
{
"CategoryName": "Beveräges",
'ProductID': 11,
'ProductName': 'Queso Cabrales',
'SupplierID': 5,
'QuantityPerUnit': '1 kg pkg.',
'UnitPrice': 21.00,
'UnitsInStock': 22,
'Discontinued': false
},
{
"CategoryName": "Condiments",
'ProductID': 12,
'ProductName': 'Queso Manchego La Pastora',
'SupplierID': 5,
'QuantityPerUnit': '10 - 500 g pkgs.',
'UnitPrice': 38.00,
'UnitsInStock': 86,
'Discontinued': false
},
{
"CategoryName": "Condiments",
'ProductID': 13,
'ProductName': 'Konbu',
'SupplierID': 6,
'QuantityPerUnit': '2 kg box',
'UnitPrice': 6.00,
'UnitsInStock': 24,
'Discontinued': true
},
{
"CategoryName": "Condiments",
'ProductID': 14,
'ProductName': 'Tofu',
'SupplierID': 6,
'QuantityPerUnit': '40 - 100 g pkgs.',
'UnitPrice': 23.25,
'UnitsInStock': 35,
'Discontinued': true
},
{
"CategoryName": "Condiments",
'ProductID': 15,
'ProductName': 'Genen Shouyu',
'SupplierID': 6,
'QuantityPerUnit': '24 - 250 ml bottles',
'UnitPrice': 15.50,
'UnitsInStock': 39,
'Discontinued': true
},
{
"CategoryName": "Condiments",
'ProductID': 16,
'ProductName': 'Pavlova',
'SupplierID': 7,
'QuantityPerUnit': '32 - 500 g boxes',
'UnitPrice': 17.45,
'UnitsInStock': 29,
'Discontinued': true
},
{
"CategoryName": "Condiments",
'ProductID': 17,
'ProductName': 'Alice Mutton',
'SupplierID': 7,
'QuantityPerUnit': '20 - 1 kg tins',
'UnitPrice': 39.00,
'UnitsInStock': 0,
'Discontinued': true
},
{
"CategoryName": "Condiments",
'ProductID': 18,
'ProductName': 'Carnarvon Tigers',
'SupplierID': 7,
'QuantityPerUnit': '16 kg pkg.',
'UnitPrice': 62.50,
'UnitsInStock': 42,
'Discontinued': false
},
{
"CategoryName": "Condiments",
'ProductID': 19,
'ProductName': 'Teatime Chocolate Biscuits',
'SupplierID': 8,
'QuantityPerUnit': '10 boxes x 12 pieces',
'UnitPrice': 9.20,
'UnitsInStock': 25,
'Discontinued': false
},
{
"CategoryName": "Condiments",
'ProductID': 20,
'ProductName': 'Sir Rodney\'s Marmalade',
'SupplierID': 8,
'QuantityPerUnit': '30 gift boxes',
'UnitPrice': 81.00,
'UnitsInStock': 40,
'Discontinued': false
},
{
"CategoryName": "Condiments",
'ProductID': 21,
'ProductName': 'Sir Rodney\'s Scones',
'SupplierID': 8,
'QuantityPerUnit': '24 pkgs. x 4 pieces',
'UnitPrice': 10.00,
'UnitsInStock': 3,
'Discontinued': false
},
{
"CategoryName": "Condiments",
'ProductID': 22,
'ProductName': 'Gustaf\'s Knäckebröd',
'SupplierID': 9,
'QuantityPerUnit': '24 - 500 g pkgs.',
'UnitPrice': 21.00,
'UnitsInStock': 104,
'Discontinued': false
},
{
"CategoryName": "Confections",
'ProductID': 23,
'ProductName': 'Tunnbröd',
'SupplierID': 9,
'QuantityPerUnit': '12 - 250 g pkgs.',
'UnitPrice': 9.00,
'UnitsInStock': 61,
'Discontinued': false
},
{
"CategoryName": "Confections",
'ProductID': 24,
'ProductName': 'Guaraná Fantástica',
'SupplierID': 10,
'QuantityPerUnit': '12 - 355 ml cans',
'UnitPrice': 4.50,
'UnitsInStock': 20,
'Discontinued': true
},
{
"CategoryName": "Confections",
'ProductID': 25,
'ProductName': 'NuNuCa Nuß-Nougat-Creme',
'SupplierID': 11,
'QuantityPerUnit': '20 - 450 g glasses',
'UnitPrice': 14.00,
'UnitsInStock': 76,
'Discontinued': false
},
{
"CategoryName": "Confections",
'ProductID': 26,
'ProductName': 'Gumbär Gummibärchen',
'SupplierID': 11,
'QuantityPerUnit': '100 - 250 g bags',
'UnitPrice': 31.23,
'UnitsInStock': 15,
'Discontinued': true
},
{
"CategoryName": "Confections",
'ProductID': 27,
'ProductName': 'Schoggi Schokolade',
'SupplierID': 11,
'QuantityPerUnit': '100 - 100 g pieces',
'UnitPrice': 43.90,
'UnitsInStock': 49,
'Discontinued': true
},
{
"CategoryName": "Confections",
'ProductID': 28,
'ProductName': 'Rössle Sauerkraut',
'SupplierID': 12,
'QuantityPerUnit': '25 - 825 g cans',
'UnitPrice': 45.60,
'UnitsInStock': 26,
'Discontinued': true
},
{
"CategoryName": "Confections",
'ProductID': 29,
'ProductName': 'Thüringer Rostbratwurst',
'SupplierID': 12,
'QuantityPerUnit': '50 bags x 30 sausgs.',
'UnitPrice': 123.79,
'UnitsInStock': 0,
'Discontinued': true
},
{
"CategoryName": "Confections",
'ProductID': 30,
'ProductName': 'Nord-Ost Matjeshering',
'SupplierID': 13,
'QuantityPerUnit': '10 - 200 g glasses',
'UnitPrice': 25.89,
'UnitsInStock': 10,
'Discontinued': true
},
{
"CategoryName": "Confections",
'ProductID': 31,
'ProductName': 'Gorgonzola Telino',
'SupplierID': 14,
'QuantityPerUnit': '12 - 100 g pkgs',
'UnitPrice': 12.50,
'UnitsInStock': 0,
'Discontinued': true
},
{
"CategoryName": "Confections",
'ProductID': 32,
'ProductName': 'Mascarpone Fabioli',
'SupplierID': 14,
'QuantityPerUnit': '24 - 200 g pkgs.',
'UnitPrice': 32.00,
'UnitsInStock': 9,
'Discontinued': false
},
{
"CategoryName": "Confections",
'ProductID': 33,
'ProductName': 'Geitost',
'SupplierID': 15,
'QuantityPerUnit': '500 g',
'UnitPrice': 2.50,
'UnitsInStock': 112,
'Discontinued': false
},
{
"CategoryName": "Confections",
'ProductID': 34,
'ProductName': 'Sasquatch Ale',
'SupplierID': 16,
'QuantityPerUnit': '24 - 12 oz bottles',
'UnitPrice': 14.00,
'UnitsInStock': 111,
'Discontinued': false
},
{
"CategoryName": "Confections",
'ProductID': 35,
'ProductName': 'Steeleye Stout',
'SupplierID': 16,
'QuantityPerUnit': '24 - 12 oz bottles',
'UnitPrice': 18.00,
'UnitsInStock': 20,
'Discontinued': false
},
{
"CategoryName": "Dairy Products",
'ProductID': 36,
'ProductName': 'Inlagd Sill',
'SupplierID': 17,
'QuantityPerUnit': '24 - 250 g jars',
'UnitPrice': 19.00,
'UnitsInStock': 112,
'Discontinued': false
},
{
"CategoryName": "Dairy Products",
'ProductID': 37,
'ProductName': 'Gravad lax',
'SupplierID': 17,
'QuantityPerUnit': '12 - 500 g pkgs.',
'UnitPrice': 26.00,
'UnitsInStock': 11,
'Discontinued': false
},
{
"CategoryName": "Dairy Products",
'ProductID': 38,
'ProductName': 'Côte de Blaye',
'SupplierID': 18,
'QuantityPerUnit': '12 - 75 cl bottles',
'UnitPrice': 263.50,
'UnitsInStock': 17,
'Discontinued': false
},
{
"CategoryName": "Dairy Products",
'ProductID': 39,
'ProductName': 'Chartreuse verte',
'SupplierID': 18,
'QuantityPerUnit': '750 cc per bottle',
'UnitPrice': 18.00,
'UnitsInStock': 69,
'Discontinued': true
},
{
"CategoryName": "Dairy Products",
'ProductID': 40,
'ProductName': 'Boston Crab Meat',
'SupplierID': 19,
'QuantityPerUnit': '24 - 4 oz tins',
'UnitPrice': 18.40,
'UnitsInStock': 123,
'Discontinued': true
},
{
"CategoryName": "Dairy Products",
'ProductID': 41,
'ProductName': 'Jack\'s New England Clam Chowder',
'SupplierID': 19,
'QuantityPerUnit': '12 - 12 oz cans',
'UnitPrice': 9.65,
'UnitsInStock': 85,
'Discontinued': false
},
{
"CategoryName": "Dairy Products",
'ProductID': 42,
'ProductName': 'Singaporean Hokkien Fried Mee',
'SupplierID': 20,
'QuantityPerUnit': '32 - 1 kg pkgs.',
'UnitPrice': 14.00,
'UnitsInStock': 26,
'Discontinued': true
},
{
"CategoryName": "Dairy Products",
'ProductID': 43,
'ProductName': 'Ipoh Coffee',
'SupplierID': 20,
'QuantityPerUnit': '16 - 500 g tins',
'UnitPrice': 46.00,
'UnitsInStock': 17,
'Discontinued': false
},
{
"CategoryName": "Dairy Products",
'ProductID': 44,
'ProductName': 'Gula Malacca',
'SupplierID': 20,
'QuantityPerUnit': '20 - 2 kg bags',
'UnitPrice': 19.45,
'UnitsInStock': 27,
'Discontinued': false
},
{
"CategoryName": "Dairy Products",
'ProductID': 45,
'ProductName': 'Rogede sild',
'SupplierID': 21,
'QuantityPerUnit': '1k pkg.',
'UnitPrice': 9.50,
'UnitsInStock': 5,
'Discontinued': true
},
{
"CategoryName": "Grains/Cereals",
'ProductID': 46,
'ProductName': 'Spegesild',
'SupplierID': 21,
'QuantityPerUnit': '4 - 450 g glasses',
'UnitPrice': 12.00,
'UnitsInStock': 95,
'Discontinued': true
},
{
"CategoryName": "Grains/Cereals",
'ProductID': 47,
'ProductName': 'Zaanse koeken',
'SupplierID': 22,
'QuantityPerUnit': '10 - 4 oz boxes',
'UnitPrice': 9.50,
'UnitsInStock': 36,
'Discontinued': true
},
{
"CategoryName": "Grains/Cereals",
'ProductID': 48,
'ProductName': 'Chocolade',
'SupplierID': 22,
'QuantityPerUnit': '10 pkgs.',
'UnitPrice': 12.75,
'UnitsInStock': 15,
'Discontinued': true
},
{
"CategoryName": "Grains/Cereals",
'ProductID': 49,
'ProductName': 'Maxilaku',
'SupplierID': 23,
'QuantityPerUnit': '24 - 50 g pkgs.',
'UnitPrice': 20.00,
'UnitsInStock': 10,
'Discontinued': false
},
{
"CategoryName": "Grains/Cereals",
'ProductID': 50,
'ProductName': 'Valkoinen suklaa',
'SupplierID': 23,
'QuantityPerUnit': '12 - 100 g bars',
'UnitPrice': 16.25,
'UnitsInStock': 65,
'Discontinued': false
},
{
"CategoryName": "Grains/Cereals",
'ProductID': 51,
'ProductName': 'Manjimup Dried Apples',
'SupplierID': 24,
'QuantityPerUnit': '50 - 300 g pkgs.',
'UnitPrice': 53.00,
'UnitsInStock': 20,
'Discontinued': false
},
{
"CategoryName": "Meat/Poultry",
'ProductID': 52,
'ProductName': 'Filo Mix',
'SupplierID': 24,
'QuantityPerUnit': '16 - 2 kg boxes',
'UnitPrice': 7.00,
'UnitsInStock': 38,
'Discontinued': true
},
{
"CategoryName": "Meat/Poultry",
'ProductID': 53,
'ProductName': 'Perth Pasties',
'SupplierID': 24,
'QuantityPerUnit': '48 pieces',
'UnitPrice': 32.80,
'UnitsInStock': 0,
'Discontinued': true
},
{
"CategoryName": "Produce",
'ProductID': 54,
'ProductName': 'Tourtière',
'SupplierID': 25,
'QuantityPerUnit': '16 pies',
'UnitPrice': 7.45,
'UnitsInStock': 21,
'Discontinued': true
},
{
"CategoryName": "Produce",
'ProductID': 55,
'ProductName': 'Pâté chinois',
'SupplierID': 25,
'QuantityPerUnit': '24 boxes x 2 pies',
'UnitPrice': 24.00,
'UnitsInStock': 115,
'Discontinued': true
},
{
"CategoryName": "Produce",
'ProductName': 'Gnocchi di nonna Alice',
'SupplierID': 26,
'QuantityPerUnit': '24 - 250 g pkgs.',
'UnitPrice': 38.00,
'UnitsInStock': 21,
'Discontinued': false
},
{
"CategoryName": "Produce",
'ProductName': 'Ravioli Angelo',
'SupplierID': 26,
'QuantityPerUnit': '24 - 250 g pkgs.',
'UnitPrice': 19.50,
'UnitsInStock': 36,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 58,
'ProductName': 'Escargots de Bourgogne',
'SupplierID': 27,
'QuantityPerUnit': '24 pieces',
'UnitPrice': 13.25,
'UnitsInStock': 62,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 59,
'ProductName': 'Raclette Courdavault',
'SupplierID': 28,
'QuantityPerUnit': '5 kg pkg.',
'UnitPrice': 55.00,
'UnitsInStock': 79,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 60,
'ProductName': 'Camembert Pierrot',
'SupplierID': 28,
'QuantityPerUnit': '15 - 300 g rounds',
'UnitPrice': 34.00,
'UnitsInStock': 19,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 61,
'ProductName': 'Sirop d\'érable',
'SupplierID': 29,
'QuantityPerUnit': '24 - 500 ml bottles',
'UnitPrice': 28.50,
'UnitsInStock': 113,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 62,
'ProductName': 'Tarte au sucre',
'SupplierID': 29,
'QuantityPerUnit': '48 pies',
'UnitPrice': 49.30,
'UnitsInStock': 17,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 63,
'ProductName': 'Vegie-spread',
'SupplierID': 7,
'QuantityPerUnit': '15 - 625 g jars',
'UnitPrice': 43.90,
'UnitsInStock': 24,
'Discontinued': true
},
{
"CategoryName": "Seafood",
'ProductID': 64,
'ProductName': 'Wimmers gute Semmelknödel',
'SupplierID': 12,
'QuantityPerUnit': '20 bags x 4 pieces',
'UnitPrice': 33.25,
'UnitsInStock': 22,
'Discontinued': true
},
{
"CategoryName": "Seafood",
'ProductID': 65,
'ProductName': 'Louisiana Fiery Hot Pepper Sauce',
'SupplierID': 2,
'QuantityPerUnit': '32 - 8 oz bottles',
'UnitPrice': 21.05,
'UnitsInStock': 76,
'Discontinued': true
},
{
"CategoryName": "Seafood",
'ProductID': 66,
'ProductName': 'Louisiana Hot Spiced Okra',
'SupplierID': 2,
'QuantityPerUnit': '24 - 8 oz jars',
'UnitPrice': 17.00,
'UnitsInStock': 4,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 67,
'ProductName': 'Laughing Lumberjack Lager',
'SupplierID': 16,
'QuantityPerUnit': '24 - 12 oz bottles',
'UnitPrice': 14.00,
'UnitsInStock': 52,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 68,
'ProductName': 'Scottish Longbreads',
'SupplierID': 8,
'QuantityPerUnit': '10 boxes x 8 pieces',
'UnitPrice': 12.50,
'UnitsInStock': 6,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 69,
'ProductName': 'Gudbrandsdalsost',
'SupplierID': 15,
'QuantityPerUnit': '10 kg pkg.',
'UnitPrice': 36.00,
'UnitsInStock': 26,
'Discontinued': false
}
];export let data: object[] = [
{
"CategoryName": "Beveräges",
'ProductID': 1,
'ProductName': 'Chäi',
'SupplierID': 1,
'QuantityPerUnit': '10 boxes x 20 bags',
'UnitPrice': 18.00,
'UnitsInStock': 39,
'Discontinued': true
},
{
"CategoryName": "Beverages",
'ProductID': 2,
'ProductName': 'CHANG',
'SupplierID': 1,
'QuantityPerUnit': '24 - 12 oz bottles',
'UnitPrice': 19.00,
'UnitsInStock': 17,
'Discontinued': true
},
{
"CategoryName": "Beverages",
'ProductID': 3,
'ProductName': 'Aniseed Syrup',
'SupplierID': 1,
'QuantityPerUnit': '12 - 550 ml bottles',
'UnitPrice': 10.00,
'UnitsInStock': 13,
'Discontinued': true
},
{
"CategoryName": "Beverages",
'ProductID': 4,
'ProductName': 'Chef Anton\'s Cajun Seasoning',
'SupplierID': 2,
'QuantityPerUnit': '48 - 6 oz jars',
'UnitPrice': 22.00,
'UnitsInStock': 53,
'Discontinued': true
},
{
"CategoryName": "Beveräges",
'ProductID': 5,
'ProductName': 'Chef Anton\'s Gumbo Mix',
'SupplierID': 2,
'QuantityPerUnit': '36 boxes',
'UnitPrice': 21.35,
'UnitsInStock': 0,
'Discontinued': true
},
{
"CategoryName": "Beverages",
'ProductID': 6,
'ProductName': 'Grandma\'s Boysenberry Spread',
'SupplierID': 3,
'QuantityPerUnit': '12 - 8 oz jars',
'UnitPrice': 25.00,
'UnitsInStock': 120,
'Discontinued': false
},
{
"CategoryName": "Beveräges",
'ProductID': 7,
'ProductName': 'Uncle Bob\'s Organic Dried Pears',
'SupplierID': 3,
'QuantityPerUnit': '12 - 1 lb pkgs.',
'UnitPrice': 30.00,
'UnitsInStock': 15,
'Discontinued': false
},
{
"CategoryName": "Beverages",
'ProductID': 8,
'ProductName': 'Northwoods Cranberry Sauce',
'SupplierID': 3,
'QuantityPerUnit': '12 - 12 oz jars',
'UnitPrice': 40.00,
'UnitsInStock': 6,
'Discontinued': false
},
{
"CategoryName": "Beverages",
'ProductID': 9,
'ProductName': 'Mishi Kobe Niku',
'SupplierID': 4,
'QuantityPerUnit': '18 - 500 g pkgs.',
'UnitPrice': 97.00,
'UnitsInStock': 29,
'Discontinued': true
},
{
"CategoryName": "Beverages",
'ProductID': 10,
'ProductName': 'Ikura',
'SupplierID': 4,
'QuantityPerUnit': '12 - 200 ml jars',
'UnitPrice': 31.00,
'UnitsInStock': 31,
'Discontinued': false
},
{
"CategoryName": "Beveräges",
'ProductID': 11,
'ProductName': 'Queso Cabrales',
'SupplierID': 5,
'QuantityPerUnit': '1 kg pkg.',
'UnitPrice': 21.00,
'UnitsInStock': 22,
'Discontinued': false
},
{
"CategoryName": "Condiments",
'ProductID': 12,
'ProductName': 'Queso Manchego La Pastora',
'SupplierID': 5,
'QuantityPerUnit': '10 - 500 g pkgs.',
'UnitPrice': 38.00,
'UnitsInStock': 86,
'Discontinued': false
},
{
"CategoryName": "Condiments",
'ProductID': 13,
'ProductName': 'Konbu',
'SupplierID': 6,
'QuantityPerUnit': '2 kg box',
'UnitPrice': 6.00,
'UnitsInStock': 24,
'Discontinued': true
},
{
"CategoryName": "Condiments",
'ProductID': 14,
'ProductName': 'Tofu',
'SupplierID': 6,
'QuantityPerUnit': '40 - 100 g pkgs.',
'UnitPrice': 23.25,
'UnitsInStock': 35,
'Discontinued': true
},
{
"CategoryName": "Condiments",
'ProductID': 15,
'ProductName': 'Genen Shouyu',
'SupplierID': 6,
'QuantityPerUnit': '24 - 250 ml bottles',
'UnitPrice': 15.50,
'UnitsInStock': 39,
'Discontinued': true
},
{
"CategoryName": "Condiments",
'ProductID': 16,
'ProductName': 'Pavlova',
'SupplierID': 7,
'QuantityPerUnit': '32 - 500 g boxes',
'UnitPrice': 17.45,
'UnitsInStock': 29,
'Discontinued': true
},
{
"CategoryName": "Condiments",
'ProductID': 17,
'ProductName': 'Alice Mutton',
'SupplierID': 7,
'QuantityPerUnit': '20 - 1 kg tins',
'UnitPrice': 39.00,
'UnitsInStock': 0,
'Discontinued': true
},
{
"CategoryName": "Condiments",
'ProductID': 18,
'ProductName': 'Carnarvon Tigers',
'SupplierID': 7,
'QuantityPerUnit': '16 kg pkg.',
'UnitPrice': 62.50,
'UnitsInStock': 42,
'Discontinued': false
},
{
"CategoryName": "Condiments",
'ProductID': 19,
'ProductName': 'Teatime Chocolate Biscuits',
'SupplierID': 8,
'QuantityPerUnit': '10 boxes x 12 pieces',
'UnitPrice': 9.20,
'UnitsInStock': 25,
'Discontinued': false
},
{
"CategoryName": "Condiments",
'ProductID': 20,
'ProductName': 'Sir Rodney\'s Marmalade',
'SupplierID': 8,
'QuantityPerUnit': '30 gift boxes',
'UnitPrice': 81.00,
'UnitsInStock': 40,
'Discontinued': false
},
{
"CategoryName": "Condiments",
'ProductID': 21,
'ProductName': 'Sir Rodney\'s Scones',
'SupplierID': 8,
'QuantityPerUnit': '24 pkgs. x 4 pieces',
'UnitPrice': 10.00,
'UnitsInStock': 3,
'Discontinued': false
},
{
"CategoryName": "Condiments",
'ProductID': 22,
'ProductName': 'Gustaf\'s Knäckebröd',
'SupplierID': 9,
'QuantityPerUnit': '24 - 500 g pkgs.',
'UnitPrice': 21.00,
'UnitsInStock': 104,
'Discontinued': false
},
{
"CategoryName": "Confections",
'ProductID': 23,
'ProductName': 'Tunnbröd',
'SupplierID': 9,
'QuantityPerUnit': '12 - 250 g pkgs.',
'UnitPrice': 9.00,
'UnitsInStock': 61,
'Discontinued': false
},
{
"CategoryName": "Confections",
'ProductID': 24,
'ProductName': 'Guaraná Fantástica',
'SupplierID': 10,
'QuantityPerUnit': '12 - 355 ml cans',
'UnitPrice': 4.50,
'UnitsInStock': 20,
'Discontinued': true
},
{
"CategoryName": "Confections",
'ProductID': 25,
'ProductName': 'NuNuCa Nuß-Nougat-Creme',
'SupplierID': 11,
'QuantityPerUnit': '20 - 450 g glasses',
'UnitPrice': 14.00,
'UnitsInStock': 76,
'Discontinued': false
},
{
"CategoryName": "Confections",
'ProductID': 26,
'ProductName': 'Gumbär Gummibärchen',
'SupplierID': 11,
'QuantityPerUnit': '100 - 250 g bags',
'UnitPrice': 31.23,
'UnitsInStock': 15,
'Discontinued': true
},
{
"CategoryName": "Confections",
'ProductID': 27,
'ProductName': 'Schoggi Schokolade',
'SupplierID': 11,
'QuantityPerUnit': '100 - 100 g pieces',
'UnitPrice': 43.90,
'UnitsInStock': 49,
'Discontinued': true
},
{
"CategoryName": "Confections",
'ProductID': 28,
'ProductName': 'Rössle Sauerkraut',
'SupplierID': 12,
'QuantityPerUnit': '25 - 825 g cans',
'UnitPrice': 45.60,
'UnitsInStock': 26,
'Discontinued': true
},
{
"CategoryName": "Confections",
'ProductID': 29,
'ProductName': 'Thüringer Rostbratwurst',
'SupplierID': 12,
'QuantityPerUnit': '50 bags x 30 sausgs.',
'UnitPrice': 123.79,
'UnitsInStock': 0,
'Discontinued': true
},
{
"CategoryName": "Confections",
'ProductID': 30,
'ProductName': 'Nord-Ost Matjeshering',
'SupplierID': 13,
'QuantityPerUnit': '10 - 200 g glasses',
'UnitPrice': 25.89,
'UnitsInStock': 10,
'Discontinued': true
},
{
"CategoryName": "Confections",
'ProductID': 31,
'ProductName': 'Gorgonzola Telino',
'SupplierID': 14,
'QuantityPerUnit': '12 - 100 g pkgs',
'UnitPrice': 12.50,
'UnitsInStock': 0,
'Discontinued': true
},
{
"CategoryName": "Confections",
'ProductID': 32,
'ProductName': 'Mascarpone Fabioli',
'SupplierID': 14,
'QuantityPerUnit': '24 - 200 g pkgs.',
'UnitPrice': 32.00,
'UnitsInStock': 9,
'Discontinued': false
},
{
"CategoryName": "Confections",
'ProductID': 33,
'ProductName': 'Geitost',
'SupplierID': 15,
'QuantityPerUnit': '500 g',
'UnitPrice': 2.50,
'UnitsInStock': 112,
'Discontinued': false
},
{
"CategoryName": "Confections",
'ProductID': 34,
'ProductName': 'Sasquatch Ale',
'SupplierID': 16,
'QuantityPerUnit': '24 - 12 oz bottles',
'UnitPrice': 14.00,
'UnitsInStock': 111,
'Discontinued': false
},
{
"CategoryName": "Confections",
'ProductID': 35,
'ProductName': 'Steeleye Stout',
'SupplierID': 16,
'QuantityPerUnit': '24 - 12 oz bottles',
'UnitPrice': 18.00,
'UnitsInStock': 20,
'Discontinued': false
},
{
"CategoryName": "Dairy Products",
'ProductID': 36,
'ProductName': 'Inlagd Sill',
'SupplierID': 17,
'QuantityPerUnit': '24 - 250 g jars',
'UnitPrice': 19.00,
'UnitsInStock': 112,
'Discontinued': false
},
{
"CategoryName": "Dairy Products",
'ProductID': 37,
'ProductName': 'Gravad lax',
'SupplierID': 17,
'QuantityPerUnit': '12 - 500 g pkgs.',
'UnitPrice': 26.00,
'UnitsInStock': 11,
'Discontinued': false
},
{
"CategoryName": "Dairy Products",
'ProductID': 38,
'ProductName': 'Côte de Blaye',
'SupplierID': 18,
'QuantityPerUnit': '12 - 75 cl bottles',
'UnitPrice': 263.50,
'UnitsInStock': 17,
'Discontinued': false
},
{
"CategoryName": "Dairy Products",
'ProductID': 39,
'ProductName': 'Chartreuse verte',
'SupplierID': 18,
'QuantityPerUnit': '750 cc per bottle',
'UnitPrice': 18.00,
'UnitsInStock': 69,
'Discontinued': true
},
{
"CategoryName": "Dairy Products",
'ProductID': 40,
'ProductName': 'Boston Crab Meat',
'SupplierID': 19,
'QuantityPerUnit': '24 - 4 oz tins',
'UnitPrice': 18.40,
'UnitsInStock': 123,
'Discontinued': true
},
{
"CategoryName": "Dairy Products",
'ProductID': 41,
'ProductName': 'Jack\'s New England Clam Chowder',
'SupplierID': 19,
'QuantityPerUnit': '12 - 12 oz cans',
'UnitPrice': 9.65,
'UnitsInStock': 85,
'Discontinued': false
},
{
"CategoryName": "Dairy Products",
'ProductID': 42,
'ProductName': 'Singaporean Hokkien Fried Mee',
'SupplierID': 20,
'QuantityPerUnit': '32 - 1 kg pkgs.',
'UnitPrice': 14.00,
'UnitsInStock': 26,
'Discontinued': true
},
{
"CategoryName": "Dairy Products",
'ProductID': 43,
'ProductName': 'Ipoh Coffee',
'SupplierID': 20,
'QuantityPerUnit': '16 - 500 g tins',
'UnitPrice': 46.00,
'UnitsInStock': 17,
'Discontinued': false
},
{
"CategoryName": "Dairy Products",
'ProductID': 44,
'ProductName': 'Gula Malacca',
'SupplierID': 20,
'QuantityPerUnit': '20 - 2 kg bags',
'UnitPrice': 19.45,
'UnitsInStock': 27,
'Discontinued': false
},
{
"CategoryName": "Dairy Products",
'ProductID': 45,
'ProductName': 'Rogede sild',
'SupplierID': 21,
'QuantityPerUnit': '1k pkg.',
'UnitPrice': 9.50,
'UnitsInStock': 5,
'Discontinued': true
},
{
"CategoryName": "Grains/Cereals",
'ProductID': 46,
'ProductName': 'Spegesild',
'SupplierID': 21,
'QuantityPerUnit': '4 - 450 g glasses',
'UnitPrice': 12.00,
'UnitsInStock': 95,
'Discontinued': true
},
{
"CategoryName": "Grains/Cereals",
'ProductID': 47,
'ProductName': 'Zaanse koeken',
'SupplierID': 22,
'QuantityPerUnit': '10 - 4 oz boxes',
'UnitPrice': 9.50,
'UnitsInStock': 36,
'Discontinued': true
},
{
"CategoryName": "Grains/Cereals",
'ProductID': 48,
'ProductName': 'Chocolade',
'SupplierID': 22,
'QuantityPerUnit': '10 pkgs.',
'UnitPrice': 12.75,
'UnitsInStock': 15,
'Discontinued': true
},
{
"CategoryName": "Grains/Cereals",
'ProductID': 49,
'ProductName': 'Maxilaku',
'SupplierID': 23,
'QuantityPerUnit': '24 - 50 g pkgs.',
'UnitPrice': 20.00,
'UnitsInStock': 10,
'Discontinued': false
},
{
"CategoryName": "Grains/Cereals",
'ProductID': 50,
'ProductName': 'Valkoinen suklaa',
'SupplierID': 23,
'QuantityPerUnit': '12 - 100 g bars',
'UnitPrice': 16.25,
'UnitsInStock': 65,
'Discontinued': false
},
{
"CategoryName": "Grains/Cereals",
'ProductID': 51,
'ProductName': 'Manjimup Dried Apples',
'SupplierID': 24,
'QuantityPerUnit': '50 - 300 g pkgs.',
'UnitPrice': 53.00,
'UnitsInStock': 20,
'Discontinued': false
},
{
"CategoryName": "Meat/Poultry",
'ProductID': 52,
'ProductName': 'Filo Mix',
'SupplierID': 24,
'QuantityPerUnit': '16 - 2 kg boxes',
'UnitPrice': 7.00,
'UnitsInStock': 38,
'Discontinued': true
},
{
"CategoryName": "Meat/Poultry",
'ProductID': 53,
'ProductName': 'Perth Pasties',
'SupplierID': 24,
'QuantityPerUnit': '48 pieces',
'UnitPrice': 32.80,
'UnitsInStock': 0,
'Discontinued': true
},
{
"CategoryName": "Produce",
'ProductID': 54,
'ProductName': 'Tourtière',
'SupplierID': 25,
'QuantityPerUnit': '16 pies',
'UnitPrice': 7.45,
'UnitsInStock': 21,
'Discontinued': true
},
{
"CategoryName": "Produce",
'ProductID': 55,
'ProductName': 'Pâté chinois',
'SupplierID': 25,
'QuantityPerUnit': '24 boxes x 2 pies',
'UnitPrice': 24.00,
'UnitsInStock': 115,
'Discontinued': true
},
{
"CategoryName": "Produce",
'ProductName': 'Gnocchi di nonna Alice',
'SupplierID': 26,
'QuantityPerUnit': '24 - 250 g pkgs.',
'UnitPrice': 38.00,
'UnitsInStock': 21,
'Discontinued': false
},
{
"CategoryName": "Produce",
'ProductName': 'Ravioli Angelo',
'SupplierID': 26,
'QuantityPerUnit': '24 - 250 g pkgs.',
'UnitPrice': 19.50,
'UnitsInStock': 36,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 58,
'ProductName': 'Escargots de Bourgogne',
'SupplierID': 27,
'QuantityPerUnit': '24 pieces',
'UnitPrice': 13.25,
'UnitsInStock': 62,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 59,
'ProductName': 'Raclette Courdavault',
'SupplierID': 28,
'QuantityPerUnit': '5 kg pkg.',
'UnitPrice': 55.00,
'UnitsInStock': 79,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 60,
'ProductName': 'Camembert Pierrot',
'SupplierID': 28,
'QuantityPerUnit': '15 - 300 g rounds',
'UnitPrice': 34.00,
'UnitsInStock': 19,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 61,
'ProductName': 'Sirop d\'érable',
'SupplierID': 29,
'QuantityPerUnit': '24 - 500 ml bottles',
'UnitPrice': 28.50,
'UnitsInStock': 113,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 62,
'ProductName': 'Tarte au sucre',
'SupplierID': 29,
'QuantityPerUnit': '48 pies',
'UnitPrice': 49.30,
'UnitsInStock': 17,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 63,
'ProductName': 'Vegie-spread',
'SupplierID': 7,
'QuantityPerUnit': '15 - 625 g jars',
'UnitPrice': 43.90,
'UnitsInStock': 24,
'Discontinued': true
},
{
"CategoryName": "Seafood",
'ProductID': 64,
'ProductName': 'Wimmers gute Semmelknödel',
'SupplierID': 12,
'QuantityPerUnit': '20 bags x 4 pieces',
'UnitPrice': 33.25,
'UnitsInStock': 22,
'Discontinued': true
},
{
"CategoryName": "Seafood",
'ProductID': 65,
'ProductName': 'Louisiana Fiery Hot Pepper Sauce',
'SupplierID': 2,
'QuantityPerUnit': '32 - 8 oz bottles',
'UnitPrice': 21.05,
'UnitsInStock': 76,
'Discontinued': true
},
{
"CategoryName": "Seafood",
'ProductID': 66,
'ProductName': 'Louisiana Hot Spiced Okra',
'SupplierID': 2,
'QuantityPerUnit': '24 - 8 oz jars',
'UnitPrice': 17.00,
'UnitsInStock': 4,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 67,
'ProductName': 'Laughing Lumberjack Lager',
'SupplierID': 16,
'QuantityPerUnit': '24 - 12 oz bottles',
'UnitPrice': 14.00,
'UnitsInStock': 52,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 68,
'ProductName': 'Scottish Longbreads',
'SupplierID': 8,
'QuantityPerUnit': '10 boxes x 8 pieces',
'UnitPrice': 12.50,
'UnitsInStock': 6,
'Discontinued': false
},
{
"CategoryName": "Seafood",
'ProductID': 69,
'ProductName': 'Gudbrandsdalsost',
'SupplierID': 15,
'QuantityPerUnit': '10 kg pkg.',
'UnitPrice': 36.00,
'UnitsInStock': 26,
'Discontinued': false
}
];
- You can set searchSettings.ignoreAccent property along with other search settings such as fields, operator, and ignoreCase to achieve the desired search behavior.
- This feature works only for the characters that are not in the ASCII range.
- This feature may have a slight impact on search performance.
Highlight the search text
The Syncfusion Grid component allows you to visually highlight search results within the displayed data. This feature helps you to quickly identify where the search items are found within the displayed data. By adding a style to the matched text, you can quickly identify where the search items are present in the grid.
To achieve search text highlighting in the Grid, you can utilize the queryCellInfo event. This event is triggered for each cell during the Grid rendering process, allowing you to customize the cell content based on your requirements.
The following example demonstrates how to highlight search text in grid using the queryCellInfo event. The queryCellInfo event checks if the current cell is in the desired search column, retrieves the cell value, search keyword and uses the includes method to check if the cell value contains the search keyword. If it does, the matched text is replaced with the same text wrapped in a span tag with a customcss class. You can then use CSS to define the customcss class and style to easily identify where the search keywords are present in the grid.
import { ColumnDirective, ColumnsDirective, GridComponent, Search } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let key = '';
const actionBegin = (args) => {
if (args.requestType === 'searching') {
key = args.searchString.toLowerCase();
}
}
const queryCellInfo = (args) => {
if (key !== '') {
let cellContent = args.data[args.column.field];
let parsedContent = cellContent.toString().toLowerCase();
if (parsedContent.includes(key.toLowerCase())) {
let i = 0;
let searchStr = '';
while (i < key.length) {
let index = parsedContent.indexOf(key[i]);
searchStr = searchStr + cellContent.toString()[index];
i++;
}
args.cell.innerHTML = args.cell.innerText.replaceAll(searchStr, "<span class='customcss'>" + searchStr + '</span>');
}
}
}
return (<div>
<GridComponent dataSource={data} height={280} toolbar={['Search']} actionBegin={actionBegin} queryCellInfo={queryCellInfo}>
<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' textAlign="Right" />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
</ColumnsDirective>
<Inject services={[Toolbar, Search]} />
</GridComponent>
</div>);
};
export default App;import { ColumnDirective, ColumnsDirective, GridComponent, QueryCellInfoEventArgs, Search, SearchEventArgs } from '@syncfusion/ej2-react-grids';
import { Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let key: string = '';
const actionBegin = (args: SearchEventArgs) => {
if (args.requestType === 'searching') {
key = args.searchString.toLowerCase();
}
}
const queryCellInfo = (args: QueryCellInfoEventArgs) => {
if (key !== '') {
let cellContent = args.data[args.column.field];
let parsedContent = cellContent.toString().toLowerCase();
if (parsedContent.includes(key.toLowerCase())) {
let i = 0;
let searchStr = '';
while (i < key.length) {
let index = parsedContent.indexOf(key [i]);
searchStr = searchStr + cellContent.toString()[index];
i++;
}
args.cell.innerHTML = args.cell.innerText.replaceAll(searchStr, "<span class='customcss'>" + searchStr + '</span>');
}
}
}
return (<div>
<GridComponent dataSource={data} height={280} toolbar={['Search']} actionBegin={actionBegin} queryCellInfo={queryCellInfo}>
<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' textAlign="Right" />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
</ColumnsDirective>
<Inject services={[Toolbar, Search]} />
</GridComponent>
</div>);
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Clear search by external button
The Syncfusion Grid component provides a capability to clear searched data in the grid. This functionality offers the ability to reset or clear any active search filters that have been applied to the grid’s data.
To clear the searched grid records from an external button, you can set the searchSettings.key property to an empty string to clear the search text. This property represents the current search text in the search box.
The following example demonstrates how to clear the searched records using an external button.
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Search, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const toolbarOptions = ['Search'];
const searchOptions = {
fields: ['CustomerID'],
ignoreCase: true,
key: 'Ha',
operator: 'contains',
};
const clickHandler = () => {
if (grid) {
grid.searchSettings.key = '';
}
};
return (<div>
<ButtonComponent onClick={clickHandler}>Clear Search</ButtonComponent>
<GridComponent dataSource={data} toolbar={toolbarOptions} searchSettings={searchOptions} height={260} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
<Inject services={[Search, Toolbar]}/>
</GridComponent></div>);
};
export default App;import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import { Inject, Search, SearchSettingsModel, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: Grid | null;
const toolbarOptions: ToolbarItems[] = ['Search'];
const searchOptions: SearchSettingsModel = {
fields: ['CustomerID'],
ignoreCase: true,
key: 'Ha',
operator: 'contains',
};
const clickHandler = () => {
if (grid) {
grid.searchSettings.key = '';
}
};
return (<div>
<ButtonComponent onClick={clickHandler}>Clear Search</ButtonComponent>
<GridComponent dataSource={data} toolbar={toolbarOptions}
searchSettings={searchOptions} height={260} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right" />
<ColumnDirective field='CustomerID' width='100' />
<ColumnDirective field='EmployeeID' width='100' textAlign="Right" />
<ColumnDirective field='ShipCountry' width='100' />
</ColumnsDirective>
<Inject services={[Search, Toolbar]} />
</GridComponent></div>);
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];You can also clear the searched records by using the clear icon within the search input field.