Splitting the Grid groups into pages

[satyavir]

The pager page-size template  is keeping track of the records per page , but when kendo grid page is grouped on any column,  the page-size drop-down (pager-template)  should consider the the group count  per page , not the no of records on that page and then display the result.

below is the link to the live demo application .

https://vtotbi.run.stackblitz.io

 

check the screen-shot , items per-page is 5 and it is displaying 5 records as well ,but the requirement is :

It should display 5 groups for this page .

 

[Svet]

Hi Satyavir,

Thank you for the demonstrated screenshot.

Indeed, this behavior of the grid is by design. The page size template demonstrates the number of items on the page instead of the number of groups. 

Let us know in case additional information is needed for this case. 

Regards,
Svetlin
Progress Telerik

[satyavir]

so is it something that we cant change .., easily?

[Svet]

Hi Satyavir,

Indeed, changing the default behavior would require numerous code updates related to the calculation of paging, creation of the State of the grid, processing of the grid data based on the State etc. 

Let me know in case I can provide any additional information on this case.

Regards,
Svetlin
Progress Telerik

[satyavir]

Hi. Am still facing that grouping issue.

If once we group the grid, the pagination should work as per the group, not as per items.

As you replied in previous message, can I get a example for that scenario.

kindly help me out ASAP.

[Svet]

Hi Satyavir,

What could be done is to calculate the total number of Groups. This can be achieved by processing the data with a state that contains a large number for its take property:

public ngOnInit(): void {
    this.loadProducts();
    const state: State = {skip: 0, take: 10000, group: this.groups}
    this.completeGroupedData = process(products, state);
    this.numberOfGroups = this.completeGroupedData.data.length;

}

Then we could use the pagerTemplate in order to display information about the total number of groups, groups currently present on the page and the number of items per each present group:

<ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
  <div style="display: flex; flex-direction: row">
      <kendo-pager-next-buttons></kendo-pager-next-buttons>
      <kendo-pager-numeric-buttons
        [buttonCount]="gridView.total">
      </kendo-pager-numeric-buttons>
      <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
      <kendo-pager-info></kendo-pager-info>
      <kendo-pager-page-sizes
        [pageSizes]="[5, 10, 40]">
      </kendo-pager-page-sizes>

      <div style="order: 9">
        Total Groups: {{numberOfGroups}}
        <br>
        Currently displayed Groups: {{currentNumberOfGroups()}}
        <br>
        {{itemsPerGroup()}}
      </div>
  </div>
</ng-template>

The currentNumberOfGroups() method gets the number of currently loaded groups in the Grid:

public currentNumberOfGroups(): number{
  return this.gridView.data.length;
}

The itemsPerGroup() method calculates the indexes of the currently displayed groups based on this.completeGroupedData.data array and the total number of items each group contains:

public itemsPerGroup(): string{
  let text = '';

  this.gridView.data.forEach((g, index) => {
    text += `Group ${this.completeGroupedData.data.findIndex((gr) => gr.value === g.value) + 1} contains a total of ${this.completeGroupedData.data.find((gr) => gr.value === g.value).items.length} items. `
  })

  return text;

}

However, a group that is present on the current page may display only a few of its items. Respectively, the same group will be present on the next page containing the rest of its items. This behavior is expected and is due to the Grid pagination logic taking into consideration the number of items and not Grouped items. Does this make sense?

Here is a link to the complete example:
https://stackblitz.com/edit/angular-nhqbrb-28qm8a?file=app/app.component.ts

I hope this helps. Let me know in case there is something unclear about the demonstrated custom implementation.

Regards,
Svetlin
Progress Telerik

[satyavir]

@Svetlin, Thanks for the reply, but what we need is different. Let me explain from first.

As shown in the ScreenShot1.PNG, if we group any column, the number of Group Headers should be as per Records Per Page and by default every group should be in collapse view. For example, if we have 100 groups in a grid, it should display only 15 groups per page if the Records Per Page is set to 15.

And when we expand any group, for example, Think that we expand the group which has 2 records, then current page should display 13 groups with 2 records. That means total 15 as shown in the ScreenShot2.PNG.

Please find the attached screenshots.

Please reply ASAP.

Thank You.

[satyavir]

@Svetlin, Is that possible?

[Dimiter Topalov]

Hello Satyavir,

Such behavior is possible in theory, but not via the built-in Grid paging and grouping functionalities, as the built-in Grid paging relies on displaying the specified "page size" number of items per page, regardless of whether and how the grouping is applied.

To achieve the desired behavior, the developer will need to provide his own set of UI - buttons and other required elements - in the Grid toolbar template (or pager template), and process the Grid data in their own custom manner. A possible approach is to have the whole set of data available on the client, and another set of data - the processed result will be collection the Grid will be bound to.

The developer can further handle the groupCollapse and groupExpand event handlers to recalculate the groups that need to be displayed in the Grid.

Groups can be collapsed programmatically (so that all groups are initially collapsed) via the collapseGroup() method, e.g.:

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

If you have the time, please also support the following feature request in our Feedback portal to help us estimate the customer demand for introducing a new specialized method that will expand/collapse all Grid rows without having to iterate through them:

https://feedback.telerik.com/kendo-angular-ui/1400065-collapse-expand-all-groups-in-grid

Thank you in advance.

A sample possible workflow the custom implementation to achieve the functionality, shown from the screenshots, might follow is:

1) Initially process the data to be grouped by the desired field, and take the first, lets say 15 groups

2) collapse all groups programmatically like in the example above

3) handle the groupCollapse and groupExpand events - when the user expands a group with two items, change the data collection the Grid is bound to so it now contains only 13 groups. When the user collapses back the same group, change the Grid data again.

4) When the user used the custom UI with its respective event handlers to "page"  the grouped data, process the data again - group the whole data set by the desired criteria, and take groups from 16 to 30 (for example). Then close all of them programmatically, etc.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[satyavir]

In the last answer you mentioned that A sample possible workflow the custom implementation to achieve the functionality, shown from the screenshots, might follow is...

Can you please give a example how we can achieve this possible workflow? Still we are not able to do...

[Dimiter Topalov]

Hello Satyavir,

Typically custom implementations of specific non-supported behaviors and scenarios fall out of the scope of our support service, but I prepared a runnable demo that demonstrates how to collapse all groups programmatically and "page" the Grid by the number of groups (or the number of groups plus expanded items, essentially - by the number of rendered rows):

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

The example above is not fully functional and does not address some edge cases in which it is not clear what the expected behavior is (for example the last group is expanded, or a group with many items that would span over 2 or more "pages" is expanded), but demonstrates the previously described workflow of grouping the data, and handling custom button clicks and the groupExpand/Collapse event handlers to process the data accordingly and display a total of Group and data rows corresponding to the predefined custom "page size".

I hope this helps, but if you need further assistance with the required custom implementation, I can recommend our separate dedicated offering - the Progress Professional Services:

https://www.progress.com/services/outsourcing/feature-customization

They specialize in custom-tailored solutions, feature customization, custom implementation, and more.

Let me know if you are interested in benefiting from their expertise, and I will arrange for someone from the team to contact you.

Regards,
Dimiter Topalov
Progress Telerik