How can the default selected filter in the filter menu be changed to "contains" instead of "startsWith"?

[Justin Schnurer]

I use the React GridComponent to render some data. I have the filter menu turned on in the column headers so the users can filter the data. What I would like to do is change the default-selected filter operation from "Starts With" to "Contains".

Here is an example of what is selected by default when the little filter button is clicked in the grid's header.

I am turning on these filters with the following filterSettings passed to the GridComponent:

{

  mode: "Immediate",

  immediateModeDelay: 1000,

  type: 'Menu',

}

I found another forum post about this and it said to use the grid's databound event to set the filter properties. I have implemented it in my Typescript React​ app as follows:

dataBound={() => {

  if (localGridRef.current) {

    Object.assign(localGridRef.current.filterModule.filterOperators,

      { startsWith: "contains" });

    }

}}

In this example, localGridRef​ is a ref of the GridComponent.

This code appears to do nothing. Nothing changes, the default selection doesn't change. Nothing.

​How can I change the default-selected filter operation from "Starts With" to "Contains" in the filter menu?

[Rajapandi Ravi]

Hi Justin,

Greetings from Syncfusion support

In FilterBar and Menu filter feature, the startswith operator is used for string type column and equal operator is used for number, date, Boolean type columns to filter a value in Grid column.

You have the option to change the default filter operator for particular column by using filter.operator property of Column Model. Refer to the below code example and sample for more information.

 

export class RemoteDataBinding extends SampleBase {

  data = new DataManager({

    adaptor: new ODataAdaptor(),

    url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/',

  });

  gridInstance;

FilterType = {

    type: 'Menu'

};

  filterOptions = { operator: 'contains' }; // set the filter operator for the column

  render() {

    return (

      <GridComponent

        id="Grid"

        dataSource={this.data}

        ref={(grid) => (this.gridInstance = grid)}

        allowFiltering={true}

      >

        <ColumnsDirective>

          <ColumnDirective

            field="CustomerID"

            headerText="Customer ID"

            filter={this.filterOptions}

            width="160"

          ></ColumnDirective>

        </ColumnsDirective>

        <Inject services={[Page, Filter]} />

      </GridComponent>

    );

  }

}

 

Sample: https://stackblitz.com/edit/react-u3u1bm-nplctl?file=index.js

Please get back to us if you need further assistance with this.

Regards,

Rajapandi R

[Kirthika Kumar]

What to do if i want the same but for type:'Excel'?

[Vikram Sundararajan]

Hi Kirthika Kumar,

Based on your query, you want to change the default selected operator in the Excel filter. We would like to inform you that the Excel filter does not have a default selected operator. Initially, none of the operators will be selected. Please refer to the screenshot below:

 

Filtering the records using any operator from the custom filter the selected operator will be applied when you open the Filters dialog again.

 

We have filtered the records using the "Contains" operator in the custom filter. When you open the filter dialog again, it will show the "Contains" operator as selected. If you clear the filter, the selected operator will reset. This is the default behavior of the Excel filter dialog.

Please get back us if you need further assistance.

Regards,

Vikram S