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 |
![]() |
Tags: Grid |
<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>
|
<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);
}
}
});
}
}
|
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);
}
} |
|
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.
This page will automatically be redirected to the sign-in page in 10 seconds.