Grid: Scroll to the top?

user_8096904 0
Viewed 1521

When using virtual scrolling and number of rows changes then the scrollbar's thumb may remain below available data.

Scenario:

  • Use virtual scrolling and async data binding
  • Load e. g. 1000 rows
  • Scroll to the end
  • Change the data to e. g. 100

Problem:

  • The thumb remains at the bottom and no data is actually visible. You can scroll up again, but it is confusing for the user and it would be better to scroll to the top programmatically.

Question:

  • Is there a way to scroll to the top programmatically?
kendo-ui-angular2
1 Answers

Try Element.scrollTop

If it is angular app, you can use the following code: 

 let gridContent = this.elRef.nativeElement.getElementsByClassName('k-grid-content')[0];
    if (gridContent) {
      gridContent.scrollTop = 0;
    }

where elRef is passed using consturctor: 

   constructor(private elRef: ElementRef) {    }
user_36165650
Related