Completed
Last Updated: 21 Mar 2023 13:29 by ADMIN
Release 4.2.0 (26/04/2023)
RSR
Created on: 23 Jul 2021 07:27
Category: TreeView
Type: Bug Report
5
Indeterminate checkboxes show when all child checkboxes are checked or unchecked

The TreeView has CheckBoxMode="@TreeViewCheckBoxMode.Multiple" and CheckParents="true". Only some checkboxes are checked and there are parent checkboxes in indeterminate state.

When I try to clear all checked checkboxes, the indeterminate checkboxes are not cleared and maintain their state.

ADMIT EDIT:

Initially, this bug report was about unchecking all child items. However, it appears that the opposite behavior exists too - if all children are checked programmatically, the parent checkbox will show as indeterminate. In this case, check the parent explicitly as well.

3 comments
Adam
Posted on: 21 Jul 2022 12:25

This workaround failed for me under different scenarios I was testing out.  After reading these links from stackoverflow and the links within I was able to solve my issue:

https://stackoverflow.com/questions/68901935/reset-input-field-value-if-value-is-invalid-in-blazor

https://stackoverflow.com/questions/68905591/prevent-checkbox-or-inputcheckbox-to-be-unchecked-blazor

 

The workaround I used was to do it like this with the await Task.Yield:

    private async Task UncheckAll()
    {
        // workaround start
        CheckedItems = TreeViewData;
        await Task.Yield();
        // workaround end
        CheckedItems = new List<object>();
    }
Andrea
Posted on: 21 Apr 2022 08:34

I encountered the same issue... this not only when I clear but also when I load a different list of checked items.

The solution didn't worked for me untill I changed 

await Task.Delay(1);

in

StateHasChanged();

Hope this helps anyone who has the same issue...

Would be nice to have this solved and avoid this workaround.

 

ADMIN
Dimo
Posted on: 23 Jul 2021 07:52

Hi,

Indeed, we reproduced the issue successfully and confirm the bug.

Fortunately, there is a workaround that you can use before we fix it:

  1. Check all items, so that there are no indeterminate checkboxes.
  2. Await a small delay.
  3. Uncheck all items.
<TelerikButton OnClick="@UncheckAll">Uncheck all</TelerikButton>

<TelerikTreeView Data="@TreeViewData"
                 CheckBoxMode="@TreeViewCheckBoxMode.Multiple"
                 @bind-CheckedItems="@CheckedItems"
                 CheckParents="true"
                 CheckChildren="true" />

@code {

    public IEnumerable<object> CheckedItems { get; set; } = new List<object>();

    public IEnumerable<TreeItem> TreeViewData { get; set; }

    private async Task UncheckAll()
    {
        // workaround start
        CheckedItems = TreeViewData;
        await Task.Delay(1);
        // workaround end
        CheckedItems = new List<object>();
    }

    protected override void OnInitialized()
    {
        LoadFlatData();

        var precheckedItem = TreeViewData.Where(x => x.Id == 2);

        CheckedItems = new List<object>(precheckedItem);
    }

    private void LoadFlatData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentId = null,
            HasChildren = true,
            Icon = "folder",
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentId = 1,
            HasChildren = false,
            Icon = "brush"
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentId = 1,
            HasChildren = false,
            Icon = "folder"
        });

        TreeViewData = items;
    }

    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentId { get; set; }
        public bool HasChildren { get; set; }
        public string Icon { get; set; }
        public bool Expanded { get; set; }
    }
}

 

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.