Improvements on TreeView

[stsrki]

Features for next version of TreeView

• [ ] Validation support
• [ ] Editing of node
• [ ] EditTemplate for custom editing
• [ ] Expand/Collapse doesn't work on mobile(see comment bellow)

@robalexclark

[FrancisValade]

It would be nice to have a way to customise the icons for opening and closing a node. For example, I would like to replace the plus and minus icons for a right and down arrow.

[nightroman]

@stsrki Not sure if it's the right place to ask/suggest.

It's rather hard to expand and collapse TreeView nodes on mobile phone. It works 50/50, I'd say. Maybe the suggested above custom (larger) icons may help, if implemented.

[stsrki]

I just tested on mobile. You're right, something is wrong with click or tap events. I need to "click" several times to make it expand or collapse. Weird...

[nightroman]

If this needs a separate issue please let me know.

[stsrki]

No need, I have updated the original ticket with new item.

[nightroman]

One more minor defect (?) - on hovering over expand/collapse icons the mouse pointer does not change from the "arrow" to "hand" (click me convention).

[CMontani89]

Is there a way to expand all Nodes by default on page load?

[robalexclark]

To expand all nodes I would loop through and add all nodes to an IList expandedNodes and then set that to @bind-expandednodes e.g.

<TreeView Nodes="holdings"
                              @bind-SelectedNode="selectedNode"
                              @bind-ExpandedNodes="expandedNodes"
                              GetChildNodes="@(item => item.Children)"
                              HasChildNodes="@(item => item.Children?.Any() == true)">
                        <NodeContent>
                            @if (context.HoldingType == "Holding Unit")
                            {
                                <Icon Name="IconName.Building" />
                            }
                            else if (context.HoldingType == "Room")
                            {
                                <Icon Name="@("fa-door-closed")" />
                            }
                            else if (context.HoldingType == "Cage")
                            {
                                <Icon Name="@("fa-th")" />
                            }

                            @context.Text
                        </NodeContent>
                    </TreeView>

[Jinjinov]

It would be nice to have a way to customise the icons for opening and closing a node. For example, I would like to replace the plus and minus icons for a right and down arrow.

Any progress on this?

I would like to at least vertically align the + and - icons when using a custom razor component for the tree node.

[stsrki]

We don't have any milestones still. But, PRs are welcome :)

[solalem]

I added customizable icon for collapse/ expand icon. pull request