Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 148079 | Oct 4,2019 08:37 AM UTC | Oct 7,2019 09:56 AM UTC | Angular - EJ 2 | 1 |
|
Tags: Grid |
|
<ejs-grid [dataSource]='data | async' allowPaging= 'true' [pageSettings]='pageOptions' allowSorting= 'true' allowGrouping= 'true' [groupSettings]='groupOptions' [filterSettings]='filterOptions'(dataStateChange)= 'dataStateChange($event)'(actionFailure)="actionFailure($event)">
<e-columns>
<e-column field= "OrderID" headerText="Order ID" width="130" ></e-column>
<e-column field= "CustomerID" headerText="Customer Name" width="150"></e-column>
. . . . .
</e-columns>
</ejs-grid>
|
|
public groupOptions = {columns: ['CustomerID']} // initial grouping
constructor(public service: OrdersService) {
this.data = service;
}
public dataStateChange(state: DataStateChangeEventArgs): void {
this.service.execute(state);
}
public ngOnInit(): void {
this.pageOptions = { pageSize: 10, pageCount: 4 };
let state = { skip: 0, take: 10, sorted: [{ 'name': 'CustomerID', direction: 'Ascending' }], group:['CustomerID'] }; // before grouping we need to perform sorting for columns(initial)
this.service.execute(state);
}
|
|
public execute(state: any): void {
this.getData(state).subscribe(x => super.next(x));
}
public getData(
state: DataStateChangeEventArgs
): Observable<DataStateChangeEventArgs> {
this.gridState = state;
let sortQuery: String = "";
. . . . .
if ((state.sorted || []).length) { // perform sorting
sortQuery =
`&$orderby=` +
state.sorted
.map((obj: Sorts) => {
return obj.direction === "descending"
? `${obj.name} desc`
: obj.name;
})
.reverse()
.join(",");
}
return this.http
.get(
`${this.BASE_URL}?${pageQuery}${sortQuery}${filterQuery}&$count=true`
)
.pipe(map((response: any) => response.json()))
.pipe(
map((response: any) => {
return state.dataSource === undefined
? <DataResult>{
result: this.getResult(response),
count: parseInt(response["@odata.count"], 10)
}
: response["value"];
})
)
.pipe(map((data: any) => data));
}
public getResult(response) {
// group the column based on the condition
if (this.gridState.group != undefined &&(this.gridState.action == undefined ||this.gridState.action.rows != undefined)) {
var json = response["value"];
this.gridState.group.forEach(element => {
// 'DataUtil.group' groups the input data based on the field name
json = DataUtil.group(json, element); // intila grouping
});
return json;
} else {
return response["value"];
}
}
|
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.
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.
