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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Filter in the column by more than one data parameter

Thread ID:

Created:

Updated:

Platform:

Replies:

143860 Apr 8,2019 12:19 PM UTC Apr 11,2019 04:44 PM UTC Angular - EJ 2 5
loading
Tags: Grid
Fabiano Melo
Asked On April 8, 2019 12:19 PM UTC

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 [Syncfusion]
Replied On 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 


Fabiano Melo
Replied On 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?

Hariharan J V [Syncfusion]
Replied On 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 


Fabiano Melo
Replied On 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);
}
}
});
}

}

Hariharan J V [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon