Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Why does FluentTreeView only allow toggling the root node?

$
0
0

Problem Description & Demo

I'm making a Blazor UI using the Fluent UI Library, and I'm having some problems with the FluentTreeView. It seems that only the root node can be toggled (expanded/collapsed), while attempting to toggle any descendant node causes a minor UI glitch and remains as it was.

Visual demonstration of only the root node being toggleable

Code

In WorkSequencePage.razor:

<FluentTreeView Items="@_treeViewItems" @bind-SelectedItem="_selectedItem"><ItemTemplate><span class="anchor" @onclick="() => ViewModel.FocusWork(context.Text)">@context.Text</span>        @if (context.Items is not null && context.Items.Any())        {<span style="color: var(--bs-secondary); margin: 0 4px;">                [@context.Items.Count() @(context.Items.Count() == 1 ? "child" : "children")]</span>        }</ItemTemplate></FluentTreeView>

In WorkSequencePage.razor.cs:

public partial class WorkSequencePage{    private ObservableCollection<ITreeViewItem> _treeViewItems = [];    private ITreeViewItem? _selectedItem;    protected override async Task OnInitializedAsync()    {        ViewModel.PropertyChanged += OnViewModelPropertyChanged;        await ViewModel.InitAsync();        await base.OnInitializedAsync();    }    private void OnViewModelPropertyChanged(object? sender, PropertyChangedEventArgs e)    {        if (e.PropertyName == nameof(ViewModel.RootNode))        {            UpdateTree();        }    }    private void UpdateTree()    {        _treeViewItems.Clear();        _treeViewItems.Add(ParseTreeViewItem(ViewModel.RootNode));        StateHasChanged();        return;        ITreeViewItem ParseTreeViewItem(WorkSequenceNode node)        {            var ret = new TreeViewItem(node.WorkId.ToString(), node.Children.Select(ParseTreeViewItem))            {                Expanded = true            };            if (node.WorkId == ViewModel.FocusedWorkId)            {                _selectedItem = ret;            }            return ret;        }    }}

What I've Tried

  • Not setting the Expanded property when constructing my TreeViewItems - all that does is initialise them as collapsed, meaning I can't toggle them open to see the data.
  • Listening to OnExpandedChange and inverting the value of Expanded when that event fires - no effect
  • Changing the LazyLoadItems property on the FluentTreeView - no effect
  • Explicitly declaring a unique ID in TreeViewItem's constructor - allows me to set other items as the selected item (undesired), but does not affect toggling

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>