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

Filter in the column by more than one data parameter

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" }


5 Replies

HJ Hariharan J V Syncfusion Team April 9, 2019 09:06 AM UTC

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> 




Regards, 
Hariharan 



FM Fabiano Melo April 9, 2019 10:11 AM UTC

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?


HJ Hariharan J V Syncfusion Team April 10, 2019 10:31 AM UTC

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); 
           } 
       } 
   }); 
} 
} 





Regards, 
Hariharan 



FM Fabiano Melo April 10, 2019 02:18 PM UTC

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);
}
}
});
}

}


HJ Hariharan J V Syncfusion Team April 11, 2019 04:44 PM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon