FluentUI.Blazor v4.14

Overview

Although the team is now fully focused on delivering the great v5 version of the library in the near future, they managed to release a significant update for v4. This version includes a highly demanded feature that warranted the jump to a new minor version by itself: hierarchical data support in the DataGrid!

For this 4.14 release, the highlights include:

• Hierarchical DataGrid - Expandable/collapsible rows with the IHierarchicalGridItem interface
• Updated Fluent UI System Icons to version 1.1.318
• Documentation and demo site improvements
• Fixed 3 additional DataGrid issues
• Enhanced 5 other components with updates and fixes

For the complete overview of all changes, visit the What’s New page on the documentation site.

What about versions 4.12 and 4.13?

These two versions weren’t skipped - they brought significant improvements! Here’s a quick summary of what you might have missed:

Version 4.12 & 4.13 highlights:

• .NET 10 support - Full template support and compiled version in the package
• DataGrid async loading - Better performance for large datasets
• SelectColumn enhancements - More flexible selection options
• Full column resize handle - Improved user experience for column resizing
• Menu dispose fixes - Resolved errors when removing menus
• AutoComplete improvements - New features and override capabilities
• Dialog focus management - Returns focus to initiator when closed, with customizable header typography

In total, 34 components received changes, fixes, or enhancements across these two releases. A heartfelt thank you to the growing group of contributors who made these improvements possible!

Hierarchical DataGrid - The star feature

The Aspire team has been using expandable/collapsible rows in their Dashboard Resources page for a while, but it was a custom implementation specific to Aspire. Thanks to the power of modern AI assistants (Claude and Gemini helped!), a generic solution is now available that works with any type of row data.

The only requirement? Both parent and child rows must have the same properties (i.e., display the same columns).

How does it work?

The functionality is powered by the IHierarchicalGridItem interface, which transforms a flat list of data into a navigable tree structure within the grid. This interface provides the metadata necessary for the grid to manage parent-child relationships and display states.

The four key properties:

public interface IHierarchicalGridItem
{
    int Depth { get; }           // Level in the hierarchy (0 for root items)
    bool HasChildren { get; }    // Whether to show expand/collapse toggle
    bool IsCollapsed { get; }    // Visibility state of descendants
    bool IsHidden { get; }       // Whether the row should be rendered
}

Visual indentation and state management

The FluentDataGrid automatically handles the complex parts of tree-view rendering:

1. Visual Indentation: The grid calculates and applies margin-inline-start based on the Depth property, ensuring clear visual separation between levels.

2. State Management: When a user clicks the expand/collapse button, the grid invokes ToggleExpandedAsync(TGridItem). This internal method flips the IsCollapsed state and triggers a data refresh.

3. Flat-to-Hierarchical UI: While the underlying Items or ItemsProvider provides a flattened list, the grid uses the interface properties to decide which rows to show and how to style them.

4. Custom Logic: The OnToggle event callback allows you to perform additional actions, such as lazy-loading child items from a database only when a node is expanded.

Example usage

public class MyDataItem : IHierarchicalGridItem
{
    public string Name { get; set; }
    public int Value { get; set; }

    // IHierarchicalGridItem implementation
    public int Depth { get; set; }
    public bool HasChildren { get; set; }
    public bool IsCollapsed { get; set; }
    public bool IsHidden { get; set; }
}

<FluentDataGrid Items="@hierarchicalData" TGridItem="MyDataItem">
    <PropertyColumn Property="@(x => x.Name)" />
    <PropertyColumn Property="@(x => x.Value)" />
</FluentDataGrid>

Both 2-level and multi-level examples have been added to the demo site on the DataGrid - Hierarchical data page.

And yes, the hierarchical functionality works perfectly with the column resize functionality!

Updated Fluent UI System Icons

The icon library has been updated to the latest Fluent UI System Icons release (version 1.1.318). This ensures you have access to the newest icons and improvements from Microsoft’s design system.

<FluentIcon Value="@(new Icons.Regular.Size24.Calendar())" />

Other improvements

Beyond the headline features, this release includes:

• 3 DataGrid bug fixes - Improved stability and edge case handling
• 5 component enhancements - Various updates and fixes across multiple components
• Documentation updates - Refreshed examples and clearer explanations
• Demo site improvements - Better showcase of component capabilities

Rest of the fixes

The rest of the fixes and changes for this release are quite extensive. We refer you to the What’s New page on the documentation site or to the GitHub release page for a complete overview (including links to issues and change requests on GitHub).

Web sites

• Documentation: https://www.fluentui-blazor.net
• Preview: https://preview.fluentui-blazor.net
• NuGet packages .NET8: https://aka.ms/blazor/fluentui/libs

Feedback

If you find something out of the ordinary, let us know in the repo on GitHub, or Twitter / X.