Retain scroll position

[Bram]

Hi,

I'm having problem retaining the scroll position when my observable refreshes.

What I have is when a refresh of the observable is triggered the grid is refreshed but jumps to another place in the grid.

This is due to a detail template that I'm using to show data (I expand all the details when the data is loaded). 

If I remove the detail template the scroll position stays at the same position.  But when the detail template is present it looks like the scroll position is set to where the current row would be positioned without a detail template.

Do you have a clue what I'm doing wrong?

Regards,

 

Bram

 

[Martin Bechev]

Hi Bram,

The developer can use scrollTo method of the Grid to manually change the scroll position of the table. In case remote data is used, ensure that the row your trying to scroll to is rendered before applying the method. Handle the contentScroll event to get more details about the scroll position.

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/#toc-scrolling-to-a-specific-row-and-column-index/

An alternative approach is to store the scroll position of the Grid, by attaching a custom event listener to the Grid container and manually scrolling the table when necessary:

 public ngAfterViewInit(): void {
    document
      .querySelector('.k-grid-content.k-virtual-content')
      .addEventListener('scroll', (e) => {
        sessionStorage.setItem('scrollPosition', e.target['scrollTop']);
      });
  }

  restoreScrollPosition() {
    const container = document.querySelector(
      '.k-grid-content.k-virtual-content'
    );
    container.scrollTop = Number(sessionStorage.getItem('scrollPosition'));
  }

Here is an example:

https://stackblitz.com/edit/angular-lmra37

I hope this helps.

Regards,
Martin
Progress Telerik