kendo grid angular selecting the first row programmatically on page change

[Jyothi]

Hi,

Is there a way to select the first row when we move from one page to another in kendo grid angular.

We have a requirement where we show some details of the data when a row is selected. IT is easy to do when the first time the grid is loaded. But when we move to another page using pagination functionality, no row is selected (grid default behavior). 

How do we select the first row when we move from one page to another programmatically?

Regards,

Jyothi

[Hetali]

Hi Jyothi,

In order to select the first row when moving pages in the Kendo UI Grid, use the pageChange event to update the selectedKeys. For example:

<kendo-grid 
  kendoGridSelectBy="ProductID"
  [(selectedKeys)]="mySelection"
>
</kendo-grid>

public pageChange(event: PageChangeEvent): void {
  this.mySelection = [event.skip + 1]
  this.skip = event.skip;
  this.loadItems();
}

I have demonstrated the above discussed method in this StackBlitz example.

Please let me know if this solution helps or if I can further assist you.

Regards,
Hetali
Progress Telerik