CODEWITHSUNDEEP
kendo-uikendo-gridkendo-ui-angular2
intotecho
intotecho

Reputation: 5684

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.

Upvotes: 0

Views: 2182

Answers (2)

Arntor
Arntor

Reputation: 816

For some reason binding the "skip" property doesn't work here and i needed to set it through the grid reference. This will set the required page, but will not refresh the grid. To refresh it, you need to trigger some event like "sortChange" for example.

this.kendoGrid._skip = 0;
this.kendoGrid.sortChange.emit();

Upvotes: 0

Giannis
Giannis

Reputation: 1840

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.

Upvotes: 1

Related Questions