Refactor data grid grouping logic and improve readability

- Updated grouping functions in `DataGridGroupingMultiLevelTest.razor` to handle nullable values. - Enhanced rendering structure in `DataGridGroupRow.razor` for better maintainability. - Added constructor and refactored properties in `DataGridGroupRow.razor.cs`. - Replaced `_allGroups` with `_groupDefinitions` in `MudDataGrid.razor` for structured group management. - Significant refactor in `MudDataGrid.razor.cs` to support multi-level grouping with new classes. - V2
MudBlazor · ScarletKuro · Apr 26, 2025 · Mar 10, 2025 · Mar 10, 2025 · Mar 10, 2025
commit f086f93237409d77acee35c97d1be496ba2fc994
diff --git a/src/MudBlazor.UnitTests.Viewer/TestComponents/DataGrid/DataGridGroupingMultiLevelTest.razor b/src/MudBlazor.UnitTests.Viewer/TestComponents/DataGrid/DataGridGroupingMultiLevelTest.razor
@@ -1,4 +1,5 @@
 @using System.Collections.Generic
+@using MudBlazor.Utilities
 @inject HttpClient httpClient
 
 <MudDataGrid @ref="@dataGrid"
@@ -23,7 +24,7 @@ GroupStyleFunc="@(_customizeGroupStyle ? GroupStyleFunc : null)">
         <PropertyColumn Property="x => x.PrimaryIndustry" Title="Primary Industry" GroupBy="_groupBy1">
             <GroupTemplate>
                 @{
-                    var color = context.Grouping.Key.ToString() switch
+                    var color = context.Grouping.Key?.ToString() switch
                     {
                         "Healthcare" => Color.Primary,
                         "Tech" => Color.Secondary,
@@ -43,7 +44,7 @@ GroupStyleFunc="@(_customizeGroupStyle ? GroupStyleFunc : null)">
         <PropertyColumn Property="x => x.Region" Title="Region" GroupBy="_groupBy2">
             <GroupTemplate>
                 @{
-                    var (icon, color) = context.Grouping.Key.ToString() switch
+                    var (icon, color) = context.Grouping.Key?.ToString() switch
                     {
                         "Northeast" or "Southeast" => (Icons.Material.Filled.East, Color.Warning),
                         "West" or "Pacific" => (Icons.Material.Filled.West, Color.Success),
@@ -64,7 +65,7 @@ GroupStyleFunc="@(_customizeGroupStyle ? GroupStyleFunc : null)">
         <PropertyColumn Property="x => x.Climate" Title="Climate" GroupBy="_groupBy3">
             <GroupTemplate>
                 @{
-                    var (icon, color) = context.Grouping.Key.ToString() switch
+                    var (icon, color) = context.Grouping.Key?.ToString() switch
                     {
                         "Continental" => (Icons.Material.Filled.AcUnit, Color.Primary),
                         "Humid Subtropical" => (Icons.Material.Filled.WbSunny, Color.Warning),
@@ -113,15 +114,25 @@ GroupStyleFunc="@(_customizeGroupStyle ? GroupStyleFunc : null)">
     private bool _customizeGroupTemplate;
     private bool _customizeGroupBy;
 
-    // Primary grouping by industry type
-    Func<USState, object> _groupBy1 = x =>
-    {
-        if (_customizeGroupBy)
-            return x.PrimaryIndustry.Equals("Healthcare") ? "Healthcare" : 
-                   x.PrimaryIndustry.Contains("Technology") ? "Tech" :
-                   x.PrimaryIndustry.Contains("Tourism") ? "Tourism" : "Other";
-        return x.PrimaryIndustry;
-    };
+    @code {
+        // Primary grouping by industry type
+        Func<USState, object>? _groupBy1;
+
+        protected override void OnInitialized()
+        {
+            _states = GetAllStates();
+            _groupBy1 = x =>
+            {
+                if (_customizeGroupBy)
+                    return x.PrimaryIndustry.Equals("Healthcare") ? "Healthcare" :
+                           x.PrimaryIndustry.Contains("Technology") ? "Tech" :
+                           x.PrimaryIndustry.Contains("Tourism") ? "Tourism" : "Other";
+                return x.PrimaryIndustry;
+            };
+
+            _states = GetAllStates();
+        }
+    }
 
     // Secondary grouping by region
     Func<USState, object> _groupBy2 = x => x.Region;
@@ -131,7 +142,7 @@ GroupStyleFunc="@(_customizeGroupStyle ? GroupStyleFunc : null)">
 
     private string GroupClassFunc(GroupDefinition<USState> item)
     {
-        var key = item.Grouping.Key.ToString();
+        var key = item.Grouping.Key?.ToString();
 
         // Primary level groups (Industry)
         if (item.Parent == null)
@@ -172,7 +183,7 @@ GroupStyleFunc="@(_customizeGroupStyle ? GroupStyleFunc : null)">
 
     private string GroupStyleFunc(GroupDefinition<USState> item)
     {
-        var key = item.Grouping.Key.ToString();
+        var key = item.Grouping.Key?.ToString();
         var indent = item.Level * 16; // 16px per level
         var borderWidth = Math.Max(1, 4 - item.Level); // Decrease border width with depth
 
@@ -188,7 +199,7 @@ GroupStyleFunc="@(_customizeGroupStyle ? GroupStyleFunc : null)">
 
     private string GetBorderColor(GroupDefinition<USState> item)
     {
-        var key = item.Grouping.Key.ToString();
+        var key = item.Grouping.Key?.ToString();
 
         // Primary level (Industry)
         if (item.Parent == null)
@@ -229,11 +240,6 @@ GroupStyleFunc="@(_customizeGroupStyle ? GroupStyleFunc : null)">
 
     bool _customizeGroupStyle;
 
-    protected override void OnInitialized()
-    {
-        _states = GetAllStates();
-    }
-
     void ExpandAllGroups()
     {
         dataGrid?.ExpandAllGroups();

diff --git a/src/MudBlazor/Components/DataGrid/DataGridGroupRow.razor b/src/MudBlazor/Components/DataGrid/DataGridGroupRow.razor
@@ -1,113 +1,113 @@
-@namespace MudBlazor
+@namespace MudBlazor
 @inherits MudComponentBase
 @typeparam T
 @using System.Diagnostics.CodeAnalysis
 @using MudBlazor.Utilities
 
 <tr class="mud-table-row">
-    <td class="@GroupClassname" colspan="1000" style="@GroupStylename">
-        <div style="display:flex; align-items:center;">
-            <MudIconButton Icon="@(Expanded ? Icons.Material.Filled.ExpandMore : Icons.Material.Filled.ChevronRight)" 
-                          OnClick="@(() => { Expanded = !Expanded; GroupDefinition.Expanded = Expanded; StateHasChanged(); })" />
-            @if (GroupDefinition.GroupTemplate == null)
-            {
-                <span style="font-weight:bold">@GroupDefinition.Title: @Items?.Key</span>
-            }
-            else
-            {
-                @GroupDefinition.GroupTemplate(GroupDefinition)
-            }
-        </div>
-    </td>
+   <td class="@GroupClassname" colspan="1000" style="@GroupStylename">
+       <div style="display:flex; align-items:center;">
+           <MudIconButton Icon="@(Expanded ? Icons.Material.Filled.ExpandMore : Icons.Material.Filled.ChevronRight)" 
+                         OnClick="@(() => { Expanded = !Expanded; GroupDefinition.Expanded = Expanded; StateHasChanged(); })" />
+           @if (GroupDefinition.GroupTemplate == null)
+           {
+               <span style="font-weight:bold">@GroupDefinition.Title: @Items?.Key</span>
+           }
+           else
+           {
+               @GroupDefinition.GroupTemplate(GroupDefinition)
+           }
+       </div>
+   </td>
 </tr>
 
 @if (Expanded)
 {
-    @if (_innerGroupItems != null && GroupDefinition?.InnerGroup != null)
-    {
-        @foreach (var group in _innerGroupItems)
-        {
-            <DataGridGroupRow T="T" Items="@group"
-                              GroupDefinition="GroupDefinition.InnerGroup"
-                              GroupClass="@GroupClass"
-                              GroupStyle="@GroupStyle"
-                              GroupClassFunc="@GroupClassFunc"
-                              GroupStyleFunc="@GroupStyleFunc"
-                              DataGrid="@DataGrid" />
-        }
-    }
-    else
-    {
-        <MudVirtualize @ref="@_mudVirtualize" ItemsProvider="@DataGrid?.VirtualItemsProvider" 
-                       Enabled="@(DataGrid?.Virtualize ?? false)" 
-                       Items="@(Items?.Select((item, index) => new IndexBag<T>(index, item)).ToList())" 
-                       OverscanCount="@(DataGrid?.OverscanCount ?? 0)" 
-                       ItemSize="@(DataGrid?.ItemSize ?? 50)" Context="itemBag">
-            <Placeholder>
-                @if (DataGrid?.RowLoadingContent != null)
-                {
-                    @DataGrid.RowLoadingContent
-                }
-                else
-                {
-                    <tr class="mud-table-row">
-                        <td class="mud-table-cell" colspan="1000">
-                            Loading...
-                        </td>
-                    </tr>
-                }
-            </Placeholder>
-            <ChildContent>
-                @{
-                    var rowClass = new CssBuilder(DataGrid.RowClass).AddClass(DataGrid.RowClassFunc?.Invoke(itemBag.Item, itemBag.Index)).Build();
-                    var rowStyle = new StyleBuilder().AddStyle(DataGrid.RowStyle).AddStyle(DataGrid.RowStyleFunc?.Invoke(itemBag.Item, itemBag.Index)).Build();
-                }
-                    <tr class="mud-table-row @rowClass" Style="@rowStyle" @key="itemBag.Item"
-                        @onclick="@((args) => DataGrid.OnRowClickedAsync(args, itemBag.Item, itemBag.Index))"
-                        @oncontextmenu="@((args) => DataGrid.OnContextMenuClickedAsync(args, itemBag.Item, itemBag.Index))"
-                        @oncontextmenu:preventDefault="@(DataGrid.RowContextMenuClick.HasDelegate)">
-                        <CascadingValue Value="@DataGrid.Validator" IsFixed="true">
-                            @foreach (var column in DataGrid.RenderedColumns)
-                            {
-                                if (!column.HiddenState.Value)
-                                {
-                                    DataGrid.Cell(column, itemBag.Item);
-                                }
-                            }
-                        </CascadingValue>
-                    </tr>
-                @if (DataGrid.ChildRowContent != null && (DataGrid._openHierarchies.Contains(itemBag.Item) || !DataGrid.HasHierarchyColumn))
-                {
-                                                                <tr class="mud-table-row">
-                                                                    <td class="mud-table-cell mud-table-child-content" colspan="1000">
-                            @DataGrid.ChildRowContent(new CellContext<T>(DataGrid, itemBag.Item))
-                                                                    </td>
-                                                                </tr>
-                }
-            </ChildContent>
-            <NoRecordsContent>
-                <tr>
-                    <th colspan="1000" class="mud-table-empty-row">
-                        <div Class="my-3">
-                            @if (DataGrid?.NoRecordsContent != null)
-                            {
-                                @DataGrid.NoRecordsContent
-                            }
-                            else
-                            {
-                                <span>No Records Found</span>
-                            }
-                        </div>
-                    </th>
-                </tr>
-            </NoRecordsContent>
-        </MudVirtualize>
+   @if (_innerGroupItems != null && GroupDefinition?.InnerGroup != null)
+   {
+       @foreach (var group in _innerGroupItems)
+       {
+           <DataGridGroupRow T="T" Items="@group"
+                             GroupDefinition="GroupDefinition.InnerGroup"
+                             GroupClass="@GroupClass"
+                             GroupStyle="@GroupStyle"
+                             GroupClassFunc="@GroupClassFunc"
+                             GroupStyleFunc="@GroupStyleFunc"
+                             DataGrid="@DataGrid" />
+       }
+   }
+   else
+   {
+       <MudVirtualize @ref="@_mudVirtualize" ItemsProvider="@DataGrid?.VirtualItemsProvider" 
+                      Enabled="@(DataGrid?.Virtualize ?? false)" 
+                      Items="@(Items?.Select((item, index) => new IndexBag<T>(index, item)).ToList())" 
+                      OverscanCount="@(DataGrid?.OverscanCount ?? 0)" 
+                      ItemSize="@(DataGrid?.ItemSize ?? 50)" Context="itemBag">
+           <Placeholder>
+               @if (DataGrid?.RowLoadingContent != null)
+               {
+                   @DataGrid.RowLoadingContent
+               }
+               else
+               {
+                   <tr class="mud-table-row">
+                       <td class="mud-table-cell" colspan="1000">
+                           Loading...
+                       </td>
+                   </tr>
+               }
+           </Placeholder>
+           <ChildContent>
+               @{
+                   var rowClass = new CssBuilder(DataGrid.RowClass).AddClass(DataGrid.RowClassFunc?.Invoke(itemBag.Item, itemBag.Index)).Build();
+                   var rowStyle = new StyleBuilder().AddStyle(DataGrid.RowStyle).AddStyle(DataGrid.RowStyleFunc?.Invoke(itemBag.Item, itemBag.Index)).Build();
+               }
+                   <tr class="mud-table-row @rowClass" Style="@rowStyle" @key="itemBag.Item"
+                       @onclick="@((args) => DataGrid.OnRowClickedAsync(args, itemBag.Item, itemBag.Index))"
+                       @oncontextmenu="@((args) => DataGrid.OnContextMenuClickedAsync(args, itemBag.Item, itemBag.Index))"
+                       @oncontextmenu:preventDefault="@(DataGrid.RowContextMenuClick.HasDelegate)">
+                       <CascadingValue Value="@DataGrid.Validator" IsFixed="true">
+                           @foreach (var column in DataGrid.RenderedColumns)
+                           {
+                               if (!column.HiddenState.Value)
+                               {
+                                   DataGrid.Cell(column, itemBag.Item);
+                               }
+                           }
+                       </CascadingValue>
+                   </tr>
+               @if (DataGrid.ChildRowContent != null && (DataGrid._openHierarchies.Contains(itemBag.Item) || !DataGrid.HasHierarchyColumn))
+               {
+                                                               <tr class="mud-table-row">
+                                                                   <td class="mud-table-cell mud-table-child-content" colspan="1000">
+                           @DataGrid.ChildRowContent(new CellContext<T>(DataGrid, itemBag.Item))
+                                                                   </td>
+                                                               </tr>
+               }
+           </ChildContent>
+           <NoRecordsContent>
+               <tr>
+                   <th colspan="1000" class="mud-table-empty-row">
+                       <div Class="my-3">
+                           @if (DataGrid?.NoRecordsContent != null)
+                           {
+                               @DataGrid.NoRecordsContent
+                           }
+                           else
+                           {
+                               <span>No Records Found</span>
+                           }
+                       </div>
+                   </th>
+               </tr>
+           </NoRecordsContent>
+       </MudVirtualize>
 
-        @if (Items != null && DataGrid != null)
-        {
-            <tr class="mud-table-row">
-                @DataGrid.FooterCells(Items)
-            </tr>
-        }
-    }
+       @if (Items != null && DataGrid != null)
+       {
+           <tr class="mud-table-row">
+               @DataGrid.FooterCells(Items)
+           </tr>
+       }
+   }
 }
diff --git a/src/MudBlazor/Components/DataGrid/DataGridGroupRow.razor.cs b/src/MudBlazor/Components/DataGrid/DataGridGroupRow.razor.cs
@@ -1,9 +1,10 @@
-// Copyright (c) MudBlazor 2021
+// Copyright (c) MudBlazor 2021
 // MudBlazor licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
 using System.Diagnostics.CodeAnalysis;
 using Microsoft.AspNetCore.Components;
+using MudBlazor.State;
 using MudBlazor.Utilities;
 
 #nullable enable
@@ -30,6 +31,11 @@ public partial class DataGridGroupRow<[DynamicallyAccessedMembers(DynamicallyAcc
         private IEnumerable<IGrouping<object, T>>? _innerGroupItems = null;
         private MudVirtualize<IndexBag<T>>? _mudVirtualize;
 
+        public DataGridGroupRow()
+        {
+            // TODO make sure Expanded is somehow bindable from GroupExpanded property
+        }
+
         protected string GroupClassname => new CssBuilder("mud-table-cell")
             .AddClass("mud-datagrid-group")
             .AddClass($"mud-table-row-group-indented-{(GroupDefinition.Indentation ? Math.Min(GroupDefinition.Level, 5) : 0)}")
@@ -58,7 +64,7 @@ public partial class DataGridGroupRow<[DynamicallyAccessedMembers(DynamicallyAcc
         /// The groups and items within this grouping.
         /// </summary>
         [Parameter]
-        public IGrouping<object, T>? Items { get; set; }
+        public IGrouping<object, T> Items { get; set; }
 
         [Parameter]
         public string? GroupClass { get; set; }
@@ -84,12 +90,11 @@ protected override void OnInitialized()
             {
                 Expanded = GroupDefinition.Expanded;
             }
+        }
 
-            // Process inner groups if they exist
-            if (Items != null && GroupDefinition?.InnerGroup != null)
-            {
-                _innerGroupItems = Items.GroupBy(GroupDefinition.InnerGroup.Selector);
-            }
+        private async Task OnExpandedChangeHandlerAsync(ParameterChangedEventArgs<bool> args)
+        {
+            await Task.CompletedTask;
         }
     }
 }
diff --git a/src/MudBlazor/Components/DataGrid/GroupDefinition.cs b/src/MudBlazor/Components/DataGrid/GroupDefinition.cs
@@ -15,6 +15,11 @@ public class GroupDefinition<T>
 {
     private GroupDefinition<T>? _innerGroup;
 
+    /// <summary>
+    /// The LINQ definition of the grouping.
+    /// </summary>
+    public required IGrouping<object?, T> Grouping { get; set; }
+
     /// <summary>
     /// The function which selects items for this group.
     /// </summary>