DropDownTree scroll position in Angular

[Nakibuz]

Hi Team,

I am using angular Kendo DropDownTree and all the items of the dropdown is expanded. I have a vertical scroll bar in the dropdowntree. I want to know the scroll position of the DropDownTree and after refreshing of the page I need to retain the scroll position. How can I know the current scroll position and retain the scroll position of DropDownTree after refreshing the screen?

[Martin Bechev]

Hi Nakibuz,

The Kendo UI for Angular DropDownTree component exposes focusItemAt method, which can be used to programmatically focus specific DropDownTree items, which will result in scrolling the container.

The other way to achieve such a state persistence is to:

1. Listen for the scroll event of the container.
2. Get the scroll position and store it.
3. Manually scroll the container using scrollTop JavaScript method inside the opened event of the component.

Here is an example:

• https://stackblitz.com/edit/angular-qbi9wu

I hope this sheds some light on the case.

Let me know if I can provide any other assistance on that case.

Regards,
Martin
Progress Telerik

[Nakibuz]

HI Martin,

 

Thanks a lot for your response on providing the solutions for Kendo dropdown tree. Could you please provide the persisting the scroll position in Kendo TreeView?

[Martin Bechev]

Hi Nakibuz,

In order to persist the scroll, the scroll position should be stored somewhere. Then on opened event, the position should be retrieved and the container scrolled with the retrieved position:

container.scrollTo(0, retrievedScrollPosition);