How to change Angular Kendo UI grid page index programmatically?

Solution for How to change Angular Kendo UI grid page index programmatically?
is Given Below:

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.

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.

Although the first answer is correct, I wanted to post the full solution for hiding the pagination toolbar when it is not required, as well as moving back a page if the last row on the page is deleted.

Template

     template: `<kendo-grid 
                    [kendoGridBinding]="gridView" 
                    [pageSize]="pageSize" [pageable]="showPaginator()" 
                    [skip]="skip"
                    (pageChange)="pageChange($event)">`

Component


    skip = 0;  // how many rows to skip
    pageSize: number = 20;
    _gridData = []; // original passed data 
    gridView: any[]; // store a slice of data if any filter are active

    // Each time the number of rows in the grid data changes
    // move back from last page if empty (eg deleted last item on last page)
    @Input() set gridData(values: any) {
              this._gridData = [...values];       
    } else if (values && values.length === 0) {
          this._gridData = [];
    }
    this.gridView = cloneDeep(this._gridData); // set initial view
  
    while ( (this.gridView.length <= this.skip ) && 
            (this.skip >= this.pageSize)) {
        this.skip = this.skip - this.pageSize;
      }
    }

    while ( (this.gridView.length <= this.skip ) && 
            (this.skip >= this.pageSize)) {
                this.skip = this.skip - this.pageSize;
            }
    }

    public showPaginator(): boolean {
      return  ((!!this.gridView) && (this.gridView.length > this.pageSize));
  }

  // Keep track of the current page.
  public pageChange(event: PageChangeEvent): void {
      this.skip = event.skip;
  }