Excel like filter in React Treegrid component

27 Jan 20237 minutes to read

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..

app.jsx

import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const FilterOptions = {
        type: 'Excel'
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering={true} filterSettings={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>;
}
;
export default App;

app.tsx

import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const FilterOptions: FilterSettingsModel = {
        type: 'Excel'
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering={true} filterSettings={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>
};
export default App;

Change default filter operator

You can change the default excel-filter operator by changing the column operator as contains from startsWith in the actionBegin event

app.jsx

import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const FilterOptions = {
        type: 'Excel'
    };
    const actionBegin = (args) => {
        if (args.requestType === 'filtersearchbegin' && args.column.type === "string") {
            args.operator = 'contains';
        }
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering={true} filterSettings={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>;
}
;
export default App;

app.tsx

import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const FilterOptions: FilterSettingsModel = {
        type: 'Excel'
    };
    const actionBegin = (args:any) => {
      if(args.requestType === 'filtersearchbegin' && args.column.type === "string")
      {
        args.operator = 'contains';
      }
    }
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering={true} filterSettings={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>
};
export default App;