Getting error while using the custom filter template

[Unknown]

Hi Team,

I am using the below code to implement the custom filter template but getting the errors.

export default class App extends React.Component<{}, {}>{

  public grid: Grid | null;

  public fields: object = { text: 'CustomerID', value: 'CustomerID' };

  public filterOptions: FilterSettingsModel = {

 type: 'Excel'

  };

  public dropdata: string[] = DataUtil.distinct(data, 'CustomerID') as string[];

  public filterTemplate(props:any): any {

  const val = isNullOrUndefined(props.CustomerID) ? '' : props.CustomerID;

  return (<DropDownListComponent id='CustomerID'

  fields={this.fields} dataSource={this.dropdata} /> );

  }

  public render() {

  this.filterTemplate = this.filterTemplate.bind(this);

  return <GridComponent ref={g => this.grid = g} dataSource={data} filterSettings={this.filterOptions} 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' filterTemplate={this.filterTemplate} width='140'/>

          <ColumnDirective field='ShipName' width='170' textAlign="Right"/>

      </ColumnsDirective>

      <Inject services={[Filter]} />

  </GridComponent>

  }

};

[Rajapandiyan Settu]

Hi Sachin, 

 

Greetings from Syncfusion support. 

 

Query: "str.match is not a function". 

 

By analyzing the error details, we suspect that there are some duplicate packages (node_modules placed inside the @syncfusion folder) might installed in your node_modules. 

 

So, we kindly suggested you to uninstall the Syncfusion packages (or node modules) and update all the packages to its current version. 

 

Could you please follow the steps provided in the following documentation or use the below steps to update the packages. 

 

1. Delete the package.lock.json file from your application.
2. Remove the @syncfusion folder from your project.
3. Use the current version (or use *)for all the Syncfusion components in the package.json file.
4. Then execute npm install command.

 

UG: https://ej2.syncfusion.com/react/documentation/common/how-to/update-npm-package/ 

 

Also, use npm dedupe to remove the duplicate packages. 

 

Find the below sample for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/React_grid1643826658.zip 

 

Regards, 

Rajapandiyan S