Kendo UI grid Angular cant go to first page

[Aren]

I have a grid:

<kendo-grid #grid="kendoGrid" [data]="userView | async" [pageSize]="20" [sort]="state.sort" [filter]="state.filter" [pageable]="true" [sortable]="{ allowUnsort: true, mode: 'multiple' }" [filterable]="true" [resizable]="true" (dataStateChange)="dataStateChange($event)"> </kendo-grid>

userView function returns 21 records,the first page shows 20 records its all good but the issue is when I go to the second page of the grid, it shows one record but the page number below shows 1 and I can't go back the page 1 in the grid which I had the 20 records, here are my functions:

public state: State = { skip: 0, take: 500 } public userView: Observable<GridDataResult>; constructor( private userListService: UserListService){ this.userView = userListService; userListService.query(this.state, this.querySharedUsers); } public dataStateChange(state: DataStateChangeEvent): void { this.state = state; this.userListService.query(state, this.querySharedUsers); }

I tried to change the state.take to 20 but the function returned 20 records which it should return 21 and the grid had only one page, is anyone familiar with this kind of configuring kendo ui paging?

[Svet]

Hi Aren,

Thank you for the provided sample code and details.

I will provide some general information on the paging functionality of the Grid. The purpose of using paging is the Grid to load just a portion of the completed data set. Thus, the data passed to the Grid should be of type GridDataResult which holds total and data properties. The data property holds the data for the current page and the total property holds the total number of items, based on which the pager shows the proper number of available pages.

In order for the Grid to be configured properly for paging the [pageable], [pageSize], and [skip] input properties of the Grid should be set as documented in the following article:

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

The skip will determine how may records should be skipped based on the current page number.

The take property of the State should be equal to the value passed to the [pageSize] input property of the Grid. This will ensure that the currently loaded data is the same as the data displayed on the current page. 

I have also prepared an example demonstrating a Grid which is configured to display a total of 21 records and 20 records per page. Please check it at the following link:

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

Please let me know in case there is something unclear about the demonstrated example or any further assistance is required for this case. Thank you in advance.

Svetlin
Progress Telerik