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.
|
<ejs-grid [dataSource]='data | async' allowPaging= 'true' [pageSettings]='pageOptions' allowGrouping= 'true' [groupSettings]='groupOptions' (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>
|
|
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 };
this.groupOptions = { showDropArea: false, columns: ["ShipCity"]}; //Initial Grouping
let state = { skip: 0, take: 10, group:['ShipCity'] };
this.service.execute(state);
}
|
|
export class OrdersService extends Subject<DataStateChangeEventArgs> {
public gridState;
private BASE_URL =
constructor(private http: Http) {
super();
}
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 = "";
const skipquery = state.skip ? `$skip=${state.skip}` : null;
let pageQuery = "";
const takeQuery = state.take ? `$top=${state.take}` : null;
if (skipquery) {
pageQuery = `${skipquery}&`;
}
if (takeQuery) {
pageQuery = `${pageQuery}${takeQuery}`;
}
let filterQuery: String = "";
if ((state.sorted || []).length) {
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); //initial Grouping
});
return json;
} else {
return response["value"];
}
}
}
|
