Search results

Filter Template in React Grid component

28 Nov 2022 / 2 minutes to read

Filter template provides an option to use the custom filter UI for a particular column by using the columns.filterTemplate property. The custom filter UI provided by columns.filterTemplate can be used by the filter bar, menu, and advanced filter from an excel filter.

The columns.filterTemplate property value should be a React functional component.

Template context

The filter template should be a React Component. You can access the column information inside the component.

The following properties will be available at the time of template execution.

Property Name Usage
column Get the current column information.

In the below code example, we have enabled the DropDownList which is used as filter UI for CustomerID column based on the columns.allowFiltering property.

Copied to clipboard
export default class App extends React.Component<{}, {}>{
  public grid: Grid | null;
  public dropdata: string[] = DataUtil.distinct(data, 'CustomerID') as string[];
  public filterTemplate(props:any): any {
      this.dropdata.push('Clear');
      /** The enabled attributes will be added based on the column property. */
      return (<DropDownListComponent enabled={props.column.allowFiltering} id={props.column.field}popupHeight='250px'
      dataSource={this.dropdata} change={this.onChange} /> );
  }
  public onChange(args: any): any{
    if (this.grid) {
      if (args.value === 'Clear') {
        this.grid.clearFiltering();
      } else {
        this.grid.filterByColumn('CustomerID', 'equal', args.value);
      }
    }
  }
  public render() {
      this.filterTemplate = this.filterTemplate.bind(this);
      this.onChange = this.onChange.bind(this);
      return <GridComponent ref={g => this.grid = g} dataSource={data} allowFiltering={true} >
          <ColumnsDirective>
              <ColumnDirective field='OrderID' headerText='Order ID' width='140' textAlign="Right"/>
              <ColumnDirective field='EmployeeID' headerText='EmployeeID' width='140' textAlign="Right"/>
              <ColumnDirective field='CustomerID' allowFiltering={false} filterTemplate={this.filterTemplate} width='140'/>
              <ColumnDirective field='ShipName' width='170' textAlign="Right"/>
          </ColumnsDirective>
          <Inject services={[Filter]} />
      </GridComponent>
  }
};