Server-side paging for Kendo grid

[James]

 Hi,

 

I am using the Kendo UI grid for Angular and am using server-side paging. My code is paging through and retreiveing the data correctly (I have a method bound to the pageChange event on the grid) but the page number/button is not being updated (even thought I'm on page two, the button still say page one). 

 

How can I get the buttons to update correctly WITHOUT using the MVC extensions (I don't want to have an dependencies on the back end for this, it should have no idea I'm using Kendo at all).

 

Thanks,

James

[Dimiter Topalov]

Hello James,

The Grid "skip" property needs to be bound to a component class field that gets updated when the pageChange event is fired, so that the Grid pager rendering is properly updated, e.g.:

https://plnkr.co/edit/gmSDe9JpkYKTGW3JcL13?p=preview (proper state is passed to the service, but local state Grid is bound to is not updated -> when we go to second page items are correctly displayed, but pager stays at page 1)

https://plnkr.co/edit/AvIWeqKkOFckSUEv3Jpa?p=preview (state is updated properly and the Pager reflects the changed page number accordingly).

Basically, assuming the Grid skip property is bound to a component field named "skip" you will need to set it to the new value, coming as event data in the pageChange event, e.g.:

public onPageChange(e) {
  this.skip = e.skip;
  // call data service
}

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

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[James]

That worked, thanks!