Filter in the column by more than one data parameter

[Fabiano Melo]

Hello

I wonder if it's possible to filter the column by more than one data parameter. I own the client, and the client has the name, address and city. Using the template, how is it possible with the same filter to fetch the different data?

<ejs-grid [dataSource]='dataSource' [allowPaging]='true' [allowSorting]='true' [allowFiltering]='true'
      [allowExcelExport]='true' [allowPdfExport]='true' [allowTextWrap]='true' [filterSettings]="filterSettings"
      [contextMenuItems]="contextMenuItems" [pageSettings]='pageSettings' (contextMenuClick)='contextMenuClick($event)'
      (created)='created()' #grid>
     
    <e-columns>
        <e-column field='ID' [filter]='filter' [visible]='false' headerText='ID' [isPrimaryKey]='true'></e-column>

        <e-column field='Client' [filter]='filter' headerText='Client' width='12%'>
          <ng-template #template let-data>
            <p>Client: {{ data.Client.Name}}</p>
            <p>Address: {{ data.Client.Address }}</p>
            <p>City: {{ data.Client.City }}</p>
          </ng-template>
        </e-column>
       
        <e-column headerText='Ações' [commands]='commands' width='15%'></e-column>       
    </e-columns>
</ejs-grid>

Observation: filterSettings: Object = { type: "Menu" }

[Hariharan J V]

Hi Fabiano, 

Thanks for contacting syncfusion support. 

We have validated the provided code example and you can use the below way to perform filtering for complex data(now you can able to filter CustomerID) in Grid. Please find the below code example and sample for more information. 

<ejs-grid 

<e-column field='Client.CustomerID' headerText='Customer Details' width='150'> 

    <ng-template #template let-data> 

         <p>Client: {{ data.Client.CustomerID}}</p> 

         <p>Address: {{ data.Client.ShipCountry }}</p> 

    </ng-template> 

</e-column> 

</ejs-grid> 

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

Help documentation : https://ej2.syncfusion.com/angular/documentation/grid/columns/#complex-data-binding 

Regards, 

Hariharan 

[Fabiano Melo]

Hello Hariharan

I do not think I made my point clear. Using your example. My question, can you filter both by {{data.Client.CustomerID}} and {{data.Client.ShipCountry}} in the same column? How would I make it work?

[Hariharan J V]

Hi Fabiano, 

Thanks for your update. 

We have analyzed your query and modified the sample based on requirement. In the below sample, we have used custom adaptor(override default adaptor) to filter different data and used textbox components in filter menu. You can also customize as per your requirement. 

Please refer the below code example and updated sample for more information. 

<e-column [filter]= 'filter' field='Client.CustomerID' headerText='Client Details' width='150'> 

    <ng-template #template let-data> 

       <p>Name: {{ data.Client.CustomerID}}</p> 

       <p>Country: {{ data.Client.ShipCountry }}</p> 

    </ng-template> 

</e-column> 

ngOnInit(): void { 

    this.filter = { 

       ui: { 

           create: (args: { target: Element, column: Object }) => { 

               let db: Object = new DataManager(data); 

               let flValInput: HTMLElement = createElement('input', { className: 'flm-input' }); 

               args.target.appendChild(flValInput); 

               this.dropInstance = new TextBox({ 

                   placeholder: 'Client', 

                   floatLabelType: 'Auto' 

               }); 

           this.dropInstance.appendTo(flValInput); 

         }, 

           write: (args: { 

               column: Object, target: Element, parent: any, 

               filteredValue: string}) => { 

                   if(args.filteredValue){ 

                   this.dropInstance.value = args.filteredValue; 

           } 

        }, 

           read: (args: { target: Element, column: any, operator: string, fltrObj: Filter }) => { 

               args.fltrObj.filterByColumn(args.column.field, args.operator, this.dropInstance.value); 

 

       } 

    } 

} 

   this.data = new DataManager({ 

       json: data, 

       adaptor: new customAdaptor 

   });  

   this.pageSettings = { pageCount: 5 }; 

   this.filterSettings = { type: 'Menu' }; 

} 

} 

 

class customAdaptor extends JsonAdaptor { 

onWhere(datamanger, e) { 

   if (!datamanger || !datamanger.length) { 

       return datamanger; 

   } 

   return datamanger.filter(function (obj) { 

       if (e) { 

           let field = e.isComplex ? e.predicates[0].field : e.field; 

           if (field === 'Client.CustomerID') { 

               // create another predicate to filter shpiCountry. 

               let dummy = new Predicate('Client.ShipCountry', e.predicates[0].operator , e.predicates ? e.predicates[0].value : e.value); 

               let final = e.validate(obj)|| dummy.validate(obj); 

               return final; 

           } else { 

               return e.validate(obj); 

           } 

       } 

   }); 

} 

} 

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

Help documentation : https://ej2.syncfusion.com/angular/documentation/grid/filtering/?no-cache=1#custom-component-in-filter-menu 

https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#custom-adaptor 

Regards, 

Hariharan 

[Fabiano Melo]

Hello

I have a service consuming an api. So my data is Server-Side. This example is with local data. How would I make it work?

API consumption is being done through this method in the service.

Stretch Service

oDataList(): any {

return new DataManager({

url: `${TSW_API}/api/Security/User/ODataList`,

headers: [{ 'Authorization': `Bearer ${this.token}` }],

adaptor: new WebApiAdaptor,

});

}

I followed the example above, but the following error appears.(ERROR TypeError: dataManager.dataSource.json.slice is not a function).

Stretch Component - ngOnInit()

ngOnInit() {

// Carrega a fonte de dados do grid syncfusion

this.dataSource = this.usersService.oDataList();

// Conversão do objeto DataManager

this.data = new DataManager({

json: this.dataSource,

adaptor: new CustomAdaptor

});

// Filtro customizado

this.filterCustom = {

ui: {

create: (args: { target: Element, column: Object }) => {

//let db: Object = new DataManager(this.dataSource);

let flValInput: HTMLElement = createElement('input', { className: 'flm-input' });

args.target.appendChild(flValInput);

this.dropInstance = new TextBox({

placeholder: 'Usuário',

floatLabelType: 'Auto'

});

this.dropInstance.appendTo(flValInput);

},

write: (args: {

column: Object, target: Element, parent: any,

filteredValue: string

}) => {

if (args.filteredValue) {

this.dropInstance.value = args.filteredValue;

}

},

read: (args: { target: Element, column: any, operator: string, fltrObj: Filter }) => {

args.fltrObj.filterByColumn(args.column.field, args.operator, this.dropInstance.value);

}

}

};

}

CustomAdaptor

class CustomAdaptor extends JsonAdaptor {

onWhere(datamanger, e) {

if (!datamanger || !datamanger.length) {

return datamanger;

}

return datamanger.filter(function (obj) {

if (e) {

let field = e.isComplex ? e.predicates[0].field : e.field;

if (field === 'Client.FunctionaryCpfCnpj') {

let dummy = new Predicate('Client.FunctionaryName', e.predicates[0].operator, e.predicates ? e.predicates[0].value : e.value);

let final = e.validate(obj) || dummy.validate(obj);

return final;

} else {

return e.validate(obj);

}

}

});

}

}

[Hariharan J V]

Hi Fabiano, 

Thanks for your update. 

In our previous update we have provided solution for local data(Override jsonAdaptor). We suggest you to override the default webApiAdaptor in your application to achieve your requirement. Please refer the below code example for more information. 

    ngOnInit(): void { 

        this.filterSettings = { type: "Menu" }; 

        this.data = new DataManager({ 

            url: 'api/Orders', 

            adaptor: new customAdaptor 

        }); 

 

 

class customAdaptor extends WebApiAdaptor { 

    public onComplexPredicate(predicate: Predicate, query: Query, requiresCast?: boolean): string { 

        let res: string[] = []; 

        let dummy = new Predicate('Client.ShipCountry', predicate.predicates[0].operator, predicate.predicates[0].value, predicate.predicates[0].ignoreCase); 

        // Generate new predicate for shipCountry and push it to default predicate to filter both 

        predicate.predicates.push(dummy); 

        predicate.condition = "or"; // need to change the condition as “or” 

        return super.onComplexPredicate(predicate, query, requiresCast); 

    } 

} 

 

 

Note: While using the above solution it send the filter query as above(screenshot) based on the query you need to handle it in server side. 

Regards, 

Hariharan