How can I help you?
Searching in React Grid Component
13 Feb 202624 minutes to read
The Syncfusion React Grid includes a powerful built-in searching feature that enables efficient filtering of grid records based on search criteria. This feature allows quick discovery of specific data within large datasets. Whether the application works with small or large datasets, the search feature provides a seamless solution for locating relevant records instantly.
Enable searching
To enable the searching feature, the Search module must be injected into the grid.
In addition, a search text box can be placed directly in the Grid toolbar to provide a convenient place to enter search criteria. This can be done by injecting the Toolbar module into the grid and configuring the toolbar property with Search item.
The following example demonstrates enabling the toolbar with search option in the Grid:
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 appears in the search text box when it has focus or after entering a character. Clicking the clear icon removes the text from the search box and resets the grid to display all records.
Initial search
By default, the search operation is performed after the grid renders. However, scenarios may require applying a search automatically when the grid first loads. The initial search feature enables this by setting search criteria before the grid displays its data.
To apply search at initial rendering, configure the following properties in the searchSettings object.
| Property | Description |
|---|---|
fields |
Specifies the fields (column names) in which the search operates. By default, the grid searches all columns. Set this property to limit the search to specific columns. |
operator |
Specifies the operator that determines the way the search key matches the data. Available Options include startswith, endswith, contains, equal, and others. The default value is contains. |
key |
Specifies the key value (search text) to be applied. The grid filters records matching this value based on the specified operator. |
ignoreCase |
Set ignoreCase to true to make the search case-insensitive. For example, searching “john” finds “John”, “JOHN”, and “john”. |
ignoreAccent |
Set ignoreAccent to true to ignore diacritic characters (accents) during searching. For example, “café” matches “cafe”. |
The following example demonstrates configuring initial search by setting these properties.
const searchSettings = {
fields: ['CustomerID'],
operator: 'contains',
key: 'Ha',
ignoreCase: true,
ignoreAccent: true
}This configuration searches the “Customer ID” column for records containing “Ha” (case-insensitive, accent-insensitive). When the grid loads, it automatically filters to show only matching records. If these properties are misconfigured or left “undefined”, the grid displays all records without initial filtering.
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, the grid searches all visible columns. Customize this by setting the
searchSettings.fieldsproperty to limit searching to specific columns only.
Search operators
Search operators are symbols or keywords used to define the type of comparison or condition applied during a search operation. They specify the way the search key is compared with the column data. Different operators enable different types of matching logic. The searchSettings.operator property configures which operator the grid uses.
By default, the searchSettings.operator is set to contains, which returns records containing the search key anywhere in the specified columns. The following operators are available.
| Operator | Description | Example |
|---|---|---|
| startswith | Matches records that begin with the search key | Searching “John” finds “Johnson” and “Johnathan”, but not “St. John” |
| endswith | Matches records that end with the search key | Searching “son” finds “Johnson” and “Allison”, but not “Sunshine” |
| contains | Matches records containing the search key anywhere | Searching “son” finds “Johnson”, “Sunshine”, and “Allison” |
| wildcard | Uses wildcards (* symbol) for pattern matching | Searching “J*n” finds “John”, “Jen”, “Jargon” |
| like | Uses SQL LIKE pattern (% symbol) for matching | Searching “J%n” finds “John”, “Jen”, “Jargon” |
| equal | Matches records exactly equal to the search key | Searching “John” finds only cells containing exactly “John” |
| notequal | Matches records that DO NOT equal the search key | Searching “John” finds all records except those with exactly “John” |
These operators provide flexibility in defining the search behavior and allow different types of comparisons to be performed based on the requirements.
The following example demonstrates setting the searchSettings.operator property based on the selected 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={{ padding: "10px 10px 26px 0" }}>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={{ padding: "10px 10px 26px 0" }}>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 using an external button
The Grid component provides the search method, which enables programmatic searching. This allows implementing custom search interfaces outside the grid’s toolbar, such as using a dedicated search button or external search box.
Implementation steps for searching via an external button:
- Add a textbox and a button element outside the grid component.
- Attach a
clickevent handler to the button. - Enter the text to search in the grid.
- In the event handler, get the entered text from the textbox.
- Call the grid’s
searchmethod, passing the text 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 across all visible columns. However, scenarios may require searching only specific columns. The searchSettings.fields property enables limiting the search scope to targeted columns.
This approach is useful when:
- Applications work with large grids containing many columns (reduces processing time).
- Search should focus on key columns (like “Customer ID” or “Freight”) rather than all columns.
- Displaying search results for specific fields improves relevance.
The following example searches only the “Customer ID”, “Freight”, and “Ship Country” columns.
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
}];Perform real-time search while typing
The real-time search feature enables searching as each keystroke is entered into the search box. This provides immediate, dynamic search results without requiring pressing Enter or clicking a button.
Implementation of real-time search:
- Bind the
keyupevent to the search input element inside the grid’screatedevent. - The
keyupevent triggers the search method on each keystroke. - The grid results update in real-time as typing occurs.
In the following example, the created event of the grid binds the keyup event to the search input element. When typing occurs, the keyup event fires, retrieves the current search text from the input, and calls the grid’s search method with the new text. This produces real-time filtering as typing happens.
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
}];Real-time search on keystroke may impact performance when the application works with large datasets (thousands of rows). Consider implementing a delayed search trigger or using initial search combined with external buttons for better performance with large data.
Search based on formatted column values
By default, search operations examine the underlying raw data in cells. However, scenarios may require searching based on formatted values visible in the interface. For example, searching for dates in a specific format or currency amounts with formatting applied. This can be achieved using the grid.valueFormatterService.fromView method.
Implementation of searching the formatted data:
- Use the
grid.valueFormatterService.fromViewmethod within the actionBegin event. - This method retrieves the formatted (displayed) value of a cell.
- Compare the formatted value against the search term using
ORlogic. - This allows the grid to match both raw and formatted data.
In the following example, the actionBegin event checks if a column has formatting applied. If it does, the formatted value is retrieved and compared against the search term using OR logic, allowing the grid to match both raw and formatted data. 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
}];Search using multiple keywords
The Grid component supports searching with multiple keywords simultaneously. This enables narrowing search results by matching multiple conditions at once. For example, finding records where CustomerID contains “A” AND ShipCountry contains “US”.
Implementation of multi-keyword search:
- Use the actionBegin event.
- Split the search text by a delimiter (comma, space, etc.).
- Create filter predicates for each keyword.
- Combine them using
ORlogic (records matching any keyword are shown).
In the following example, entering “France, Germany” in the search box searches for records where the country is either “France” or “Germany”. 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();
}
document.getElementById(grid.element.id + '_searchbar').addEventListener('keyup', (args) => {
if (args.target.value === '' && (args.key === 'Enter' || args.key === 'Backspace')) {
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();
}
(document.getElementById(grid.element.id + '_searchbar') as HTMLElement).addEventListener('keyup', (args) => {
if ((args.target as HTMLInputElement).value === '' && (args.key === 'Enter' || args.key === 'Backspace')) {
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;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 multiple keywords, searches are more flexible and powerful. Keywords are split by a delimiter and combined using
ORlogic, meaning the grid displays records matching any of the provided keywords.
Ignore accents and diacritics while searching
By default, the search operation distinguishes between characters with and without accents (diacritics). For example, searching for “Chai” does not find “Chäi”. Set the searchSettings.ignoreAccent property to true to make the search accent-insensitive.
This feature is useful when:
- Applications work with international data containing accented characters (é, ñ, ü, etc.).
- Search should match both “Chäi” and “Chai” as equivalent.
- Input searches may not include accents even though data contains them.
The following example demonstrates toggling the ignoreAccent property using a switch button. 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={{ padding: "10px 10px" }}>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={{ padding: "10px 10px" }}>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
}
];
- The
ignoreAccentproperty can be combined with other search settings such asfields,operator,ignoreCaseto customize search behavior.- This feature applies only to non-ASCII characters (characters with diacritical marks).
- Enabling accent-ignoring may have a slight performance impact on very large datasets.
Highlight matched search text
Search text highlighting visually emphasizes where search keywords appear in the grid. The Grid component supports highlighting matched text by styling the text with colors or background colors.
Implementation approach:
- Use the queryCellInfo event.
- This event fires for each cell during rendering.
- Check if the current cell’s column is the search column.
- Retrieve the cell value and search keyword.
- Replace the matched text with the same text wrapped in a
<span>element with a “customcss” class.
Define the CSS class to apply highlighting styles (e.g., background-color: yellow;):
.customcss {
background-color: yellow;
font-weight: bold;
}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 results using an external button
The Grid component provides the capability to clear search results and reset the grid to display all records. This is useful for resetting search filters when a “Clear” or “Reset” button is clicked.
Implementation of clearing search results from an external button:
- Set the searchSettings.key property to an empty string.
- This property represents the current search text.
- Setting it to empty clears the search text and resets the grid.
The following example demonstrates clearing search 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
}];Alternatively, the search box’s built-in clear icon also clears search results. When the search box has focus or contains text, clicking the clear icon removes the text and resets the grid to display all records.
Retrieve searched records using an external button
The Grid component enables retrieving the records that match the current search criteria. This allows capturing searched results for export, further processing, or display in another component.
Implementation of retrieving searched records using an external button.
- Use the actionComplete event.
- This event fires when a search action completes.
- Access the search text from the event.
- Use the
DataManager.executeQuery()method with the search text to retrieve matching records.
The following example demonstrates retrieving searched records using an external button:
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Page, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DataManager, Query } from '@syncfusion/ej2-data';
function App() {
let lastSearchString = '';
const toolbarOptions = ['Search'];
function actionComplete(args){
if (args.requestType === 'searching') {
lastSearchString = args.searchString; // Store the last searched value.
}
}
function getSearchedRecords(){
if (lastSearchString) {
new DataManager(data).executeQuery(new Query().search(lastSearchString, [], undefined, true)).then((e) => {
console.log('Searched Records:', e.result); // Log searched records.
});
}
}
return (
<div className='control-pane'>
<div className='control-section'>
<ButtonComponent id='getSearchedRecords' onClick={getSearchedRecords}>Get Searched Records</ButtonComponent>
<GridComponent dataSource={data} allowPaging={true} pageSettings= toolbar={toolbarOptions} actionComplete={actionComplete.bind(this)}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='CustomerID' headerText='Customer Name' width='150'></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Page, Toolbar]}/>
</GridComponent>
</div>
</div>
)
}
export default App;import { ColumnDirective, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import { Page, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DataManager, Query } from '@syncfusion/ej2-data';
function App() {
let lastSearchString = '';
const toolbarOptions = ['Search'];
function actionComplete(args){
if (args.requestType === 'searching') {
lastSearchString = args.searchString; // Store the last searched value.
}
}
function getSearchedRecords(){
if (lastSearchString) {
new DataManager(data).executeQuery(new Query().search(lastSearchString, [], undefined, true)).then((e) => {
console.log('Searched Records:', e.result); // Log searched records.
});
}
}
return (
<div className='control-pane'>
<div className='control-section'>
<ButtonComponent id='getSearchedRecords' onClick={getSearchedRecords}>Get Searched Records</ButtonComponent>
<GridComponent dataSource={data} allowPaging={true} pageSettings= toolbar={toolbarOptions} actionComplete={actionComplete.bind(this)}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='CustomerID' headerText='Customer Name' width='150'></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Page, Toolbar]}/>
</GridComponent>
</div>
</div>
)
}
export default App;export let data = [
{ OrderID: 10248, CustomerID: 'VINET', Freight: 32.38, ShipCountry: 'France'},
{ OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61, ShipCountry: 'Germany'},
{ OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83, ShipCountry: 'Brazil'},
{ OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34, ShipCountry: 'France'}
];export let data: Object[] = [
{ OrderID: 10248, CustomerID: 'VINET', Freight: 32.38, ShipCountry: 'France'},
{ OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61, ShipCountry: 'Germany'},
{ OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83, ShipCountry: 'Brazil'},
{ OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34, ShipCountry: 'France'}
];See also
How to perform search by using Wildcard and LIKE operator filter