Tree View item styling

[ianclough]

I'm looking for a way to add style to individual tree view items e.g. underlined text or maybe different coloured text. My application is similar to an IDE and I'm using a tree view to display a component hierarchy. I have an implementation that renders custom content within a FluentTreeItem but something more out of the box would be nice.

[ianclough]

It would also be helpful to support a right click context menu per item.

[vnbaaij]

The tree does not have support for right click menu.

Did you https://fluentui-blazor.net/TreeView#dynamictreegeneratio? You can use ItemTemplate to style your items

[ianclough]

Thank you, I may be missing something, but can you individually style the items. In my case I want to apply red underlining to items in the tree view that have errors.

[vnbaaij]

Yes, you can have conditional code in the ItemTemplate like in the example with the line between the span tags:

<ItemTemplate>
        @context.Text
        <span style="color: var(--accent-fill-rest); margin: 0 4px;">
            @(context.Items == null ? "" : $"[{context.Items.Count()}]")
        </span>
    </ItemTemplate>

[ianclough]

Coming back to this, in the demo example using the ItemTemplate the text itself is clickable to select the tree item but the count, wrapped in a span is not. If I extend this example and wrap the text is span for style than that also not selectable. Ideally the entire item including any icon(s) should be clickable.

Incidentally I have extended the TreeViewItem class to allow a per-item class/style to be passed into the template.