currentPage variable in page template not updated

[Ján]

Hello, we have a Knedo UI for Angular 2 grid with custom kendoPagerTemplate iin grid footer. the grid data is bound to Observable<GridDataResult>. in additon the grid supports deletion throught grid command. then item is deleted we reload the observable. Interesting part of pager template:

<ng-template kendoPagerTemplate let-totalpages="totalPages" let-currentpage="currentPage" let-pagesize="pageSize" let-total="total">

current page is {{}}

.</ng-template>

 

The issue is that when the totaliItem returned by observable results in change in currentpage variable in footer,, it get set to undefined.

Example;

we have a grid with 10 items per page, and initially observable returned 11 items (GridDataResult.total = 11).so grid footer pagervariables are:

pagesize=10
total=11
totalpages = 2
currentpage=1

we switch to second page, the footer variables are still correct, the only change is:that currentpage is 2 now. All fine.

Now we delete the single item on this second page, and reload the observable. the grid data is correctly  The pager variables become:

pagesize=10
total=10 (updated correctly)
totalpages = 1 (updated correctly)
currentpage=2 (not updated, there are not 2 page anymore)

one would expect currentpage to drop to 1

Currently there is no way of fixing this on our side as those variable are in kendo grid control

 

[Dimiter Topalov]

Hi Ján,

The described behavior indeed seems counter-intuitive, but is in a way correct, based on the data and state the Grid operates with - when the state.skip value is equal to the "total", all items are skipped, and the next (empty) page is displayed.

Such edge cases can be handled by some custom logic, manipulating the "state.skip" value in accordance with the expected behavior - for example setting the "skip" value such that the last full page of data is displayed, e.g.:

public ngOnInit(): void {
        this.view = this.editService.map(data => {
          const result = process(data, this.gridState);

          if (result.total !== 0 && result.total === this.gridState.skip) {
            this.gridState.skip -= this.gridState.take;
            this.editService.reset();
            this.editService.read();
          }

          return result;
        });

        this.editService.read();
    }

http://plnkr.co/edit/nDy54fMfghL1jpVYNjZ8?p=preview

The only way we can modify the existing behavior on our end is by implementing similar logic in the KendoGridBindingDirective for Automatic data binding, but in all scenarios, in which the developer is responsible for handling data binding and operations, the discussed page-changing logic will need to be included in his/her custom implementation.

Thank you for the understanding.

Regards,
Dimiter Topalov
Progress Telerik

[Ján]

Hi,

in our case we dont use KendoGridBinding directive, our grid implementation is similar to following plunkr

http://plnkr.co/edit/njBT106Y8xBIWoCmMyvC?p=preview (this is slightly modified reference example from you documentation).

Anyway in provided plunker you can see how kendo pager gets in weird state if you switch to second page and then delete the item there. The footer than states that you are on page 2 of 1, no page-changing button is highlighted (because page 2 does not exist, yet you are on it) and also info section states that you show items 8 to 7 of 7 - very weird. I guess the expected behavior would be to get to closest available page in such cases (page 1 here).

This is not only for deletion triggered directly from grid, data is coming from server so somebody else might change the data set, under you feet. Than changing of the page will trigger the fresh data load, where you should not assume that incoming data has the same count as it had previously - so I believe grid should gracefully get you to the closest available page. Currently you stay on the page that does not exist.

[Dimiter Topalov]

Hi Ján,

The current Grid implementation relies on the State properties it is bound to to be set accordingly and its behavior will directly reflect the skip and take parameters (for paging).

The skip field can be manipulated in accordance with the desired behavior when its value exceeds the total number of data items, returned from the data service (as demonstrated in the Plunker, provided in the previous response):

http://plnkr.co/edit/cpcHXQH8MtSHRrLjaEQ3?p=preview

https://www.screencast.com/t/nXYvV0DGjam

The only way for the Grid (and not the developer) to control the "skip" value when data is manipulated, is in the internal implementation of the KendoGridBindingDirective (and we will consider enhancements in this direction).

However, when the data operations are controlled by the developer, he will have to provide a custom implementation in accordance with his/her preference and requirements to handle the discussed scenario.

Thank you for the understanding.

Regards,
Dimiter Topalov
Progress Telerik