在带有Angular 4的Telerik Kendo Grid中使用OData时的分组和分页

Question

我想使用OData创建Kendo Grid。数据通过OData框架在服务器端分组。网格必须进行分组和分页。不幸的是，如果我可以输入分页，则无法进行分组。另一方面，如果分组有效，则分页无效。这是下面的我的OData抽象服务：

export abstract class OdataService extends BehaviorSubject<GridDataResult> {

    public loading = new BehaviorSubject<boolean>(true);

    private BASE_URL = 'odata/';

    constructor(private http: AuthHttp, protected tableName: string) {
        super(null);
    }

    public query(state: any): void {
        this.fetch(state)
            .subscribe(x => super.next(x));
    }

    public fetch(state: any): Observable<GridDataResult> {        
        this.loading.next(true);
        let queryStr = `${toODataString(state)}&$count=true&type=${state.type}`;

        if (state.expand && Array.isArray(state.expand) ){
            const properties = state.expand.join(',');
            queryStr += `&$expand=${properties}`;
        }

        return this.http.get(`${this.BASE_URL}${this.tableName}?${queryStr}`)
            .map(response => response.json())
            .map(response => (<GridDataResult>{
                data: response['value'],
                total: parseInt(response['@odata.count'], 10)
            }))
            .finally(() => this.loading.next(false));
    }
}

服务：

@Injectable()
export class EmployeeOdataService extends OdataService {
    constructor(http: AuthHttp) {
        super(http, 'EmployeeOData');
    }

    queryAll(st?: any): void {
        const state = Object.assign({}, st);
        state.type = "";

        this.query(state);
    }
}

这是我下面的html文件：

    <kendo-grid
          [data]="gridData"
          [pageSize]="state.take"
          [filter]="state.filter"
          [selectable]="true"
          [skip]="state.skip"
          [sort]="state.sort"
          [sortable]="true"
          [resizable]="true"
          [reorderable]="true"
          [pageable]="true"
          [scrollable]="'none'"
          (dataStateChange)="dataStateChange($event)"
          [filterable]="filter"
          [columnMenu]="true"
>
      <kendo-grid-column field="EmployeeName" title="Total" [minResizableWidth]="110" filter="numeric"></kendo-grid-column>
      <kendo-grid-column field="Salary" title="Salary" [minResizableWidth]="110" filter="numeric"></kendo-grid-column>
      <kendo-grid-column field="CurrencyCode" title="Currency" [minResizableWidth]="110" width="110"></kendo-grid-column>
    </kendo-grid>

这是类组件：

export class EmployeesComponent {

    data: EmployeeODataModel[] = [];

    view: Observable<GridDataResult>;
    state: StateModel = {
        skip: 0,
        take: 25,
        sort: [{ field: "Id", dir: 'desc' }],
        group: [{ field: 'CurrencyCode' }]
    };

    public gridData: any;

    constructor(public service: EmployeeOdataService) {
        this.view = service;
        this.service.queryAll(this.state);

        this.view.subscribe(result => {
                this.data = result.data;
            });

 this.gridData = process(this.data, this.state);
        }
    }

现在，我已经在网格中收集了数据，但是在一页上只有25条记录，如下所示。我想在一页上查看25条记录，并在页脚中查看所有页数。我该如何解决？