TreeView AfterExpanded Event

1 Answer 18 Views
TreeView
Kevin
Top achievements
Rank 1
Kevin asked on 14 Sep 2022, 06:33 PM

In my code I'm setting the ExpandedItems and SelectedItems (single item). I have my TreeView in a scrollable div. Once the TreeView has expanded, I want to scroll the selection into view. In javascript I'm getting the DOM element with the aria-selected="true" tag and calling "scrollIntoView". 

The problem is, that tag doesn't exist until after the TreeView has expanded.  There doesn't seem to be any event tied to after the TreeView has expanded. At the OnAfterRenderAsync event, the TreeView hasn't expanded yet.

I can invoke the javascript with a button and it works fine - once the TreeView has expanded. But, I don't want the user to have to click a button to view the selection. Is there a better way to do this?

1 Answer, 1 is accepted

Sort by
0
Hristian Stefanov
Telerik team
answered on 19 Sep 2022, 01:48 PM

Hi Kevin,

I carefully reviewed the situation. Indeed, the case is specific. Now let me shed some light on the possibilities I researched below.

You are on the right path - "scrollIntoView" is the best approach here. To make it work, here are the two possible options:

  • Using MutationObserver - this javascript tool notifies about DOM changes and checks if the desired node is rendered after the expansion.
  • Using setTimeout - this javascript function gives time to the desired node to get rendered. Keep in mind that with setTimeout, the time needed can depend on different machines. If you go with this approach, make sure to give enough time.

I have prepared a sample project attached (see "treeview-scroll-selected-node.zip") for you that shows both options from above. You can run and test it to see the results. The project uses ".Net 6" and Telerik version "3.6".

Regards,
Hristian Stefanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Kevin
Top achievements
Rank 1
commented on 19 Sep 2022, 05:43 PM

I went with the setTimeout option. It works great, thanks!
Tags
TreeView
Asked by
Kevin
Top achievements
Rank 1
Answers by
Hristian Stefanov
Telerik team
Share this question
or