Filtering allows you to view specific or related records based on filter criteria. To enable filtering in the TreeGrid, set the allowFiltering
to true. Filtering options can be configured through filterSettings
.
To use filter, inject the Filter module in the treegrid.
To get start quickly with filtering functionalities, you can check on this video:
import { ColumnDirective, ColumnsDirective, Filter, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering={true}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, Filter, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering={true}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
- You can apply and clear filtering by using
filterByColumn
andclearFiltering
methods.- To disable filtering for a particular column, set
columns.allowFiltering
to false.
TreeGrid provides support for a set of filtering modes with filterSettings.filterHierarchyMode
property.
The below are the type of filter mode available in TreeGrid.
import { ChangeEventArgs, DropDownListComponent } from "@syncfusion/ej2-react-dropdowns";
import { ColumnDirective, ColumnsDirective, Filter, FilterHierarchyMode } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGrid, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
private treegrid: TreeGrid | null;
private data: string[] = ['Parent', 'Child', 'Both', 'None']
public onChange(sel: ChangeEventArgs): void {
const mode: FilterHierarchyMode = sel.value.toString() as FilterHierarchyMode;
if (this.treegrid) {
this.treegrid.filterSettings.hierarchyMode = mode;
this.treegrid.clearFiltering();
}
}
public render() {
this.onChange = this.onChange.bind(this);
return(<div><DropDownListComponent popupHeight="250px" dataSource={this.data} value="Parent" change={this.onChange} width="150px" />
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='225' allowFiltering='true'
ref={treegrid => this.treegrid = treegrid}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent></div>)
}
}
import { DropDownListComponent } from "@syncfusion/ej2-react-dropdowns";
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.data = ['Parent', 'Child', 'Both', 'None'];
}
onChange(sel) {
const mode = sel.value.toString();
if (this.treegrid) {
this.treegrid.filterSettings.hierarchyMode = mode;
this.treegrid.clearFiltering();
}
}
render() {
this.onChange = this.onChange.bind(this);
return (<div><DropDownListComponent popupHeight="250px" dataSource={this.data} value="Parent" change={this.onChange} width="150px"/>
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='225' allowFiltering='true' ref={treegrid => this.treegrid = treegrid}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent></div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
To apply the filter at initial rendering, set the filter predicate object in
filterSettings.columns
.
import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public FilterOptions: FilterSettingsModel = {
columns: [
{ field: 'taskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'plan' },
{ field: 'duration', matchCase: false, operator: 'equal', predicate: 'and', value: 5 }]
};
public render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
height='275' allowFiltering='true' filterSettings={this.FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.FilterOptions = {
columns: [
{ field: 'taskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'plan' },
{ field: 'duration', matchCase: false, operator: 'equal', predicate: 'and', value: 5 }
]
};
}
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering='true' filterSettings={this.FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The filter operator for a column can be defined in the operator
property of filterSettings.columns
.
The available operators and its supported data types are:
Operator | Description | Supported Types |
---|---|---|
startswith | Checks whether the value begins with the specified value. | String |
endswith | Checks whether the value ends with the specified value. | String |
contains | Checks whether the value contains the specified value. | String |
equal | Checks whether the value is equal to the specified value. | String | Number | Boolean | Date |
notequal | Checks for values not equal to the specified value. | String | Number | Boolean | Date |
greaterthan | Checks whether the value is greater than the specified value. | Number | Date |
greaterthanorequal | Checks whether a value is greater than or equal to the specified value. | Number | Date |
lessthan | Checks whether the value is less than the specified value. | Number | Date |
lessthanorequal | Checks whether the value is less than or equal to the specified value. | Number | Date |
By default, the filterSettings.columns.operator value is equal.
By setting the allowFiltering
to true, the filter bar row will render next to the header, which allows you to filter data. You can filter the records with different expressions depending upon the column type.
Filter bar expressions:
You can enter the following filter expressions (operators) manually in the filter bar.
Expression | Example | Description | Column Type |
---|---|---|---|
= | =value | equal | Number |
!= | !=value | notequal | Number |
> | >value | greaterthan | Number |
< | <value | lessthan | Number |
>= | >=value | greaterthanorequal | Number |
<= | <=value | lessthanorequal | Number |
* | *value | startswith | String |
% | %value | endswith | String |
N/A | N/A | Equal operator will always be used for date filter. | Date |
N/A | N/A | Equal operator will always be used for Boolean filter. | Boolean |
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering='true'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering='true'>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
By default, the
filterSettings.columns.operator
value is equal.
You can customize default filter bar component of a column by custom component using filter template.
The following example demonstrates the way to use filter template for a column when using filter bar. In the following example, the DropdownList component is used to filter duration column using filter template.
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGrid, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public treegrid: TreeGrid | null;
public onChange(args: any): any{
if (this.treegrid) {
if (args.value === 'All') {
this.treegrid.clearFiltering();
} else {
this.treegrid.filterByColumn('duration', 'equal', parseInt(args.value, 0));
}
}
}
public templateOptions(props:any): any {
this.onChange = this.onChange.bind(this);
const dataSource: string[] = ['All', '1', '3', '4', '5', '6', '8', '9'];
return (<DropDownListComponent id={props.column.field} popupHeight='250px' dataSource={dataSource} change={this.onChange} /> );
}
public render() {
this.templateOptions = this.templateOptions.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering='true' ref={treegrid => this.treegrid = treegrid}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' filterTemplate={this.templateOptions} />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
}
}
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
onChange(args) {
if (this.treegrid) {
if (args.value === 'All') {
this.treegrid.clearFiltering();
}
else {
this.treegrid.filterByColumn('duration', 'equal', parseInt(args.value, 0));
}
}
}
templateOptions(props) {
this.onChange = this.onChange.bind(this);
const dataSource = ['All', '1', '3', '4', '5', '6', '8', '9'];
return (<DropDownListComponent id={props.column.field} popupHeight='250px' dataSource={dataSource} change={this.onChange}/>);
}
render() {
this.templateOptions = this.templateOptions.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering='true' ref={treegrid => this.treegrid = treegrid}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' filterTemplate={this.templateOptions}/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
You can change the default filter operator by extending filterModule.filterOperators
property in dataBound
event.
In the following sample, we have changed the default operator for string typed columns as contains
from startsWith
.
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid'
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public dataBound(args){
Object.assign(this.treegrid.grid.filterModule.filterOperators,{ startsWith: 'contains' });
}
public render() {
this.dataBound=this.dataBound.bind(this);
return <TreeGridComponent dataSource={sampleData} dataBound={this.dataBound} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering='true' ref={treegrid => this.treegrid = treegrid}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' filterTemplate={this.templateOptions} />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
dataBound(args) {
Object.assign(this.treegrid.grid.filterModule.filterOperators, { startsWith: 'contains' });
}
render() {
this.dataBound = this.dataBound.bind(this);
return <TreeGridComponent dataSource={sampleData} dataBound={this.dataBound} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering='true' ref={treegrid => this.treegrid = treegrid}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' filterTemplate={this.templateOptions}/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
You can enable filter menu by setting the filterSettings.type
as Menu. The filter menu UI will be rendered based on its column type, which allows you to filter data.
You can filter the records with different operators.
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { FilterSettingsModel, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public FilterOptions: FilterSettingsModel = {
type: 'Menu'
};
public render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering='true' filterSettings={this.FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.FilterOptions = {
type: 'Menu'
};
}
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering='true' filterSettings={this.FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
allowFiltering
must be set as true to enable filter menu.- Setting
columns.allowFiltering
as false will prevent filter menu rendering for a particular column.
You can customize default filter menu component of a column by custom component using filterTemplate.
The following example demonstrates the way to use filter template for a column when using filter menu. In the following example, the DropdownList component is used to filter duration column using filterTemplate.
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGrid, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public treegrid: TreeGrid | null;
public FilterOptions: FilterSettingsModel = {
type: 'Menu'
};
public templateOptions(props:any): any {
const dataSource: number[] = [1,3,4,5,6,8,9];
return (<DropDownListComponent id={props.column.field} popupHeight='250px' dataSource={dataSource} /> );
}
public render() {
this.templateOptions = this.templateOptions.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} filterSettings={this.FilterOptions} childMapping='subtasks' height='275' allowFiltering='true' ref={treegrid => this.treegrid = treegrid}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' filterTemplate={this.templateOptions} />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
}
}
You can use both Menu and Excel filter in a same TreeGrid. To do so, set the
column.filter.type
as Menu or Excel.
In the following sample menu filter is enabled by default and excel filter is enabled for the Task Name column using the
column.filter.type
.
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.FilterOptions = {
type: 'Menu'
};
this.Filter = {
type: 'Excel'
};
}
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering='true' filterSettings={this.FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' filter={this.Filter} width='180'/>
<ColumnDirective field='duration' headerText='Duration' width='90'/>
<ColumnDirective field='progress' headerText='Progress' width='90'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
You can enable Excel like filter by defining filterSettings.type
as Excel. The excel menu contains an option such as Sorting, Clear filter, Sub menu for advanced filtering..
import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public FilterOptions: FilterSettingsModel = {
type: 'Excel'
};
public render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering='true' filterSettings={this.FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180' />
<ColumnDirective field='duration' headerText='Duration' width='90'/>
<ColumnDirective field='progress' headerText='Progress' width='90'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.FilterOptions = {
type: 'Excel'
};
}
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering='true' filterSettings={this.FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='duration' headerText='Duration' width='90'/>
<ColumnDirective field='progress' headerText='Progress' width='90'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
You can change the default excel-filter operator by changing the column operator as contains
from startsWith
in the actionBegin
event
import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public FilterOptions: FilterSettingsModel = {
type: 'Excel'
};
public actionBegin(args){
if(args.requestType === 'filtersearchbegin' && args.column.type === "string")
{
args.operator = 'contains';
}
}
public render() {
this.actionBegin=this.actionBegin.bind(this)
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering='true' filterSettings={this.FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180' />
<ColumnDirective field='duration' headerText='Duration' width='90'/>
<ColumnDirective field='progress' headerText='Progress' width='90'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.FilterOptions = {
type: 'Excel'
};
}
actionBegin(args) {
if (args.requestType === 'filtersearchbegin' && args.column.type === "string") {
args.operator = 'contains';
}
}
render() {
this.actionBegin = this.actionBegin.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering='true' filterSettings={this.FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='duration' headerText='Duration' width='90'/>
<ColumnDirective field='progress' headerText='Progress' width='90'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
By default, treegrid ignores diacritic characters while filtering. To include diacritic characters, set the filterSettings.ignoreAccent
as true.
In the following sample, type aero in Name column to filter diacritic characters.
import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { diacritics } from './datasource';
export default class App extends React.Component<{}, {}>{
public FilterOptions: FilterSettingsModel = {
ignoreAccent: true
};
public render() {
return <TreeGridComponent dataSource={diacritics} treeColumnIndex={0} childMapping='Children'
height='275' allowFiltering='true' filterSettings={this.FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='EmpID' headerText='Employee ID' width='95'/>
<ColumnDirective field='Name' headerText='Name' width='180'/>
<ColumnDirective field='DOB' headerText='DOB' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='Country' headerText='Country' width='100' />
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { diacritics } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.FilterOptions = {
ignoreAccent: true
};
}
render() {
return <TreeGridComponent dataSource={diacritics} treeColumnIndex={0} childMapping='Children' height='275' allowFiltering='true' filterSettings={this.FilterOptions}>
<ColumnsDirective>
<ColumnDirective field='EmpID' headerText='Employee ID' width='95'/>
<ColumnDirective field='Name' headerText='Name' width='180'/>
<ColumnDirective field='DOB' headerText='DOB' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='Country' headerText='Country' width='100'/>
</ColumnsDirective>
<Inject services={[Filter]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));