Grid Async pipe with toolbar Menu default filter

[Diego Dorado Fernández]

Hi, sorry my english is not good;

I've been trying to set a default init filter on a grid for quite a few hours, and I haven't been able to. The filter type is Menu

It always returns the error "state.where.map is not a function"

***component ****

const action="/Locations/Locations";

this.filterSettings = {

        type: 'Menu',

        columns: [{ field: 'code', matchCase: false, operator: 'contains', predicate: 'and', value: '160' }];

      }

      for (var i = 0; i< this.filterSettings.columns.length; i++) {  

        this.predicate.push(new Predicate(

          this.filterSettings.columns[i].field, 

          this.filterSettings.columns[i].operator, 

          this.filterSettings.columns[i].value, 

          true )) 

      } 

      let where = new Query().where(Predicate.and(this.predicate)) 

      

      state = { skip: 0, take: 10, where: where.queries[0] }; 

  

     this.service.execute(environment.serverUrl + this.action, state);

***service *****

...

        if (state.where) {

            filterQuery = `&$filter=` + state.where.map((obj: PredicateModel) => {

                return (<Predicate>obj).predicates.map((predicate) => {

                    return predicate.operator === 'equal' ? `${predicate.field} eq ${predicate.value}` : `${predicate.operator}(tolower(${predicate.field}),'${predicate.value}')`;

                }).reverse().join(' and ');

            });

        }

...

What am I doing wrong?

Thank you

[Manivel Sellamuthu]

Hi Diego, 

Greetings from Syncfusion support. 

We have checked your shared by integrating the code in our sample. From that we could see that the parameters in the state are different for initial filter. So we suggest you to change the code as like the below code example. Please refer the below code example and sample for more information 

[Service] 

        if (state.where) {                           // for filtering            // for initial filtering 

          var predicates: any = state.where.length ? state.where[0].predicates : state.where.e.predicates; 

            filterQuery = `&$filter=` + predicates.map((obj, index, arr) => { 

                var query = ''; 

                if (obj.operator == 'equal') { 

                    query = "(" + obj.field + " eq " + obj.value + ")"; 

                } else { 

                    query = "(" + obj.operator + "(tolower(" + obj.field + ")," + "'" + obj.value + "'))"; 

                } 

                return (index !== arr.length - 1) ? query + " and " : query; 

            }).join(''); 

        } 

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

Please let us know, if you need further assistance. 

Regards, 

Manivel