Kendo UI Grid Angular - scroll to selected row

[Manuel]

Hi,

I am having a large grid and I programmatically select a row of the grid.

But if the row is out of the viewport of the current view I would like to have the grid scroll down/up to the row, so the user can see the selected row automatically.

I've ssen thatthere is a demo for that in the jQuery-Version of the grid. But how do I accomplish tat in the angular grid?

Thanky for your help in advance.

Best regards

Manuel

[Dimiter Topalov]

Hello Manuel,

Depending on the specific implementation and scenario, the approach may vary, but in general (assuming you would like to scroll to the first selected row in the Grid) the most straight-forward approach would be to select the respective Grid row by class ('k-state-selected') and scroll it into view via the JavaScript API scrollIntoView() method, e.g.:

https://plnkr.co/edit/JmgmTEBkPd8RDwzXimKn?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Rick]

Hi,

The scrollIntoView method isn't working for me probably because I have a grouped grid with virtual scrolling. I've also tried setting 'skip' to the index of the item I'm trying to scroll to but that gave me strange results too. Is there any other way to accomplish this?

Thanks,

Rick

 

[Svet]

Hi Rick,

In order for the suggested approach to function, we need to have all rows loaded in the DOM. In case we use virtual scrolling, most of the times, not all rows are rendered at once in the DOM for better performance. This is why, we could achieve the desired behavior only if we use Virtualization with Grouping (as it uses in memory data) as demonstrated in the following example:

https://stackblitz.com/edit/angular-aaksqx?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Rick]

Hi Svetlin,

Thanks for the response. I am using virtual scrolling and all rows are loaded into the DOM. That part is working very well for me and has really cleared up a performance problem I was having.

However, I still have two problems scrolling to the selected row.

1. If the selected row ISN'T yet rendered into the grid control due to virtual scrolling, document.querySelector('.k-state-selected') is null and, therefore, scrollIntoView() can't be used. When I manually scroll to the row and it is loaded into the grid via the virtual scrolling mechanism, the row is correctly selected (highlighted).

Note: I do know the index of the selected item even if it hasn't been loaded into the grid yet (the grouping is static), so if there was another way for me to "skip" to that index, I would be able "scroll" to it that way. For instance, setting the skip and refreshing the grid (but this hasn't worked for me either).

2. If the selected row IS rendered into the grid control, scrollIntoView is able to locate the row and scroll it into view but I see another issue due to the fact that I have fixed columns. See attachment...

Thanks again,

Rick

 

[Svet]

Hi Rick,

Thank you for the additional details.

In order to achieve the desired behavior we can use the process function in order to get the structure of the grouped data.

constructor() {
    this.data = this.createRandomData(1000);
    this.structure = process(this.data, {group: this.group}).data
}

Then, we can iterate the created structure in order to locate the actual index of the item, that we need to scroll to. Then we need to update the skip of the Grid and call the scrollIntoView method for both elements with .k-state-selected class (one for the locked columns and one for the columns that are not locked):

skipTo(){
  let index = 0;
  this.structure.forEach(group => {
    group.items.forEach(item => {
      index += 1;
      if(item.id == 150){
        this.skip = index;
        setTimeout(() => {
          Array.from(document.querySelectorAll('.k-state-selected')).forEach(item => item.scrollIntoView())
          });
      }
    })
  })
}

As we modify the skip externally, we will also need to update it on each pageChange event:

<kendo-grid
          ...
          [kendoGridSelectBy]="'id'"
          [selectedKeys]="mySelection"

          (pageChange)="skip = $event.skip"
        >
...

Check the following example demonstrating this custom approach:
https://stackblitz.com/edit/angular-1kuwfx?file=app/app.component.ts

As the suggested approach relies entirely on some custom logic, you could also vote for the following feature request from our UserVoice portal:
https://feedback.telerik.com/kendo-angular-ui/1360621-grid-add-api-methods-to-programmatially-scroll-to-top-and-to-scroll-to-an-item,

which will help us to track the demand for the specific feature and provide it as a built in functionality in the future.

I hope this helps. Let us know in case further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Rick]

Hi Svetlin,

That WORKED! Thank you!

I had some squirrelly behavior if I did a scrollIntoView down the grid and then another scrollIntoView back up the grid, so I added the following lines to the code you posted and it works perfectly!

if (item.id == searchId) {

  if (index < this.skip)
    this.skip = Math.floor(index / this.pageSize) * this.pageSize;
  else if (index > this.skip + this.pageSize)
    this.skip = index;

  setTimeout(() => {
    Array.from(document.querySelectorAll('.k-state-selected')).forEach(item => item.scrollIntoView())
  });
}

Thanks again,

Rick