Mudblazor MudDataGrid HierarchyColumn expand all rows

Question

I am using MubBlazor 6.11.0.

I want to Have a HierarchyColumn that is expanded when the user clicks the Expand all button or by default, is there a way to do this? Having GroupExpanded="true" only seems to work for Grouped columns and not just from HierarchyColumns

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudDataGrid  @ref="dataGrid" Items="@Elements"
             GroupExpanded="true">
    <Columns>
        <HierarchyColumn T="Element" />
        <PropertyColumn Property="x => x.Number" Title="Nr" />
    </Columns>
    <ChildRowContent>
        <MudCard>
            <MudCardContent>
                <MudText>This element is number @context.Item.Number</MudText>
            </MudCardContent>
        </MudCard>
    </ChildRowContent>
    <PagerContent>
        <MudDataGridPager T="Element" />
    </PagerContent>
</MudDataGrid>

<div class="d-flex flex-wrap mt-4">
    <MudButton OnClick="@ExpandAllGroups" Color="@Color.Primary">Expand All</MudButton>
    <MudButton OnClick="@CollapseAllGroups" Color="@Color.Primary">Collapse All</MudButton>
</div>


@code { 
    private IEnumerable<Element> Elements = new List<Element>();
    MudDataGrid<Element> dataGrid;

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }

  void ExpandAllGroups()
    {
        dataGrid?.ExpandAllGroups();
    }
        void CollapseAllGroups()
    {
        dataGrid?.CollapseAllGroups();
    }
}

Answer 1

There are a few options as it's not part of stock MudBlazor as of 7.8, however I'm not sure what is available on the v6 of MudBlazor so you might need to make sure they are available.

Use InitiallyExpandedFunc on the hierarchy column. Set a function that says whether it starts expanded or collapsed.

Use context.Actions.ToggleHierarchyVisibilityForItemAsync to toggle it somehow. Would have to get creative.

Use adamj93 answer, you'll have to code your "own" expand/collapse icon.

Follow this rabbit hole and see if you can find a better solution. https://github.com/MudBlazor/MudBlazor/issues/9681

Answer 2

Unfortunately this doesn't appear to be a feature of MudBlazor at the moment. Hopefully it is added in the future.

However, I did find a workaround that required a bit of creativity and (sadly) some CSS nonsense.

Here is a code snippet I created to demonstrate this workaround

<style>
    .mud-table-cell{
        padding:0!important
    }
    .mud-table-cell-with-padding{
        padding:20px!important
    }
</style>

<MudDataGrid T="State" Items="@States">
    <Columns>
        <PropertyColumn Property="x => x.Id" Title="Id" CellClass="mud-table-cell-with-padding" HeaderClass="mud-table-cell-with-padding"/>
        <PropertyColumn Property="x => x.Abbreviation" Title="Abbreviation" CellClass="mud-table-cell-with-padding" HeaderClass="mud-table-cell-with-padding"/>
    </Columns>

    <ChildRowContent>
        @if(_expanded)
        {
            <MudStack Style="width:100%; padding:20px">
                <MudText Typo="Typo.h6">@context.Item.Name</MudText>
            </MudStack>
        }
    </ChildRowContent>
</MudDataGrid>

<MudButton OnClick="@(() => _expanded = !_expanded)" Variant="Variant.Filled" Color="Color.Primary" Style="margin-top:10px">
    Expand/Hide All
</MudButton>

@code {
    private bool _expanded = true;

    public List<State> States = new()
    {
        new State
        {
            Id = 1,
            Abbreviation = "CA",
            Name = "California"
        },
        new State
        {
            Id = 2,
            Abbreviation = "FL",
            Name = "Florida"
        },
        new State
        {
            Id = 3,
            Abbreviation = "NY",
            Name = "New York"
        }
    };

    public class State
    {
        public int Id { get; set; }
        public string Abbreviation { get; set; } = "";
        public string Name { get; set; } = "";
    }
}

As you can see, I chose to simply not specify a HierarchyColumn and instead defined ChildRowContent without one. This row is shown by default, so if you don't care about ever hiding it you can call it a day and forget about the extraneous bits!

If you do want to hide it, sadly we have to engage in some CSS shenanigans and create a variable to hold the current expanded state. I did try to set a HeaderStyle on MudDataGrid, but that didn't work which is why I'm applying the padding class to each column.

You might notice that there's no HierarchyColumn button, but if you'd like to add one then you can probably see where to go from here. You could create it as an IconButton in a TemplateColumn and either create a new class or store a bool on your class that specifies if that row should be hidden.

Is it elegant? No. But it's the best I can come up with until an official HierarchyColumn prop is added!