Checkbox in Blazor Dropdown Tree Component

9 Jan 20246 minutes to read

The Dropdown Tree component allows you to check more than one item from the tree without affecting the UI’s appearance by enabling the ShowCheckBox property. When this property is enabled, checkbox appears before each item text in the popup.

Auto Check

By default, the checkbox state of the parent and child items in the Dropdown Tree will not be dependent over each other. If you need dependent checked state, then enable the AutoUpdateCheckState property.

• If one or more child items are not in the checked state, then the parent item will be in the intermediate state.

• If all the child items are checked, then the parent item will also be in the checked state.

• If a parent item is checked, then all the child items will also be changed to the checked state.

In the following example, the AutoUpdateCheckState property is enabled.

@using Syncfusion.Blazor.Navigations

<SfDropDownTree TItem="EmployeeData" TValue="string" Placeholder="Select an employee" Width="500px" ShowCheckBox="true" AutoUpdateCheckState="true">
        <DropDownTreeField TItem="EmployeeData" DataSource="Data" ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId"></DropDownTreeField>
</SfDropDownTree>

@code {
    List<EmployeeData> Data = new List<EmployeeData>
    {
        new EmployeeData() { Id = "1", Name = "Steven Buchanan", Job = "General Manager", HasChild = true, Expanded = true },
        new EmployeeData() { Id = "2", PId = "1", Name = "Laura Callahan", Job = "Product Manager", HasChild = true },
        new EmployeeData() { Id = "3", PId = "2", Name = "Andrew Fuller", Job = "Team Lead", HasChild = true },
        new EmployeeData() { Id = "4", PId = "3", Name = "Anne Dodsworth", Job = "Developer" },
        new EmployeeData() { Id = "10", PId = "3", Name = "Lilly", Job = "Developer" },
        new EmployeeData() { Id = "5", PId = "1", Name = "Nancy Davolio", Job = "Product Manager", HasChild = true },
        new EmployeeData() { Id = "6", PId = "5", Name = "Michael Suyama", Job = "Team Lead", HasChild = true },
        new EmployeeData() { Id = "7", PId = "6", Name = "Robert King", Job = "Developer" },
        new EmployeeData() { Id = "11", PId = "6", Name = "Mary", Job = "Developer" },
        new EmployeeData() { Id = "9", PId = "1", Name = "Janet Leverling", Job = "HR"}
    };

    class EmployeeData
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Job { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
        public string PId { get; set; }
    }
}

Select/Unselect All

The Dropdown Tree component has built-in support to select all the tree items using the checkbox in the header.

When the ShowSelectAll property is set to true, a checkbox will be displayed in the popup header that allows you to select or unselect all the tree items in the popup.

Also we can select all the tree items programmatically using the SelectAllAsync method.

We can unselect all the tree items programmatically using the SelectAllAsync method by passing the parameter as false.

In the following example, the ShowSelectAll property is enabled and SelectAllAsync method is used.

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons
 
<SfButton OnClick="SelectAllNode">Select all node</SfButton>
<SfButton OnClick="UnSelectAllNode">UnSelect all node</SfButton>

<div style="padding-top:20px">
<SfDropDownTree @ref="sfDropDownTree" TItem="EmployeeData" TValue="string" Placeholder="Select an employee" Width="500px"  ShowCheckBox ShowSelectAll>
<DropDownTreeField TItem="EmployeeData" DataSource="Data" ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId"></DropDownTreeField>
</SfDropDownTree>
</div>

 
@code {
    SfDropDownTree<string, EmployeeData>? sfDropDownTree;
    List<string> SelectedNode = new List<string>();
    List<EmployeeData> Data = new List<EmployeeData>
    {
        new EmployeeData() { Id = "1", Name = "Steven Buchanan", Job = "General Manager", HasChild = true, Expanded = true },
        new EmployeeData() { Id = "2", PId = "1", Name = "Laura Callahan", Job = "Product Manager", HasChild = true },
        new EmployeeData() { Id = "3", PId = "2", Name = "Andrew Fuller", Job = "Team Lead", HasChild = true },
        new EmployeeData() { Id = "4", PId = "3", Name = "Anne Dodsworth", Job = "Developer" },
        new EmployeeData() { Id = "10", PId = "3", Name = "Lilly", Job = "Developer" },
        new EmployeeData() { Id = "5", PId = "1", Name = "Nancy Davolio", Job = "Product Manager", HasChild = true },
        new EmployeeData() { Id = "6", PId = "5", Name = "Michael Suyama", Job = "Team Lead", HasChild = true },
        new EmployeeData() { Id = "7", PId = "6", Name = "Robert King", Job = "Developer" },
        new EmployeeData() { Id = "11", PId = "6", Name = "Mary", Job = "Developer" },
        new EmployeeData() { Id = "9", PId = "1", Name = "Janet Leverling", Job = "HR"}
    };
 
    async Task SelectAllNode()
    {
        await sfDropDownTree.SelectAllAsync();
    }

    async Task UnSelectAllNode()
    {
        await sfDropDownTree.SelectAllAsync(false);
    }
 
    class EmployeeData
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Job { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
        public string PId { get; set; }
    }
}