kendo-uikendo-gridkendo-ui-angular2

How to change Angular Kendo UI grid page index programmatically?


This question was asked 8 years ago, however the Kendo UI grid has evolved and now supports Angular. The answers for the original question dont work for the Kendo Grid Angular.

I have a kendo grid where I hide the pagination controls if there is less than one page of data.

 template: `<kendo-grid #kendoGrid [kendoGridBinding]="gridView"
                        [pageSize]="pageSize" [pageable]="showPaginator()"

where

showPaginator(): boolean {
        return  this.gridView?.length > this.pageSize;
    }

If there is just one item on the second page and I remove that item, the grid shows the second page with no items but hides the pagination controls. I would like to either select the first row of the grid, or select the first page of the grid but can't find the api calls to do that.


Solution

  • In order to select the first page of the grid you will need to use Kendo's grid state in order to change the skip like:

    html

    [pageSize]="state.take"
    [skip]="state.skip"
    

    ts

    public removeItem() {
        //remove the item
        this.state.skip = 0;
        //reload items refreshing grid
    }
    

    As you can see, I have also changed [pageSize]="state.take" instead of pageSize. You can find more info on take.