RadzenTree questions

Radzen Studio Blazor Server
4

ok, i got most of the tree stuff implemented now. two things are still open.

#1 expand on click, expanding with property does not seem to execute the Expand= handler

    <RadzenTree @ref="_tree" Data="@_treeDataSource" Change="@OnTreeSelectionChange" Expand="OnTreeNodeExpand" Style="min-width: 300px; height: 100%;">
        <RadzenTreeLevel TextProperty="Name" ChildrenProperty="Categories" HasChildren="QueryGroupHasChildren" Expanded="@(data => (data as Group).expanded)">

on node click, the selection changed event is fired correctly. i modify the property as you suggested:

void OnTreeSelectionChange(TreeEventArgs args)
{
    Console.WriteLine($"TreeNode selected: {args.Text}");
    if (_lastClickedNode == args.Value)
    {
        if (args.Value is Group)
            (args.Value as Group).expanded = !(args.Value as Group).expanded;
        if (args.Value is Category)
            (args.Value as Category).expanded = !(args.Value as Category).expanded;
    }
    _lastClickedNode = args.Value;

and the node expands and collapses correctly (little icon on the left changes).
unfortunately, the Expand="OnTreeNodeExpand" handler is never called so my child nodes are not created....

image

could this be fixed?

#2 drag and drop
my nodes are sorted by a property in their data object. the user needs to be able to reorder the nodes somehow. in my old asp.net app i had two buttons next to each node, to move them up or down by modifying the property value. this is oldschool :slight_smile:

a far better approach would be drag and drop. could i leave this as a little feature request? e.g. if the treelevel has a property "DnDEnabled" set to true, a little ui element appears at each node that can be used to move up or down? once dropped, a callback event is triggered, where i modify the property again.
i understand this might be quite complicated to implement, so i'll go with the buttons for now. just as a possible enhancement for the future.

5

1 expand on click , expanding with property does not seem to execute the Expand= handler

I can't seem to reproduce that with the following setup. The Expand handler is ivoked.

 <RadzenTree Data="@nodes" Expand="@OnTreeExpand">
       <RadzenTreeLevel Text="@(data => ((DataNode)data).Data.ToString())" 
             ChildrenProperty="Children" 
             Expanded="@(data => ((DataNode)data).Expanded)"
             HasChildren="@(data => ((DataNode)data).Children != null)" 
       />
</RadzenTree>

@code {
    public class DataNode
    {
        public object Data { get; set; }
        public bool Expanded { get; set; }
        public IEnumerable<DataNode> Children { get; set; }
    }

    DataNode[] nodes = new DataNode[]
    {
        new DataNode
        {
            Data = "Root",
            Expanded = true,
            Children = new [] {
                new DataNode
                {
                    Data = "Child"
                }
            }
        }
    };

   void OnTreeExpand(TreeExpandEventArgs args)
   {
       Console.WriteLine(args.Value);
   }
}

#2 drag and drop

Yes we have this in the roadmap and will probably implement it at some point. It isn't easy indeed but not something we haven't done before :slight_smile:

2 Likes
6

yes, it works with your code, because you set "expanded" already in the datanode at creation time.

i modified it a little bit, at creation time expanded = false, and added a click handler. there i set expanded to true. then it doesn't fire anymore:

<RadzenTree Data="@nodes" Expand="@OnTreeExpand" Change="@OnTreeSelectionChange">
       <RadzenTreeLevel Text="@(data => ((DataNode)data).Data.ToString())" 
             ChildrenProperty="Children" 
             Expanded="@(data => ((DataNode)data).Expanded)"
             HasChildren="@(data => ((DataNode)data).Children != null)" 
       />
</RadzenTree>

@code {

public class DataNode
{
    public object Data { get; set; }
    public bool Expanded { get; set; }
    public IEnumerable<DataNode> Children { get; set; }
}

DataNode[] nodes = new DataNode[]
{
    new DataNode
    {
        Data = "Root",
        Expanded = false,
        Children = new [] {
            new DataNode
            {
                Data = "Child"
            }
        }
    }
};

void OnTreeExpand(TreeExpandEventArgs args)
{
    Console.WriteLine($"TreeExpand: {args.Value}");
}

void OnTreeSelectionChange(TreeEventArgs args)
{
    Console.WriteLine($"TreeNode selected: {args.Text}");
    DataNode d = args.Value as DataNode;
    d.Expanded = true;
}

the node expands correctly (as seen in the picture), but the handler doesn't fire

image
image2877×1594 353 KB

in your example this is no problem, but i create nodes at runtime at the expanded event, so in that case it is a problem as they don't get created anymore.

7

Indeed setting the Expanded property does not trigger the Expand event for the time being. Could you populate the children in the OnTreeSelectionChange handler instead?

8

RE: Drag and Drop

Good, because you guys need it here:
image

This is very time consuming to move fields around on a form.
... because you have to chase the up/down arrow - because you just moved it.
Move buttons ABOVE the column would be more useful since you already allow selecting the Field.

Of course, DnD will be awesome too.

9

i fear not, because TreeEventArgs is not the same as TreeExpandedEventArgs, so there is no "args.Children", unless i miss something.

void OnTreeSelectionChange(TreeEventArgs args)
{
   args.Children.Data = cat.CategoryCheckLinks.OrderBy(x => x.Position);
   args.Children.Text = GetTextForCheckNode;
   args.Children.HasChildren = (o) => false;   // level 3 nodes can't expand
   args.Children.Template = TreeCheckTemplate;
}

but we can wait for a fix for the expanded issue, if you will implement one sooner or later.

10

but we can wait for a fix for the expanded issue, if you will implement one sooner or later.

I don't think we can implement it. One could put Expanded = true in the expand event handler and end with endless loop.

So what exactly are you trying to implement? I got confused. Are you trying to load on demand nodes when the user selects a node instead of expands it?

11

i want a node to expand when the user clicks the node (instead of having to click the expansion icon on the left). i use the Change= event handler for that, by setting expanded property to true, as you suggested.

the nodes in level 1 and 2 are created by template.

the nodes in level 3 are created dynamically in code, in the Expand= handler of a level 2 node. but the event does not fire, as explained, so they are not created.

12

I guess we can live with endless Expand events firing if someone does toggle the Expanded property. Will investigate.

13

just blame it on me if someone knocks up their call stack. :innocent:

14

just updated to 2.4.1 and now it works. are you really that fast?! many thanks.

15

Hello,

In Tree View can we mark first node as default selected when we load tree

dynamic loading...

Do we have any provision on that.

16

Use the Selected property of the RadzenTreeLevel:

<RadzenTreeLevel Selected=@(item => ((MyClass)item).Selected) />
17

I want only first node to be selected

image
image916×85 12.8 KB

If i use Selected = true it will select the last node from three.

18

Do we have Context menu on tree node?

19

Hi, the last point, keeping the structure in-memory. A tree is perpetual and the depth is indeterminate. Therefore, keeping this in-memory could result in an entirely unresponsive front-end.

It is better to write in such a way that YOUR child is aware of it's parent. This means you can walk the entire tree, up to the parent. If you wish to go above the parent, SHOULD there be items above your current parent, you can inspect the (I think, as I am new to Radzen) that you probably have some sort of index on the tree. That makes the most sense to me. So, if you haven't hit index 0, you are able to keep going. (Not sure if I am correct on the last point, but it makes the most logical sense. However, I do not, yet, know if you expose that)

20

How can I do if I have multiple level tree?

21

How to make select full row not trxt only
Best regards

22

As I replied in the other thread this is not possible. Please do not post duplicate questions.

23

More thanks for your help