0

I am trying to follow the below Question for Solution

How to change Kendo UI grid page index programmatically?

In the above example the solution is given in JQuery. But I need it in Angular 6 Component or HTML Page

I am trying to implement Server Side Pagination and I am getting fresh 20 records everytime when I call the Web Api method. Here everytime, the skip is resetting to 20 only. It is not incrementing. So, I could not proceed further. Below is the sample code, I am implementing.

public dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    this.service.startIndex = state.skip;
    this.service.endIndex = state.skip + this.messagesPerPage;
    this.loadItems();
}

public pageChange(event: PageChangeEvent): void {
    this.state.skip = event.skip;
    this.state.take = event.take;
    this.loadItems();
}

How to access Kendo Grid Page related properties and try to set proper page because, everytime when I click 2nd Page Or Next Page, the state.skip value is coming as 20 only.

EDIT

Below is the Query I am using to fetch the paginated results from the Database

string SqlUsers = " WITH SELECTION AS ( " +
    " SELECT ROW_NUMBER() OVER(ORDER BY A.USERNAME) RN, A.USERID, A.USERNAME " +
    " FROM USER A WHERE A.ROLEID = :roleId) " +
    " SELECT " + pageNumber + " PAGE_NUMBER, CEIL((SELECT COUNT(*) FROM SELECTION ) / " + pageSize + ") TOTAL_PAGES, " + pageSize +
    " PAGE_SIZE, (SELECT COUNT(*) FROM SELECTION ) TOTAL_ROWS,  " +
    " SELECTION.* FROM SELECTION " +
    " WHERE RN BETWEEN((" + pageSize + "*" + pageNumber + ")- " + pageSize + " + 1) AND (" + pageSize + "*" + pageNumber + ")";

Any help would be greatly appreciated.

CPK_2011
  • 872
  • 3
  • 21
  • 57

1 Answers1

0
<kendo-grid
    [pageSize]="pageSize"
    [skip]="skip"
    [pageable]="true"
    (pageChange)="onPageChange($event)"
    >
</kendo-grid>

public onPageChange(state: any): void {
    this.pageSize = state.take;
    this.skip = state.skip;
}
hossein vatankhah
  • 204
  • 1
  • 9