TreeView - MudBlazor

Simple Tree View

content
- logo.png
- MudBlazor.svg
- Nuget.png
src
- MudBlazor
- MudBlazor.Docs
  wwwroot
  MudAppbarCorner.svg
  
  MudBlazorDocs.min.css

<MudTreeView T="string">
    <MudTreeViewItem Value='"content"'>
        <MudTreeViewItem Value='"logo.png"' />
        <MudTreeViewItem Value='"MudBlazor.svg"' />
        <MudTreeViewItem Value='"Nuget.png"' />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"src"'>
        <MudTreeViewItem Value='"MudBlazor"' />
        <MudTreeViewItem Value='"MudBlazor.Docs"'>
            <MudTreeViewItem Value='"wwwroot"'>
                <MudTreeViewItem Value='"MudAppbarCorner.svg"' />
                <MudTreeViewItem Value='"MudBlazorDocs.min.css"' />
            </MudTreeViewItem>
        </MudTreeViewItem>
    </MudTreeViewItem>
</MudTreeView>

Highlight TreeItem on mouse over

content
- logo.png
- MudBlazor.svg
- Nuget.png
src
- MudBlazor
- MudBlazor.Docs
  wwwroot
  MudAppbarCorner.svg
  
  MudBlazorDocs.min.css

<MudTreeView T="string" CanHover="true">
    <MudTreeViewItem Value='"content"'>
        <MudTreeViewItem Value='"logo.png"' />
        <MudTreeViewItem Value='"MudBlazor.svg"' />
        <MudTreeViewItem Value='"Nuget.png"' />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"src"'>
        <MudTreeViewItem Value='"MudBlazor"' />
        <MudTreeViewItem Value='"MudBlazor.Docs"'>
            <MudTreeViewItem Value='"wwwroot"'>
                <MudTreeViewItem Value='"MudAppbarCorner.svg"' />
                <MudTreeViewItem Value='"MudBlazorDocs.min.css"' />
            </MudTreeViewItem>
        </MudTreeViewItem>
    </MudTreeViewItem>
</MudTreeView>

Activate TreeItem on click (select and highlight a single item)

Use @bind-Activated on TreeViewItem to bind a single item.

content
- logo.png
- MudBlazor.svg
- Nuget.png
src
- MudBlazor
- MudBlazor.Docs
  wwwroot
  MudAppbarCorner.svg
  
  MudBlazorDocs.min.css

Activated item:

<MudTreeView CanActivate="true" @bind-ActivatedValue="ActivatedValue">
    <MudTreeViewItem Value='"content"'>
        <MudTreeViewItem Value='"logo.png"' />
        <MudTreeViewItem Value='"MudBlazor.svg"' />
        <MudTreeViewItem Value='"Nuget.png"' />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"src"'>
        <MudTreeViewItem Value='"MudBlazor"' />
        <MudTreeViewItem Value='"MudBlazor.Docs"'>
            <MudTreeViewItem Value='"wwwroot"'>
                <MudTreeViewItem Value='"MudAppbarCorner.svg"' />
                <MudTreeViewItem Value='"MudBlazorDocs.min.css"' />
            </MudTreeViewItem>
        </MudTreeViewItem>
    </MudTreeViewItem>
</MudTreeView>

<MudText Style="width: 100%" Typo="@Typo.subtitle1">Activated item: @ActivatedValue</MudText>

@code {
    string ActivatedValue { get; set; }
}

Selectable items

Use @bind-Selected on TreeViewItem to bind a single item.

Number of selected items: 0

<MudTreeView CanSelect="true" @bind-SelectedValues="SelectedValues">
    <MudTreeViewItem Value='"content"'>
        <MudTreeViewItem Value='"logo.png"' />
        <MudTreeViewItem Value='"MudBlazor.svg"' />
        <MudTreeViewItem Value='"Nuget.png"' />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"src"'>
        <MudTreeViewItem Value='"MudBlazor"' />
        <MudTreeViewItem Value='"MudBlazor.Docs"'>
            <MudTreeViewItem Value='"wwwroot"'>
                <MudTreeViewItem Value='"MudAppbarCorner.svg"' />
                <MudTreeViewItem Value='"MudBlazorDocs.min.css"' />
            </MudTreeViewItem>
        </MudTreeViewItem>
    </MudTreeViewItem>
</MudTreeView>

<MudText Style="width: 100%" Typo="@Typo.subtitle1">Number of selected items: @(SelectedValues?.Count ?? 0)</MudText>

@code {
    HashSet<string> SelectedValues { get; set; }
}

Expand-on-click

content
- logo.png
- MudBlazor.svg
- Nuget.png
src
- MudBlazor
- MudBlazor.Docs
  wwwroot
  MudAppbarCorner.svg
  
  MudBlazorDocs.min.css

<MudTreeView T="string" ExpandOnClick="true">
    <MudTreeViewItem Value='"content"'>
        <MudTreeViewItem Value='"logo.png"' />
        <MudTreeViewItem Value='"MudBlazor.svg"' />
        <MudTreeViewItem Value='"Nuget.png"' />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"src"'>
        <MudTreeViewItem Value='"MudBlazor"' />
        <MudTreeViewItem Value='"MudBlazor.Docs"'>
            <MudTreeViewItem Value='"wwwroot"'>
                <MudTreeViewItem Value='"MudAppbarCorner.svg"' />
                <MudTreeViewItem Value='"MudBlazorDocs.min.css"' />
            </MudTreeViewItem>
        </MudTreeViewItem>
    </MudTreeViewItem>
</MudTreeView>

TreeItem with icons

All Mail
Trash
Categories
- Social
- Updates
- Forums
- Promotions
History

<MudTreeView T="string">
    <MudTreeViewItem Value='"All Mail"' Icon="@Icons.Filled.Email" />
    <MudTreeViewItem Value='"Trash"' Icon="@Icons.Filled.Delete"  />
    <MudTreeViewItem Value='"Categories"' Icon="@Icons.Filled.Label" >
        <MudTreeViewItem Value='"Social"' Icon="@Icons.Filled.Group"  />
        <MudTreeViewItem Value='"Updates"' Icon="@Icons.Filled.Info"  />
        <MudTreeViewItem Value='"Forums"'  Icon="@Icons.Filled.QuestionAnswer" />
        <MudTreeViewItem Value='"Promotions"' Icon="@Icons.Filled.LocalOffer"  />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"History"' Icon="@Icons.Filled.Label"  />
</MudTreeView>

Dense TreeView

content
- logo.png
- MudBlazor.svg
- Nuget.png
src
- MudBlazor
- MudBlazor.Docs
  wwwroot
  MudAppbarCorner.svg
  
  MudBlazorDocs.min.css

<MudTreeView T="string" Dense="true">
    <MudTreeViewItem Value='"content"'>
        <MudTreeViewItem Value='"logo.png"' />
        <MudTreeViewItem Value='"MudBlazor.svg"' />
        <MudTreeViewItem Value='"Nuget.png"' />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"src"'>
        <MudTreeViewItem Value='"MudBlazor"' />
        <MudTreeViewItem Value='"MudBlazor.Docs"'>
            <MudTreeViewItem Value='"wwwroot"'>
                <MudTreeViewItem Value='"MudAppbarCorner.svg"' />
                <MudTreeViewItem Value='"MudBlazorDocs.min.css"' />
            </MudTreeViewItem>
        </MudTreeViewItem>
    </MudTreeViewItem>
</MudTreeView>

TreeViewItemTemplate Example

This example shows how to use ItemTemplate to automatically build the tree items according to a hierarchical data structure.

Activated item:

Sum of selected items: 0

<MudTreeView CanActivate="true" Items="TreeItems" CanSelect="true" @bind-ActivatedValue="ActivatedValue" @bind-SelectedValues="SelectedValues">
    <ItemTemplate>
        <MudTreeViewItem @bind-Expanded="@context.IsExpanded" Items="@context.TreeItems" Value="@context"
                         Icon="@context.Icon" Text="@context.Title" EndText="@context.Number?.ToString()" EndTextTypo="@Typo.caption" />
    </ItemTemplate>
</MudTreeView>

<div style="width: 100%">
    <MudText Typo="@Typo.subtitle1">Activated item: @(ActivatedValue?.Title)</MudText>
    <MudText Typo="@Typo.subtitle1">Sum of selected items: @GetSelectedSum()</MudText>
</div>

@code {
    private TreeItemData ActivatedValue { get; set; }

    private HashSet<TreeItemData> SelectedValues { get; set; }

    private HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();

    public class TreeItemData
    {
        public string Title { get; set; }

        public string Icon { get; set; }

        public int? Number { get; set; }

        public bool IsExpanded { get; set; }

        public HashSet<TreeItemData> TreeItems { get; set; }

        public TreeItemData(string title, string icon, int? number = null)
        {
            Title = title;
            Icon = icon;
            Number = number;
        }
    }

    protected override void OnInitialized()
    {
        TreeItems.Add(new TreeItemData("All Mail", Icons.Filled.Email));
        TreeItems.Add(new TreeItemData("Trash", Icons.Filled.Delete));
        TreeItems.Add(new TreeItemData("Categories", Icons.Filled.Label)
        {
            IsExpanded = true,
            TreeItems = new HashSet<TreeItemData>()
            {
                new TreeItemData("Social", Icons.Filled.Group, 90),
                new TreeItemData("Updates", Icons.Filled.Info, 2294),
                new TreeItemData("Forums", Icons.Filled.QuestionAnswer, 3566),
                new TreeItemData("Promotions", Icons.Filled.LocalOffer, 733)
            }
        });
        TreeItems.Add(new TreeItemData("History", Icons.Filled.Label));
    }

    public int GetSelectedSum()
    {
        return SelectedValues?.Sum(i => i.Number ?? 0) ?? 0;
    }
}

Custom Tree

When Content property is used, it will completely replace the default rendering of the MudTreeViewItem to use your own. Use Height or MaxHeight parameter to scroll the treeview.

.azure
.github
.vscode
content
src
- MudBlazor
- MudBlazor.Docs
  
  _Imports.razor
  
  compilerconfig.json
  
  MudBlazor.Docs.csproj
  
  NewFilesToBuild.txt
- MudBlazor.Docs.Client
- MudBlazor.Docs.Compiler
- MudBlazor.Docs.Server
- MudBlazor.UnitTests
- MudBlazor.UnitTests.Viewer
- .editorconfig
- MudBlazor.sln
History

<MudTreeView Items="@TreeItems" MaxHeight="500px" Width="350px">
    <ItemTemplate>
        <MudTreeViewItem @bind-Expanded="@context.IsExpanded" Items="@context.TreeItems">
            <Content>
                <MudTreeViewItemToggleButton @bind-Expanded="@context.IsExpanded" Visible="@context.HasChild" />
                <MudIcon Icon="@context.Icon" Class="ml-0 mr-2" Color="@Color.Default" />
                <MudText>@context.Text</MudText>
            </Content>
        </MudTreeViewItem>
    </ItemTemplate>
</MudTreeView>

@code {

    private HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();

    public class TreeItemData
    {
        public string Text { get; set; }

        public string Icon { get; set; }

        public bool IsExpanded { get; set; } = true;

        public bool HasChild => TreeItems != null && TreeItems.Count > 0;

        public HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();

        public TreeItemData(string text, string icon)
        {
            Text = text;
            Icon = icon;
        }
    }

    protected override void OnInitialized()
    {
        TreeItems.Add(new TreeItemData(".azure", Icons.Custom.Brands.MicrosoftAzure));
        TreeItems.Add(new TreeItemData(".github", Icons.Custom.Brands.GitHub));
        TreeItems.Add(new TreeItemData(".vscode", Icons.Custom.Brands.MicrosoftVisualStudio));
        TreeItems.Add(new TreeItemData("content", Icons.Custom.FileFormats.FileDocument));
        TreeItems.Add(new TreeItemData("src", Icons.Custom.FileFormats.FileCode)
        {
            TreeItems = new HashSet<TreeItemData>()
            {
                new TreeItemData("MudBlazor", Icons.Custom.Brands.MudBlazor),
                new TreeItemData("MudBlazor.Docs", Icons.Custom.FileFormats.FileDocument)
                {
                    TreeItems = new HashSet<TreeItemData>()
                    {
                        new TreeItemData("_Imports.razor", Icons.Filled.AlternateEmail),
                        new TreeItemData( "compilerconfig.json", Icons.Custom.FileFormats.FileImage),
                        new TreeItemData( "MudBlazor.Docs.csproj", Icons.Custom.Brands.MicrosoftVisualStudio),
                        new TreeItemData("NewFilesToBuild.txt" , Icons.Custom.FileFormats.FileDocument),
                    }
                },
                new TreeItemData("MudBlazor.Docs.Client", Icons.Filled.Folder),
                new TreeItemData("MudBlazor.Docs.Compiler", Icons.Filled.Folder),
                new TreeItemData("MudBlazor.Docs.Server", Icons.Filled.Folder),
                new TreeItemData("MudBlazor.UnitTests", Icons.Filled.Folder),
                new TreeItemData("MudBlazor.UnitTests.Viewer", Icons.Filled.Folder),
                new TreeItemData(".editorconfig", Icons.Custom.FileFormats.FileCode),
                new TreeItemData("MudBlazor.sln", Icons.Custom.Brands.MicrosoftVisualStudio)
            }
        });
        TreeItems.Add(new TreeItemData("History", Icons.Filled.Folder));
    }
}