Blazor
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

CheckBox in Blazor TreeView component

22 Jul 2021 / 2 minutes to read

The Blazor TreeView component allows you to check more than one node in TreeView without affecting the UI’s appearance by enabling the ShowCheckBox property. When this property is enabled, checkbox appears before each TreeView node text.

  • If one of the child nodes is not in a checked state, then the parent node will be in an intermediate state.
  • If all the child nodes are in checked state, then the parent node’s state will also be checked.
  • If a parent node is checked, then all the child nodes’ state will also be checked.

By default, the checkbox state of parent and child nodes are dependent on each other. If you need independent checked state, you can achieve it using the AutoCheck property.

Copied to clipboard
@using Syncfusion.Blazor.Navigations
<SfTreeView TValue="MusicAlbum" ShowCheckBox="true" AutoCheck="true">
<TreeViewFieldsSettings TValue="MusicAlbum" Id="Id" DataSource="@Albums" Text="Name" ParentID="ParentId" HasChildren="HasChild" Expanded="Expanded" IsChecked="IsChecked"></TreeViewFieldsSettings>
</SfTreeView>

@code{
public class MusicAlbum
{
    public int Id { get; set; }
    public int? ParentId { get; set; }
    public string Name { get; set; }
    public bool Expanded { get; set; }
    public bool? IsChecked { get; set; }
    public bool HasChild { get; set; }
}
List<MusicAlbum> Albums = new List<MusicAlbum>();
protected override void OnInitialized()
{
    base.OnInitialized();
    Albums.Add(new MusicAlbum
    {
        Id = 1,
        Name = "Discover Music",
        HasChild = true,
    });
    Albums.Add(new MusicAlbum
    {
        Id = 2,
        ParentId = 1,
        Name = "Hot Singles"
    });
    Albums.Add(new MusicAlbum
    {
        Id = 3,
        ParentId = 1,
        Name = "Rising Artists"
    });
    Albums.Add(new MusicAlbum
    {
        Id = 4,
        ParentId = 1,
        Name = "Live Music"
    });
    Albums.Add(new MusicAlbum
    {
        Id = 14,
        HasChild = true,
        Name = "MP3 Albums",
        Expanded = true,
        IsChecked = true
    });
    Albums.Add(new MusicAlbum
    {
        Id = 15,
        ParentId = 14,
        Name = "Rock"
    });
    Albums.Add(new MusicAlbum
    {
        Id = 16,
        Name = "Gospel",
        ParentId = 14,
    });
    Albums.Add(new MusicAlbum
    {
        Id = 17,
        ParentId = 14,
        Name = "Latin Music"
    });
    Albums.Add(new MusicAlbum
    {
        Id = 18,
        ParentId = 14,
        Name = "Jazz"
    });
}
}

Output be like the below.

TreeView Sample

Previous
Next