Issue with grouping paged data from a remote service

[Murray]

 

My grid data is bound to an observable as follows:

 protected initDomainEntityQuery() {
     this.gridSettings.state.skip = 1;
    this.gridData$ = this.stateChange$.pipe(
      takeUntil(this.unsubscribe),     
      switchMap(() =>
        this.dataService.getData(this.buildDomainEntityPayload())
      ),
      map((data) => {
        if(this.groupable && data.data.length > 0) {        
          return process(data.data, { group: this.groups });
        }
        else
          return data;
      })      
}  }

 

The problem is that the data set returned could potentially span many pages, but after the aggregation, the DataResult total is 1 page long.  Is there any way of working round this? 

The use case is to present the data grouped by a type field. 

Thanks.

 

 

[Svet]

Hi Murray,

I am not sure that I understand the issue.

In general the Grid data can be grouped as demonstrated in the following article:

https://www.telerik.com/kendo-angular-ui/components/grid/grouping/

It can also be grouped and paged together. For that to work out as expected it would be required to pass a second parameter of type State to the process() function that has information for the current group and the paging related skip and take properties:

https://stackblitz.com/edit/angular-gv91cl?file=app/app.component.ts

The essential parts are highlighted below:

    public groups: GroupDescriptor[] = [{ field: 'Category.CategoryName' }];

    public state: State = {skip: 0, take: 10, group: this.groups};  
...
 private loadProducts(): void {
        this.gridView = process(products, this.state);
    }

I hope that helps. Please provide some more details describing the undesired behavior in case further assistance is required for this case. Thank you.

 

Regards,
Svetlin
Progress Telerik