Treelist scrollTo not working

[Alex]

Hello,

I am trying to use the TreeList scrollTo function in order to scroll the list to a given location. However, this does not seem to do anything. The tree is not scrolled.

Example:

this.treelist.scrollTo({ row: 0, column: 0});

I would expect this to scroll to the top of the treeList, but it does nothing.

Is this a known issue? If so, do you have a suggestion to work around it to scroll the treeList?

I'm using version 11.2.0.

[Hetali]

Hi Alex,

The described issue is a bug from our end and has been logged in our GitHub Issue Tracker. Please subscribe to the issue to be notified when the fix is available and feel free to leave any additional comments in the post.

For now, use the virtual scrolling functionality by setting the scrollable property to 'virtual' along with the desired rowHeight to use the scrollTo method in your application. For example:

<button kendoButton (click)="scrollToTop()"> Scroll to Top </button>
<kendo-treelist #treelist 
  scrollable="virtual"
  [rowHeight]="36"
>
</kendo-treelist>

@ViewChild('treelist') public treelist;

public scrollToTop() {
  this.treelist.scrollTo({column: 0, row: 0});
}

In this StackBlitz demo, the scrollTo method works with virtual scrolling in the Kendo UI TreeList.

My apologies for any inconvenience this issue may cause. I appreciate your patience and as a token of gratitude have updated your Telerik points.

Update:

If you are unable to use virtual scrolling in the component, please use the following custom function with the scrollTo method to scroll to a certain cell as a workaround.

public scrollTo() {
  // scrollable container
  var container = document.getElementsByClassName("k-grid-content");  

  // cell height to calculate the vertical scroll
  var cellHeight = document.querySelector(".k-table-td").clientHeight; 
        
  var row = 1;
  var col = 1;
  var width = 0;

  // width of the columns for horizontal scroll
  for(let i = 0; i < col - 1; i++) {
    width += this.treelist.columns._results[i].width;
  }

  container[0].scrollTo({
    top: (row - 1) * cellHeight,
    left: width,
    behavior: "smooth",
  });       
}

This StackBlitz example demonstrates the custom function to scroll the TreeList to a certain cell without virtual scroll functionality. Please note that this custom workaround is not fully supported by Telerik and may need further modifications.

Let me know if you have further questions pertaining to scrolling in the TreeList.

Regards,
Hetali
Progress Telerik

[Alex]

Thanks for the quick response!

Unfortunately, due to how we are providing data to the TreeList, virtual scrolling is not a viable solution for us. 
Are there any other options to work around this issue? 

 

[Hetali]

Hi Alex,

I have updated the answer with a custom workaround. Please give it a try and let me know if it helps.

Regards,
Hetali
Progress Telerik

[Alex]

I was able to use the workaround to get scrolling working how we wanted, thanks!