Programatic filtering for remote data when using Grid

[Cosmin Budac]

Hi,

I have a Grid displaying three columns:

1. Expense Type (can be "entertainment", "operations", "salaries")
2. Amount ( dollar amount)
3. Date

The Grid is connected to the backend using the DataManager with UrlAdapter.

I need to be able to programatically set filters on this Grid on any combination of fields.

For this simplified case, the most complex filter would be like:

"expenseType" in ['entertainment', 'salaries'] and
"amount" more than 10,000 and amount less than 100,000 and
"date" between '01/01/2021' and '01/02/2021'

So essentially I need to be able to apply number range, date range and selected value filters.

I have tried "filterByColumn" method, but this method triggers the request right away. So for three fields to be filtered, 3 requests were generated immediately.

Is there any guidance you can offer for such a use case?

[Rajapandi Ravi]

Hi Cosmin,

Greetings from Syncfusion support

From your query we could see that you like to you like to perform the programmatic filter for the multiple columns. Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

App.component.ts

 

filter() { //button click

        this.grid.filterSettings.columns = [

        { field: 'CustomerName', matchCase: false, operator: 'startswith', predicate: 'or', value: 'Paul Henriot' },

        { field: 'CustomerName', matchCase: false, operator: 'startswith', predicate: 'or', value: 'Yang Wang' },

 

        {field: 'Freight', matchCase: false, operator: 'greaterthan', predicate: 'and', value: 10},

        {field: 'Freight', matchCase: false, operator: 'lessthan', predicate: 'and', value: 50},

 

        {field: 'OrderDate', matchCase: false, operator: 'greaterthanorequal', predicate: 'and', value: new Date('1/1/1998')},

        {field: 'OrderDate', matchCase: false, operator: 'lessthanorequal', predicate: 'and', value: new Date('7/1/1998')}]

    }

Sample: https://stackblitz.com/edit/angular-xxyn6p?file=app.component.ts,app.component.html

Regards,

Rajapandi R