We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Programatic filtering for remote data when using Grid

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?


1 Reply

RR Rajapandi Ravi Syncfusion Team October 5, 2022 09:26 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon