RadzenTree How to Programmatically Expand and Select Node

Radzen.Blazor Components
1

Hi; if I have a RadzenTree that is not-expanded, I would like to make a call to expand and select a certain node.

For example, I am using the tree control as a "Document Map", where the tree is on the left, and some document editor is on the right. When the user selects some text in the document, I want to automatically (i.e. programmatically) select the corresponding node - this would require expanding all parents leading to that node, and ideally, scroll the tree to make sure the selection is in sight.

What I'm looking for is something like:

<RadzenTree @ref="_tree" ..... />
@code
{
RadzenTree _tree;
void SelectNodeByExternalCaller(object someObjThatNodeHas)
{
_tree.SelectNode(??????)
}
}

I did find the "Selected" parameter of RadzenTreeLevel, but that seems to only be called when the user expands nodes ... how do I do this programmatically without user intervention?

2

I recommend checking my reply here: RadzenTree questions

The Selected property of the RadzenTreeLevel is the way to select a node.

<RadzenTreeLevel Selected=@(data => ShouldSelectThisNode(data)) />
3

Thank you - also I did read most/all of the RadzenTree questions ... I'm respectfully trying to search for topics before starting a new one :).

That being said, and in my opinion, this "almost" works - the issue that I am finding is that the tree node has to be already expanded for the "Selected" event handler to be called - so, in my example, if I pre-expand the ENTIRE tree first, then it works!

So, in my opinion, what would be great is if you exposed a new API method that we can call (without you scanning and calling us) that would find the correct node, expand its entire parents chain so it is visible, and select it ... I think that would be 'expected' tree API ... I'm surprised others are not running into this ... unless I'm still missing something?

...also, there does not seem to be any programmatic 'expand' API ... I don't see any way to tell the tree to expand-all or expand a certain node if it is not already expanded by the user in the UI?

4

You should read my reply again :slight_smile:

Blazor is more of a declarative framework (uses data-binding instead of code-behind) while you seem to be looking for imperative API - adding nodes from code, accessing parent nodes etc.

The RadzenTree component will not expose imperative API for expanding or selecting nodes. Only the existing declarative API should be used (the Expanded and Selected properties of the RadzenTreeLevel).

5

Thank you. Final notes: for me, it's not about declarative vs. imperative, ... just need something that works so I don't have to write it myself - AND, RadzenTree almost does ... it's very close.

I can add/remove nodes from code by working on the bound-data-structure, and calling StateHasChanged() ... the ONLY issue here is expansion and selection, which I think should work from any style of API... just give it some more thought at your convenience.

BTW, I am planning to purchase a Radzen Professional subscription after we ship "Rev 0" and have committed to your controls, which is looking likely because over all I really like what, and how, you are doing - thanks again, really appreciate it!

1 Like
6

I have to +1 here. :expressionless:
I've spent uncounted hours just trying to get one node to collapse or expand when code needs it to. I've tried "Imperative" as well as "Declarative" approaches (added an 'Expanded' property to my data object, bound it to the RadzenTreeLevel's Expanded property and set the data object's property in code) to no avail.
So frustrating to be 95% there and have to go elsewhere.

7

Hi @Ty_Garrett,

If you provide more details we could probably be able to help. Some sample code which we can run would be a good start.

8

Ok, but then I wonder how deep linking could be achieved with this control, say for 2 levels?
I would like to select a second-level node and the id of that node is coming from the URL?

9

It would work in the same way - you have to determine if a node is selected. Also its parents should be expanded

<RadzenTreeLevel Selected=@(data => ShouldSelectThisNode(data)) 
                 Expanded=@(data => ShouldExpandThisNode(data)) 
/>