Basic
Basic TreeView, icon button with hover and click to expand sub items.
Getting Started
Installation
Components
Avatar
Button
<MudTreeView T="string"> <MudTreeViewItem Value="@("Getting Started")"> <MudTreeViewItem Value="@("Installation")" /> </MudTreeViewItem> <MudTreeViewItem Value="@("Components")"> <MudTreeViewItem Value="@("Avatar")" /> <MudTreeViewItem Value="@("Button")" /> </MudTreeViewItem> </MudTreeView>
Hoverable
content
logo.png
src
mudblazor.docs
mudblazor.docs.server
<MudPaper Width="300px" Elevation="0"> <MudTreeView T="string" CanHover="true"> <MudTreeViewItem Value="@("content")"> <MudTreeViewItem Value="@("logo.png")" /> </MudTreeViewItem> <MudTreeViewItem Value="@("src")"> <MudTreeViewItem Value="@("mudblazor.docs")" /> <MudTreeViewItem Value="@("mudblazor.docs.server")" /> </MudTreeViewItem> </MudTreeView> </MudPaper>
Dense
content
logo.png
src
mudblazor.docs
mudblazor.docs.server
<MudPaper Width="300px" Elevation="0"> <MudTreeView T="string" Dense="true" Hover="true"> <MudTreeViewItem Value="@("content")"> <MudTreeViewItem Value="@("logo.png")" /> </MudTreeViewItem> <MudTreeViewItem Value="@("src")"> <MudTreeViewItem Value="@("mudblazor.docs")" /> <MudTreeViewItem Value="@("mudblazor.docs.server")" /> </MudTreeViewItem> </MudTreeView> </MudPaper>
Expand
With ExpandOnClick
bool the whole item row can be clicked to expand/collapse the sub trees.
Applications
Terminal
Documents
MudBlazor
Api
Components
<MudTreeView T="string" ExpandOnClick="true"> <MudTreeViewItem Value="@("Applications")"> <MudTreeViewItem Value="@("Terminal")" /> </MudTreeViewItem> <MudTreeViewItem Value="@("Documents")"> <MudTreeViewItem Value="@("MudBlazor")"> <MudTreeViewItem Value="@("Api")" /> <MudTreeViewItem Value="@("Components")" /> </MudTreeViewItem> </MudTreeViewItem> </MudTreeView>
Expand on double click
With ExpandOnDoubleClick
, similar to ExpandOnClick, double clicking on the whole item row will expand/collapse the sub trees.
Additionally, OnDoubleClick
callback can be assigned to set a custom double click behaviour.
Applications
Terminal
Documents
MudBlazor
Api
Components
<MudTreeView T="string" ExpandOnDoubleClick="true"> <MudTreeViewItem Value="@("Applications")"> <MudTreeViewItem Value="@("Terminal")" /> </MudTreeViewItem> <MudTreeViewItem Value="@("Documents")"> <MudTreeViewItem Value="@("MudBlazor")"> <MudTreeViewItem Value="@("Api")" /> <MudTreeViewItem Value="@("Components")" /> </MudTreeViewItem> </MudTreeViewItem> </MudTreeView>
Icons
The icons and the color of the icon can be changed individualy per item.
All Mail
Drafts
Orders
Categories
Social
Updates
Forums
Spam
Trash
<MudTreeView T="string"> <MudTreeViewItem Value='"All Mail"' Icon="@Icons.Material.Filled.Email" /> <MudTreeViewItem Value='"Drafts"' Icon="@Icons.Material.Filled.Drafts" /> <MudTreeViewItem Value='"Orders"' Icon="@Icons.Material.Filled.Label" IconColor="Color.Success" /> <MudTreeViewItem Value='"Categories"' Icon="@Icons.Material.Filled.Label" IconColor="Color.Error" ExpandedIcon="@Icons.Material.Filled.ArrowRight"> <MudTreeViewItem Value='"Social"' Icon="@Icons.Material.Filled.Group" /> <MudTreeViewItem Value='"Updates"' Icon="@Icons.Material.Filled.Info" IconColor="Color.Warning" /> <MudTreeViewItem Value='"Forums"' Icon="@Icons.Material.Filled.QuestionAnswer" /> <MudTreeViewItem Value='"Spam"' Icon="@Icons.Material.Filled.LocalOffer" /> </MudTreeViewItem> <MudTreeViewItem Value='"Trash"' Icon="@Icons.Material.Filled.Delete" /> </MudTreeView>
Selection
Use @bind-SelectedValue
on the TreeView to select a single item.
.vscode
launch.json
tasks.json
content
logo.png
Selected item:
<MudPaper Width="300px" Elevation="0"> <MudTreeView @bind-SelectedValue="SelectedValue" Hover="true"> <MudTreeViewItem @bind-Expanded="" Value="@(".vscode")" Icon="@(folderOneExpanded ? Icons.Custom.Uncategorized.FolderOpen : Icons.Custom.Uncategorized.Folder)"> <MudTreeViewItem Value="@("launch.json")" Icon="@Icons.Custom.FileFormats.FileCode" /> <MudTreeViewItem Value="@("tasks.json")" Icon="@Icons.Custom.FileFormats.FileCode" /> </MudTreeViewItem> <MudTreeViewItem @bind-Expanded="" Value="@("content")" Icon="@(folderTwoExpanded ? Icons.Custom.Uncategorized.FolderOpen : Icons.Custom.Uncategorized.Folder)"> <MudTreeViewItem Value="@("logo.png")" Icon="@Icons.Custom.FileFormats.FileImage" /> </MudTreeViewItem> </MudTreeView> </MudPaper> <MudText Style="width: 100%" Typo="@Typo.subtitle1">Selected item: @SelectedValue</MudText>
@code { string SelectedValue { get; set; } bool folderOneExpanded; bool folderTwoExpanded; }
Selected Color
The color of the selected item can be changed with Color
property.
All Mail
Drafts
Orders
Categories
Social
Updates
Forums
Spam
Trash
<MudGrid> <MudItem xs="12" md="8" Class="my-auto"> <MudTreeView Color="Color" T="string" Hover="true" @bind-SelectedValue="SelectedValue"> <MudTreeViewItem Value='"All Mail"' Icon="@Icons.Material.Filled.Email" /> <MudTreeViewItem Value='"Drafts"' Icon="@Icons.Material.Filled.Drafts" /> <MudTreeViewItem Value='"Orders"' Icon="@Icons.Material.Filled.Label" /> <MudTreeViewItem Value='"Categories"' Icon="@Icons.Material.Filled.Label"> <MudTreeViewItem Value='"Social"' Icon="@Icons.Material.Filled.Group" /> <MudTreeViewItem Value='"Updates"' Icon="@Icons.Material.Filled.Info" /> <MudTreeViewItem Value='"Forums"' Icon="@Icons.Material.Filled.QuestionAnswer" /> <MudTreeViewItem Value='"Spam"' Icon="@Icons.Material.Filled.LocalOffer" /> </MudTreeViewItem> <MudTreeViewItem Value='"Trash"' Icon="@Icons.Material.Filled.Delete" /> </MudTreeView> </MudItem> <MudItem xs="12" md="4"> <MudSelect Label="Color" Dense="true" Margin="Margin.Dense" @bind-Value="Color"> <MudSelectItem T="Color" Value="Color.Primary">Primary</MudSelectItem> <MudSelectItem T="Color" Value="Color.Secondary">Secondary</MudSelectItem> <MudSelectItem T="Color" Value="Color.Tertiary">Tertiary</MudSelectItem> <MudSelectItem T="Color" Value="Color.Info">Info</MudSelectItem> <MudSelectItem T="Color" Value="Color.Success">Success</MudSelectItem> <MudSelectItem T="Color" Value="Color.Warning">Warning</MudSelectItem> <MudSelectItem T="Color" Value="Color.Error">Error</MudSelectItem> <MudSelectItem T="Color" Value="Color.Dark">Dark</MudSelectItem> </MudSelect> </MudItem> </MudGrid>
@code{ public Color Color { get; set; } = Color.Error; string SelectedValue { get; set; } }
Multiselect
If you set MultiSelection
to true, you can select multiple values and they are returned as HashSet<T>
via SelectedValues.
content
logo.png
src
mudblazor.docs
mudblazor.docs.server
wwwroot
robots.txt
favicon.ico
Number of selected items: 0
<MudTreeView MultiSelection="true" @bind-SelectedValues="SelectedValues"> <MudTreeViewItem Value="@("content")"> <MudTreeViewItem Value="@("logo.png")" /> </MudTreeViewItem> <MudTreeViewItem Value="@("src")"> <MudTreeViewItem Value="@("mudblazor.docs")" /> <MudTreeViewItem Value="@("mudblazor.docs.server")"> <MudTreeViewItem Value="@("wwwroot")"> <MudTreeViewItem Value="@("robots.txt")" /> <MudTreeViewItem Value="@("favicon.ico")" /> </MudTreeViewItem> </MudTreeViewItem> </MudTreeViewItem> </MudTreeView> <MudText Style="width: 100%" Typo="Typo.subtitle1" Class="mb-n2">Number of selected items: @(SelectedValues?.Count ?? 0)</MudText>
@code { HashSet<string> SelectedValues { get; set; } }
Multiselect Color
The color of the checkboxes when MultiSelection
is set to true can be changed with CheckBoxColor
property.
content
logo.png
src
mudblazor.docs
mudblazor.docs.server
wwwroot
robots.txt
favicon.ico
<MudGrid> <MudItem xs="12" md="8" Class="my-auto"> <MudTreeView T="string" CheckBoxColor="Color" MultiSelection="true"> <MudTreeViewItem Value="@("content")"> <MudTreeViewItem Value="@("logo.png")" /> </MudTreeViewItem> <MudTreeViewItem Value="@("src")"> <MudTreeViewItem Value="@("mudblazor.docs")" /> <MudTreeViewItem Value="@("mudblazor.docs.server")"> <MudTreeViewItem Value="@("wwwroot")"> <MudTreeViewItem Value="@("robots.txt")" /> <MudTreeViewItem Value="@("favicon.ico")" /> </MudTreeViewItem> </MudTreeViewItem> </MudTreeViewItem> </MudTreeView> </MudItem> <MudItem xs="12" md="4"> <MudSelect Label="Color" Dense="true" Margin="Margin.Dense" @bind-Value=""> <MudSelectItem T="Color" Value="Color.Default">Default</MudSelectItem> <MudSelectItem T="Color" Value="Color.Primary">Primary</MudSelectItem> <MudSelectItem T="Color" Value="Color.Secondary">Secondary</MudSelectItem> <MudSelectItem T="Color" Value="Color.Tertiary">Tertiary</MudSelectItem> <MudSelectItem T="Color" Value="Color.Info">Info</MudSelectItem> <MudSelectItem T="Color" Value="Color.Success">Success</MudSelectItem> <MudSelectItem T="Color" Value="Color.Warning">Warning</MudSelectItem> <MudSelectItem T="Color" Value="Color.Error">Error</MudSelectItem> <MudSelectItem T="Color" Value="Color.Dark">Dark</MudSelectItem> </MudSelect> </MudItem> </MudGrid>
@code{ public Color Color { get; set; } = Color.Error; HashSet<string> SelectedValues { get; set; } }
ItemTemplate
This example shows how to use ItemTemplate to automatically build the tree items according to a hierarchical data structure.
All Mail
Trash
Categories
Social
90Updates
2294Forums
3566Promotions
733
History
Activated item:
Sum of selected items: 0
<MudPaper Width="300px" Elevation="0"> <MudTreeView Items="TreeItems" MultiSelection="true" @bind-ActivatedValue="ActivatedValue" @bind-SelectedValues="SelectedValues"> <ItemTemplate> <MudTreeViewItem @bind-Expanded="@context.IsExpanded" Items="@context.TreeItems" Value="" Icon="@context.Icon" Text="@context.Title" EndText="@context.Number?.ToString()" EndTextTypo="@Typo.caption" /> </ItemTemplate> </MudTreeView> </MudPaper> <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.Material.Filled.Email)); TreeItems.Add(new TreeItemData("Trash", Icons.Material.Filled.Delete)); TreeItems.Add(new TreeItemData("Categories", Icons.Material.Filled.Label) { IsExpanded = true, TreeItems = new HashSet<TreeItemData>() { new TreeItemData("Social", Icons.Material.Filled.Group, 90), new TreeItemData("Updates", Icons.Material.Filled.Info, 2294), new TreeItemData("Forums", Icons.Material.Filled.QuestionAnswer, 3566), new TreeItemData("Promotions", Icons.Material.Filled.LocalOffer, 733) } }); TreeItems.Add(new TreeItemData("History", Icons.Material.Filled.Label)); } public int GetSelectedSum() { return SelectedValues?.Sum(i => i.Number ?? 0) ?? 0; } }
Server Side Data
Data can be loaded on demand with the use of ServerData
prop, the loading icon and its color can be changed with LoadingIcon
and LoadingIconColor
prop.
It can also be disabled for certain items with the CanExpand
property.
All Mail
Trash
Categories
History
<MudPaper Width="300px" Elevation="0"> <MudTreeView ServerData="LoadServerData" Items="TreeItems"> <ItemTemplate> <MudTreeViewItem Value="" Icon="@context.Icon" LoadingIconColor="Color.Info" CanExpand="@context.CanExpand" Text="@context.Title" EndText="@context.Number?.ToString()" EndTextTypo="@Typo.caption" /> </ItemTemplate> </MudTreeView> </MudPaper>
@code{ 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 CanExpand { get; set; } public HashSet<TreeItemData> TreeItems { get; set; } public TreeItemData(string title, string icon, int? number = null, bool canExpand = true) { Title = title; Icon = icon; Number = number; CanExpand = canExpand; } } protected override void OnInitialized() { TreeItems.Add(new TreeItemData("All Mail", Icons.Material.Filled.Email)); TreeItems.Add(new TreeItemData("Trash", Icons.Material.Filled.Delete)); TreeItems.Add(new TreeItemData("Categories", Icons.Material.Filled.Label) { TreeItems = new HashSet<TreeItemData>() { new TreeItemData("Social", Icons.Material.Filled.Group, 90), new TreeItemData("Updates", Icons.Material.Filled.Info, 2294), new TreeItemData("Forums", Icons.Material.Filled.QuestionAnswer, 3566), new TreeItemData("Promotions", Icons.Material.Filled.LocalOffer, 733) } }); TreeItems.Add(new TreeItemData("History", Icons.Material.Filled.Label, null, false)); } public async Task<HashSet<TreeItemData>> LoadServerData(TreeItemData parentNode) { await Task.Delay(500); return parentNode.TreeItems; } }
Custom Tree
When the Content
property is used, it will completely replace the default rendering of the MudTreeViewItem to use your own.
Use the Height
or MaxHeight
parameters 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
<MudPaper Width="350px" MaxHeight="500px" Class="overflow-y-auto" Elevation="0"> <MudTreeView Items=""> <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> </MudPaper>
@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.Material.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.Material.Filled.Folder), new TreeItemData("MudBlazor.Docs.Compiler", Icons.Material.Filled.Folder), new TreeItemData("MudBlazor.Docs.Server", Icons.Material.Filled.Folder), new TreeItemData("MudBlazor.UnitTests", Icons.Material.Filled.Folder), new TreeItemData("MudBlazor.UnitTests.Viewer", Icons.Material.Filled.Folder), new TreeItemData(".editorconfig", Icons.Custom.FileFormats.FileCode), new TreeItemData("MudBlazor.sln", Icons.Custom.Brands.MicrosoftVisualStudio) } }); TreeItems.Add(new TreeItemData("History", Icons.Material.Filled.Folder)); } }
Custom body content
Use the Body Content
instead of the Content
render fragment,
when you want your custom tree items, but still use the build-in icons and expansion buttons.
.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="" Hover="true" Width="100%"> <ItemTemplate Context="item"> <MudTreeViewItem Items="@item.TreeItems" Icon="@item.Icon"> <BodyContent> <div style="display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%"> <MudText Style="justify-self: start;">@item.Text</MudText> <div style="justify-self: end;"> <MudIconButton Icon="@Icons.Material.Filled.Edit" Size="Size.Medium" Color="Color.Inherit" /> <MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Medium" Color="Color.Inherit" /> </div> </div> </BodyContent> </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 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(".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.Material.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.Material.Filled.Folder), new TreeItemData("MudBlazor.Docs.Compiler", Icons.Material.Filled.Folder), new TreeItemData("MudBlazor.Docs.Server", Icons.Material.Filled.Folder), new TreeItemData("MudBlazor.UnitTests", Icons.Material.Filled.Folder), new TreeItemData("MudBlazor.UnitTests.Viewer", Icons.Material.Filled.Folder), new TreeItemData(".editorconfig", Icons.Custom.FileFormats.FileCode), new TreeItemData("MudBlazor.sln", Icons.Custom.Brands.MicrosoftVisualStudio) } }); TreeItems.Add(new TreeItemData("History", Icons.Material.Filled.Folder)); } }
Custom Checkbox Behavior
You can use the Content
property to support custom checkbox behavior such as automatically checking a parent item when all
children are selected.
Fruits
Apple
Banana
Orange
Pear
Pineapple
Grains
Barley
Oats
Rice
Vegetables
Carrot
Leek
Onion
Potato
<MudPaper Width="350px" MaxHeight="500px" Class="overflow-y-auto" Elevation="0"> <MudTreeView Items=""> <ItemTemplate> <MudTreeViewItem @bind-Expanded="@context.IsExpanded" Items="@context.TreeItems"> <Content> <MudTreeViewItemToggleButton @bind-Expanded="@context.IsExpanded" Visible="@context.HasChild" /> <MudCheckBox T="bool?" Checked="@(context.HasPartialChildSelection() ? null : context.IsChecked)" CheckedChanged="@((e) => CheckedChanged(context))"></MudCheckBox> <MudText>@context.Text</MudText> </Content> </MudTreeViewItem> </ItemTemplate> </MudTreeView> </MudPaper>
@code { private HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>(); public class TreeItemData { public TreeItemData Parent { get; set; } = null; public string Text { get; set; } public bool IsExpanded { get; set; } = false; public bool IsChecked { get; set; } = false; public bool HasChild => TreeItems != null && TreeItems.Count > 0; public HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>(); public TreeItemData(string text) { Text = text; } public void AddChild(string itemName) { TreeItemData item = new TreeItemData(itemName); item.Parent = this; this.TreeItems.Add(item); } public bool HasPartialChildSelection() { int iChildrenCheckedCount = (from c in TreeItems where c.IsChecked select c).Count(); return HasChild && iChildrenCheckedCount > 0 && iChildrenCheckedCount < TreeItems.Count(); } } protected void CheckedChanged(TreeItemData item) { item.IsChecked = !item.IsChecked; // checked status on any child items should mirrror this parent item if (item.HasChild) { foreach (TreeItemData child in item.TreeItems) { child.IsChecked = item.IsChecked; } } // if there's a parent and all children are checked/unchecked, parent should match if (item.Parent != null) { item.Parent.IsChecked = !item.Parent.TreeItems.Any(i => !i.IsChecked); } } protected override void OnInitialized() { TreeItemData itemFruits = new TreeItemData("Fruits"); TreeItemData itemVeg = new TreeItemData("Vegetables"); TreeItemData itemGrains = new TreeItemData("Grains"); itemFruits.AddChild("Apple"); itemFruits.AddChild("Banana"); itemFruits.AddChild("Orange"); itemFruits.AddChild("Pear"); itemFruits.AddChild("Pineapple"); itemGrains.AddChild("Barley"); itemGrains.AddChild("Oats"); itemGrains.AddChild("Rice"); itemVeg.AddChild("Carrot"); itemVeg.AddChild("Leek"); itemVeg.AddChild("Onion"); itemVeg.AddChild("Potato"); TreeItems.Add(itemFruits); TreeItems.Add(itemGrains); TreeItems.Add(itemVeg); } }