How to change Angular Kendo UI grid page index programmatically?

Question

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.

Answer 1

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.