Duplicated
Last Updated: 13 Jan 2023 07:22 by ADMIN

Hello,

The problem is similar to https://feedback.telerik.com/blazor/1552955-child-treeview-items-not-checked-after-expand, but in this case, the TreeView is using load-on-demand and the OnExpand event. As soon as a checked parent is expanded, the child checkboxes are always unchecked.

Here is a test page. Expand the parent item, check it, collapse it and then expand it again. The child nodes will lose their checked state.

<TelerikTreeView Data="@FlatData"
                 OnExpand="@LoadChildren"
                 CheckBoxMode="@TreeViewCheckBoxMode.Multiple"
                 CheckChildren="true"
                 CheckParents="true"
                 @bind-CheckedItems="@CheckedItems"
                 @bind-ExpandedItems="@ExpandedItems">
</TelerikTreeView>

@code {
    List<TreeItem> FlatData { get; set; } = new List<TreeItem>();

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

    async Task LoadChildren(TreeViewExpandEventArgs args)
    {
        TreeItem currItem = args.Item as TreeItem;

        if (args.Expanded && !FlatData.Any(x => x.ParentId == currItem.Id))
        {
            if (currItem.Id == 1)
            {
                FlatData.Add(new TreeItem()
                {
                    Id = 4,
                    Text = "Child 1 of Parent 1",
                    ParentId = 1,
                    HasChildren = false
                });

                FlatData.Add(new TreeItem()
                {
                    Id = 5,
                    Text = "Child 2 of Parent 1",
                    ParentId = 1,
                    HasChildren = false
                });
            }
        }
    }

    protected override void OnInitialized()
    {
        FlatData = LoadFlat();
    }

    private List<TreeItem> LoadFlat()
    {
        FlatData.Add(new TreeItem()
        {
            Id = 1,
            Text = "Parent 1",
            ParentId = null,
            HasChildren = true
        });

        return FlatData;
    }

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

Duplicated
Last Updated: 01 Mar 2022 06:30 by ADMIN
Created by: Ivan
Comments: 0
Category: TreeView
Type: Bug Report
1

Public sample at https://demos.telerik.com/blazor-ui/treeview/checkboxes

Check parent Documents item:

Then collapse parent and expand them again:

 

Duplicated
Last Updated: 02 Mar 2020 13:27 by ADMIN

Add the following Razor component and run. Click around tree, especially from disclosure icon to node to 'plus' icon. Error will occur.

 

=====================================

@page "/poopy"


@using Microsoft.AspNetCore.Components
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.Blazor.Components.Button

<style>
    .k-mid:hover .showme {
        display: block;
    }

    .showme {
        display: none;
        margin-left: 10px;
    }

    .showhim:hover .showme {
        display: block;
    }
</style>


@using Telerik.Blazor.Components.TreeView

<TelerikTreeView Data="@TreeData">
    <TelerikTreeViewBindings>
        <TelerikTreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" HasChildrenField="HasChildren">
            <ItemTemplate>
                <div @onclick="@(_ => NodeClicked((context as TreeItem).Text))" style="cursor: pointer">@((context as TreeItem).Text)</div>
                <div class="showme" @onclick="SayHelloHandler" style="cursor: pointer">
                    <TelerikIcon IconName="@IconName.Plus" />
                </div>
            </ItemTemplate>
        </TelerikTreeViewBinding>
    </TelerikTreeViewBindings>
</TelerikTreeView>

@helloString

@code {
    MarkupString helloString;

    void NodeClicked(string node)
    {
        helloString = new MarkupString(node);
    }


    void SayHelloHandler()
    {
        string msg = $"Hello from <strong>Telerik Blazor</strong> at {DateTime.Now}.<br /> Now you can use C# to write front-end!";
        helloString = new MarkupString(msg);
    }


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

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

    protected override void OnInitialized()
    {
        LoadTreeData();
    }

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

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

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentIdValue = 1,
            HasChildren = false,
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentIdValue = 1,
            HasChildren = false,
            Expanded = true
        });

        TreeData = items;
    }
}

======================================

Microsoft.JSInterop.JSException

  HResult=0x80131500
  Message=Cannot read property 'scrollHeight' of null
TypeError: Cannot read property 'scrollHeight' of null
    at Object.r (https://localhost:44326/_content/telerik.ui.for.blazor.trial/js/telerik-blazor.js:1:1433)
    at https://localhost:44326/_framework/blazor.server.js:8:28347
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44326/_framework/blazor.server.js:8:28316)
    at https://localhost:44326/_framework/blazor.server.js:1:19148
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44326/_framework/blazor.server.js:1:19119)
    at e.processIncomingData (https://localhost:44326/_framework/blazor.server.js:1:17165)
    at e.connection.onreceive (https://localhost:44326/_framework/blazor.server.js:1:10276)
    at WebSocket.i.onmessage (https://localhost:44326/_framework/blazor.server.js:1:38027)
  Source=System.Private.CoreLib
  StackTrace:
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
   at Microsoft.JSInterop.JSRuntimeBase.<InvokeWithDefaultCancellation>d__13`1.MoveNext()
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
   at Telerik.Blazor.Components.TelerikAnimationContainerBase.<GetContentHeight>d__57.MoveNext()
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Telerik.Blazor.Components.TelerikAnimationContainerBase.<SetMaxHeight>d__56.MoveNext()
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_1(Object state)
   at System.Threading.QueueUserWorkItemCallback.<>c.<.cctor>b__6_0(QueueUserWorkItemCallback quwi)
   at System.Threading.ExecutionContext.RunForThreadPoolUnsafe[TState](ExecutionContext executionContext, Action`1 callback, TState& state)
   at System.Threading.QueueUserWorkItemCallback.Execute()
   at System.Threading.ThreadPoolWorkQueue.Dispatch()