How to filter on multiple columns programmatically

[Daren Henry]

We are implementing save search functionality so the user can filter on multiple columns and then save the search. Now when the user selects that search we should be able to search on all the columns that were saved in the search in one go. We are able to bind values to all controls using ngmodel but how to filter on all in one go something like we do in filterSettings ​but that works on initial rendering only. Right now we are using filterbycolumn method to filter on single-column.

[Dineshnarasimman Muthu]

Hi Daren Henry,

Greetings from Syncfusion support,

Based on your query wants to filter on multiple columns programmatically. Please refer the below code snippet, sample and screen shot for more information,

  [app.component.html]

 

 <div>

        <div>

          <label>Order ID:</label>

          <input [(ngModel)]="column1Filter" />

        </div>

        <div>

          <label>Customer Name:</label>

          <input [(ngModel)]="column2Filter" />

        </div>

        <div>

            <label>Shipped Date:</label>

            <input [(ngModel)]="column3Filter" />

          </div>

          <div>

            <label>Ship Country:</label>

            <input [(ngModel)]="column4Filter" />

          </div>

        <button (click)="saveSearch()">Save Search</button>

        <button (click)="clearFilter()">Clear Filter</button>

  </div>

 

[app.component.ts]

 

saveSearch(): void {

    const filterConditions = [];

    if (this.column1Filter) {

      filterConditions.push({ field: 'OrderID', operator: 'contains', value: this.column1Filter });

    }

    if (this.column2Filter) {

      filterConditions.push({ field: 'CustomerName', operator: 'contains', value: this.column2Filter });

    }

    if (this.column3Filter) {

      filterConditions.push({ field: 'ShippedDate', operator: 'contains', value: this.column3Filter });

    }

    if (this.column4Filter) {

      filterConditions.push({ field: 'ShipCountry', operator: 'contains', value: this.column4Filter });

    }

    const gridFilters = this.grid.filterSettings.columns;

    const combinedFilters = [...filterConditions, ...gridFilters];

    this.grid.filterSettings.columns = combinedFilters;

    this.grid.refresh();

      

    }

    clearFilter(): void {

        this.grid.clearFiltering();

        this.column1Filter='';

        this.column2Filter = '';

        this.column3Filter='';

        this.column4Filter = '';

    }

 

 

Screenshot:

 

 

The saveSearch function combines filters from both the input fields and the grid filter bar by creating an array of filter conditions (filterConditions) based on the input fields and adding the grid filter bar filters to it. Then, it applies the combined filters to the grid using this.grid.filterSettings.columns and refreshes the grid to reflect the filtered data. This way, when you click the saveSearch button, it will filter the grid based on both the input fields and the grid filter bar.

Please refer the sample for more information,

Sample: https://stackblitz.com/edit/angular-e3bkqt-pzreyt?file=src%2Fapp.component.ts

If we misunderstood anything wrongly, please share the below details that would be helpful for us to provide better solution.

1. Share your exact requirement scenario step by step with detailed description.
2. We kindly request a video demonstration showcasing the issue you are currently encountering.
3. If possible, kindly provide a replicable sample of the problem. This will greatly assist us in gaining a deeper understanding problem and enabling us to validate the issue further.

Regards,

Dineshnarasimman

[Daren Henry]

While implementing filter on multiple columns using above example, facing issue like I have a value in Date range filter but somehow in search request it's going with null predicates  and I am getting all the records can you please help me here.

In the first image you can find out "duedaterange" predicates values are null, as we have already passed that during the search call and you can find that in second image

[Vikram Sundararajan]

Hi Daren Henry,

Based on your query, you are facing an issue with the date range filter. We have created a sample based on your query and implemented the Syncfusion DateRangePicker component in one field. When filtering using this input field, it is working fine. Please refer to the below code snippet, sample, and screenshot:

[app.component.html]

 

  <div>

        <div>

          <label>Order ID:</label>

          <input [(ngModel)]="column1Filter" />

        </div>

        <div>

          <label>Customer Name:</label>

          <input [(ngModel)]="column2Filter" />

        </div>

        <div >

            <label>Shipped Date:</label>

            <ejs-daterangepicker [(ngModel)]="column3Filter" #daterangepicker></ejs-daterangepicker>      

          </div>

          <div>

            <label>Ship Country:</label>

            <input [(ngModel)]="column4Filter" />

          </div>

        <!-- Add more input fields for other search criteria as needed -->

        <button (click)="saveSearch()">Save Search</button>

        <button (click)="clearFilter()">Clear Filter</button>

      </div>

 

[app.component.ts]

 

saveSearch(): void {

    const filterConditions = [];

    if (this.column1Filter) {

      filterConditions.push({field: 'OrderID',operator: 'contains',value: this.column1Filter,});

    }

    if (this.column2Filter) {filterConditions.push({field: 'CustomerName',operator: 'contains',value: this.column2Filter,

      });}

    if (this.column3Filter)

    {filterConditions.push({field: 'ShippedDate',operator: 'greaterthan',value: this.column3Filter[0],predicate: 'and'});

    filterConditions.push({field: 'ShippedDate',operator: 'lessthan',value: this.column3Filter[1],predicate: 'and',});

    }

    if (this.column4Filter) {filterConditions.push({field: 'ShipCountry',operator: 'contains',value: this.column4Filter,});

    }

    const gridFilters = this.grid.filterSettings.columns;

    const combinedFilters = [...filterConditions, ...gridFilters];

    this.grid.filterSettings.columns = combinedFilters;

    this.grid.refresh();

  }

 

Screenshot:
 

 

Sample: https://stackblitz.com/edit/angular-e3bkqt-cxkdt5?file=src%2Fapp.component.ts

We recommend using the provided sample as a reference to resolve the issue you mentioned. If you are still experiencing the issue, please share the below details that would be helpful for us to provide better solution.

1. Sharing a video demonstration would greatly assist us in better understanding your query. It would allow us to visualize the problem and provide more precise guidance or suggestions.
2. Please share a reproducible runnable sample that demonstrates the problem or reproduce the issue in the provided sample.

Regards,

Vikram S