BringIntoView() for Blazor treeview?

1 Answer 42 Views
TreeView
Sven
Top achievements
Rank 1
Sven asked on 16 Jan 2022, 01:00 PM

Dear Telerik Team!

Is there a way to make the treeview scroll so that a speficic node is visible? I need to make the node visible that was selected by code.
So I am looking for a way to do what the .BringIntoView() method in the WPF treeview does...

thanks and regards

Sven

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 19 Jan 2022, 03:07 PM | edited on 27 Jan 2022, 05:31 PM

Hello Sven,

The desired behavior requires custom coding and the scrollIntoView JavaScript function.

You will need to:

  1. Expand the item's parent, if necessary. Refresh the TreeView in this case.
  2. Select the item.
  3. Execute the custom JavaScript. You can find the TreeView item by its "k-state-selected" CSS class. You may need to use setTimeout to wait for actions 1 and 2 to complete.

Update: Here is how to find the selected TreeView item with JavaScript. Note that in UI for Blazor 3.0 the k-state-selected class was renamed to k-selected. If you have multiple TreeViews on the page, use a custom class instead of k-treeview.

var item = document.querySelector(".k-treeview .k-selected");
if (item) {
    item.scrollIntoView();
}

Regards,
Dimo
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!
Sven
Top achievements
Rank 1
commented on 27 Jan 2022, 05:12 PM

Thanks.
But I am a bit struggling with point 3. So far I have expanded and selected the item in my C# code.
I think I would need to trigger a javascript function that searches for the selected element in the treeview. Can You give me hint of how to do that?
I think it would be a goog idea to add a hidden element with an identifier to my item template. So I need to provide the id to the javascript function as a param.

Sven
Top achievements
Rank 1
commented on 28 Jan 2022, 06:16 PM | edited

Hello Dimo!

I nearly solved the problem. But the timing remains a problem. In my case, the javacript function is called before the tree is expanded.

Snippets:

<TreeViewBinding TextField="Title" ItemsField="Childs" HasChildrenField="HasChildren" ExpandedField="IsExpanded">

I expand the ViewModel. Then I call javascript via

@inject IJSRuntime JS

JS.InvokeVoidAsync("ScrollToNode", itemID);
But at the time I call the javascript method 'ScrollToNode' the tree is not yet exanded in Browser. So, the element does not yet exist in DOM.

Do you have any Ideo how I can call the javascript method after(!) client side changes are rendered?

Thanks in advance
Sven
Dimo
Telerik team
commented on 01 Feb 2022, 11:31 AM

@Sven - a possible approach is to raise a boolean flag where you expand the TreeView, and then use this flag in OnAfterRenderAsync to call the JavaScript code.

    bool ShouldExecuteJs { get; set; }

    void SelectAndScroll()
    {
            // ... load data, expand TreeView, etc. ...

            ShouldExecuteJs = true;
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (ShouldExecuteJs)
        {
            ShouldExecuteJs = false;
            await js.InvokeVoidAsync("ScrollToNode", itemID);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

 

Sven
Top achievements
Rank 1
commented on 01 Feb 2022, 12:25 PM

That seems to work.
Thanks for your help!
Tags
TreeView
Asked by
Sven
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or