RadzenTree parent checkboxes don't show indeterminate state when children are checked #1565

New Issue

claunia · 2026-01-29T17:55:27Z

claunia commented

2026-01-29 17:55:27 +00:00

Originally created by @overjt on GitHub (Jan 7, 2025).

Describe the bug
The RadzenTree component with checkboxes doesn't properly show the indeterminate state of parent nodes when child nodes are checked. When expanding "Electronics", then "Laptop" and checking "sub1", the parent checkboxes (Laptop and Electronics) should show an indeterminate state to indicate that a child item is selected, but they remain empty until a component refresh occurs.

To Reproduce
Steps to reproduce the behavior:

Create a RadzenTree with the following hierarchical data structure:

<RadzenTree AllowCheckBoxes="true" Style="width: 100%; height: 300px" Data=@ProductsList>
    <RadzenTreeLevel TextProperty="Name" ChildrenProperty="SubProducts"/>  
</RadzenTree>

Expand the "Electronics" node
Expand the "Laptop" node
Check the "sub1" checkbox
Observe that parent nodes ("Laptop" and "Electronics") don't show any indication of having a checked child

Expected behavior
When a child node is checked, all parent nodes should display an indeterminate state to indicate that some children are selected. This should happen immediately without requiring a component refresh.

Sample Code

Click to expand code

<RadzenTree AllowCheckBoxes="true"  Style="width: 100%; height: 300px" Data=@ProductsList>
    <RadzenTreeLevel TextProperty="Name" ChildrenProperty="SubProducts"/>  
</RadzenTree>

@code {
    public class Product
    {
        public string Name { get; set; }
        public decimal Price { get; set; }
        public List<Product> SubProducts { get; set; } = new List<Product>(); 
    }

    List<Product> ProductsList = new List<Product>
    {
        new Product
        {
            Name = "Electronics",
            SubProducts = new List<Product>
            {
                new Product 
                { 
                    Name = "Laptop", 
                    Price = 999.99m,
                    SubProducts = new List<Product> 
                    { 
                        new Product { Name = "sub1",  Price = 2 }, 
                        new Product { Name = "sub 2", Price = 3 } 
                    }
                },
                new Product 
                { 
                    Name = "Smartphone", 
                    Price = 599.99m,
                    SubProducts = new List<Product> 
                    { 
                        new Product { Name = "sub3",  Price = 2 }, 
                        new Product { Name = "sub 4", Price = 3 } 
                    }
                }
            }
        },
        new Product
        {
            Name = "Clothing",
            SubProducts = new List<Product>
            {
                new Product 
                { 
                    Name = "Jeans", 
                    Price = 49.99m,
                    SubProducts = new List<Product> 
                    { 
                        new Product { Name = "clothe1",  Price = 2 }, 
                        new Product { Name = "clothe2 ", Price = 3 } 
                    }
                },
                new Product 
                { 
                    Name = "T-Shirt", 
                    Price = 19.99m,
                    SubProducts = new List<Product> 
                    { 
                        new Product { Name = "clothe4", Price = 2 }, 
                        new Product { Name = "Clothe5", Price = 3 } 
                    }
                }
            }
        }
    };
}

Screenshots:

After checking "sub1" (parent nodes not showing indeterminate state):
After expanding another node (which triggers a refresh, parent nodes now correctly show indeterminate state):

Desktop:

OS: Windows 11 / macOS 15.1.1
Browser: Firefox 133.0.33 / Chrome 131.0.6778.205
Radzen Blazor Version: 5.7.3

Originally created by @overjt on GitHub (Jan 7, 2025). **Describe the bug** The RadzenTree component with checkboxes doesn't properly show the indeterminate state of parent nodes when child nodes are checked. When expanding "Electronics", then "Laptop" and checking "sub1", the parent checkboxes (Laptop and Electronics) should show an indeterminate state to indicate that a child item is selected, but they remain empty until a component refresh occurs. **To Reproduce** Steps to reproduce the behavior: 1. Create a RadzenTree with the following hierarchical data structure: ```csharp <RadzenTree AllowCheckBoxes="true" Style="width: 100%; height: 300px" Data=@ProductsList> <RadzenTreeLevel TextProperty="Name" ChildrenProperty="SubProducts"/> </RadzenTree> ``` 2. Expand the "Electronics" node 3. Expand the "Laptop" node 4. Check the "sub1" checkbox 5. Observe that parent nodes ("Laptop" and "Electronics") don't show any indication of having a checked child **Expected behavior** When a child node is checked, all parent nodes should display an indeterminate state to indicate that some children are selected. This should happen immediately without requiring a component refresh. **Sample Code** <details> <summary>Click to expand code</summary> ```csharp <RadzenTree AllowCheckBoxes="true" Style="width: 100%; height: 300px" Data=@ProductsList> <RadzenTreeLevel TextProperty="Name" ChildrenProperty="SubProducts"/> </RadzenTree> @code { public class Product { public string Name { get; set; } public decimal Price { get; set; } public List<Product> SubProducts { get; set; } = new List<Product>(); } List<Product> ProductsList = new List<Product> { new Product { Name = "Electronics", SubProducts = new List<Product> { new Product { Name = "Laptop", Price = 999.99m, SubProducts = new List<Product> { new Product { Name = "sub1", Price = 2 }, new Product { Name = "sub 2", Price = 3 } } }, new Product { Name = "Smartphone", Price = 599.99m, SubProducts = new List<Product> { new Product { Name = "sub3", Price = 2 }, new Product { Name = "sub 4", Price = 3 } } } } }, new Product { Name = "Clothing", SubProducts = new List<Product> { new Product { Name = "Jeans", Price = 49.99m, SubProducts = new List<Product> { new Product { Name = "clothe1", Price = 2 }, new Product { Name = "clothe2 ", Price = 3 } } }, new Product { Name = "T-Shirt", Price = 19.99m, SubProducts = new List<Product> { new Product { Name = "clothe4", Price = 2 }, new Product { Name = "Clothe5", Price = 3 } } } } } }; } ``` </details> **Screenshots:** 1. After checking "sub1" (parent nodes not showing indeterminate state): ![After checking sub1](https://github.com/user-attachments/assets/b9583317-00ed-415a-b25d-4f532da35b93) 2. After expanding another node (which triggers a refresh, parent nodes now correctly show indeterminate state): ![After refresh](https://github.com/user-attachments/assets/810fb515-4229-4b03-987d-c1e6a266b94a) **Desktop:** - OS: Windows 11 / macOS 15.1.1 - Browser: Firefox 133.0.33 / Chrome 131.0.6778.205 - Radzen Blazor Version: 5.7.3

claunia closed this issue

2026-01-29 17:55:27 +00:00

claunia commented

2026-01-29 17:55:28 +00:00

@enchev commented on GitHub (Jan 8, 2025):

Please provide runnable code demonstrating the issue. You can use our demos they are editable.

@enchev commented on GitHub (Jan 8, 2025): Please provide runnable code demonstrating the issue. You can use our demos they are editable.

claunia commented

2026-01-29 17:55:28 +00:00

@overjt commented on GitHub (Jan 8, 2025):

Please provide runnable code demonstrating the issue. You can use our demos they are editable.

In the issue description there is the collapsible "Sample Code", I'll paste it here again

<RadzenTree AllowCheckBoxes="true"  Style="width: 100%; height: 300px" Data=@ProductsList>
    <RadzenTreeLevel TextProperty="Name" ChildrenProperty="SubProducts"/>  
</RadzenTree>

@code {
    public class Product
    {
        public string Name { get; set; }
        public decimal Price { get; set; }
        public List<Product> SubProducts { get; set; } = new List<Product>(); 
    }

    List<Product> ProductsList = new List<Product>
    {
        new Product
        {
            Name = "Electronics",
            SubProducts = new List<Product>
            {
                new Product 
                { 
                    Name = "Laptop", 
                    Price = 999.99m,
                    SubProducts = new List<Product> 
                    { 
                        new Product { Name = "sub1",  Price = 2 }, 
                        new Product { Name = "sub 2", Price = 3 } 
                    }
                },
                new Product 
                { 
                    Name = "Smartphone", 
                    Price = 599.99m,
                    SubProducts = new List<Product> 
                    { 
                        new Product { Name = "sub3",  Price = 2 }, 
                        new Product { Name = "sub 4", Price = 3 } 
                    }
                }
            }
        },
        new Product
        {
            Name = "Clothing",
            SubProducts = new List<Product>
            {
                new Product 
                { 
                    Name = "Jeans", 
                    Price = 49.99m,
                    SubProducts = new List<Product> 
                    { 
                        new Product { Name = "clothe1",  Price = 2 }, 
                        new Product { Name = "clothe2 ", Price = 3 } 
                    }
                },
                new Product 
                { 
                    Name = "T-Shirt", 
                    Price = 19.99m,
                    SubProducts = new List<Product> 
                    { 
                        new Product { Name = "clothe4", Price = 2 }, 
                        new Product { Name = "Clothe5", Price = 3 } 
                    }
                }
            }
        }
    };
}

@overjt commented on GitHub (Jan 8, 2025): > Please provide runnable code demonstrating the issue. You can use our demos they are editable. In the issue description there is the collapsible "Sample Code", I'll paste it here again ```csharp <RadzenTree AllowCheckBoxes="true" Style="width: 100%; height: 300px" Data=@ProductsList> <RadzenTreeLevel TextProperty="Name" ChildrenProperty="SubProducts"/> </RadzenTree> @code { public class Product { public string Name { get; set; } public decimal Price { get; set; } public List<Product> SubProducts { get; set; } = new List<Product>(); } List<Product> ProductsList = new List<Product> { new Product { Name = "Electronics", SubProducts = new List<Product> { new Product { Name = "Laptop", Price = 999.99m, SubProducts = new List<Product> { new Product { Name = "sub1", Price = 2 }, new Product { Name = "sub 2", Price = 3 } } }, new Product { Name = "Smartphone", Price = 599.99m, SubProducts = new List<Product> { new Product { Name = "sub3", Price = 2 }, new Product { Name = "sub 4", Price = 3 } } } } }, new Product { Name = "Clothing", SubProducts = new List<Product> { new Product { Name = "Jeans", Price = 49.99m, SubProducts = new List<Product> { new Product { Name = "clothe1", Price = 2 }, new Product { Name = "clothe2 ", Price = 3 } } }, new Product { Name = "T-Shirt", Price = 19.99m, SubProducts = new List<Product> { new Product { Name = "clothe4", Price = 2 }, new Product { Name = "Clothe5", Price = 3 } } } } } }; } ```

claunia commented

2026-01-29 17:55:28 +00:00

@enchev commented on GitHub (Jan 8, 2025):

You need to bind CheckedValues as shown in our demo: https://blazor.radzen.com/tree-checkboxes?theme=material3

@enchev commented on GitHub (Jan 8, 2025): You need to bind CheckedValues as shown in our demo: https://blazor.radzen.com/tree-checkboxes?theme=material3 ![image](https://github.com/user-attachments/assets/317511c6-cb51-4cba-ace6-8ef2aca6463f)

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1565