How to set default column search type?

[Sang Le]

I'm using the react Grid component to show data from an OData endpoint. I turn on filtering so that the column headers gain a input field that the user can type into.

However, by default, the column filter uses a startsWith​ filter. Is there a way to tell the grid "always use 'contains' for all column filters​"?

[Rajapandiyan Settu]

Hi Sang,

Thanks for contacting Syncfusion support.

Query: Is there a way to tell the grid "always use 'contains' for all column filters​"?

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

You have the option to change the default filter operator for a 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;

  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

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

Regards, 

Rajapandiyan S