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:

 

Declined
Last Updated: 20 Apr 2022 13:03 by ADMIN

Steps to reproduce:

  1. On Windows 11, go to Settings > Accessibility > Contrast themes and enable one of the themes (e.g., Aquatic or Desert).
  2. Try selecting or tabbing through a Blazor Telerik Tree View.

Expected: I should be able to clearly tell what element I'm currently focused on.

Actual: There is no focus indicator.

Completed
Last Updated: 21 Mar 2023 13:06 by ADMIN
Release 4.2.0 (26/04/2023)

If the application expands TreeView items programmatically, and then the user tries to select multiple items, an exception will occur.

The issue is a regression that occurred in version 3.0.0. A possible workaround is to Rebind() the TreeView with a small delay after programmatic item expansion.

<TelerikTreeView @ref="@TreeViewRef"
                 Data="@FlatData"
                 @bind-ExpandedItems="@ExpandedItems"
                 SelectionMode="@TreeViewSelectionMode.Multiple"
                 SelectedItems="@SelectedItems"
                 SelectedItemsChanged="@((IEnumerable<object> items) => SelectedItemsHandler(items))" />

<TelerikButton OnClick="@ExpandAll">Expand All</TelerikButton>
<TelerikButton OnClick="@CollapseAll">Collapse All</TelerikButton>

@code {
    public TelerikTreeView TreeViewRef { get; set; }
    public IEnumerable<TreeItem> FlatData { get; set; }
    public IEnumerable<object> SelectedItems { get; set; } = new List<object>();
    public IEnumerable<object> ExpandedItems { get; set; } = new List<object>();

    async Task ExpandAll()
    {
        ExpandedItems = FlatData.Where(x => x.HasChildren == true);

        await Task.Delay(1);
        TreeViewRef.Rebind();
    }

    void CollapseAll()
    {
        ExpandedItems = new List<object>();
        SelectedItems = new List<object>();
    }

    void SelectedItemsHandler(IEnumerable<object> items)
    {
        SelectedItems = items;
    }
    protected override async void OnInitialized()
    {
        FlatData = LoadFlat();
    }

    int TreeLevels { get; set; } = 3;
    int ItemsPerLevel { get; set; } = 3;
    int IdCounter { get; set; } = 1;
    List<TreeItem> LoadFlat()
    {
        List<TreeItem> items = new List<TreeItem>();
        PopulateTreeItems(items, null, 1);
        return items;
    }
    void PopulateTreeItems(List<TreeItem> items, int? parentId, int level)
    {
        for (int i = 1; i <= ItemsPerLevel; i++)
        {
            var itemId = IdCounter++;
            items.Add(new TreeItem()
            {
                Id = itemId,
                Text = $"Level {level} Item {i} Id {itemId}",
                ParentId = parentId,
                HasChildren = level < TreeLevels
            });
            if (level < TreeLevels)
            {
                PopulateTreeItems(items, itemId, level + 1);
            }
        }
    }

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


Completed
Last Updated: 09 Nov 2020 07:29 by ADMIN
Release 2.20.0

If i collapse/expand any item of treeview then each item of collapsed/expanded branch will be rendered twice.

Clicking in or away from the treeview re-renders all nodes too.

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; }
    }
}

Unplanned
Last Updated: 19 Nov 2024 15:36 by Hannes

The TreeView exposes drag events that allow me to detect when the user drags an item and to get the information for the dragged item. I want to be able to drag that item outside of the TreeView and drop it in my custom target.

I am aware that I should handle the custom drop functionality. However, the @ondrop event of my custom target currently does not fire for the tree item: https://blazorrepl.telerik.com/QIblPZvd0412k6U128.

===

ADMIN EDIT

===

For the time being, you may implement the following custom approach:

  • Use the ItemTemplate.
  • Wrap the item text in a container.
  • Enable the draggable attribute of that container. Disable the Draggable parameter of the Treeview, so these properties do not interfere with each other. This approach overrides the built-in behavior of the drag-and-drop functionality, so it cannot be enabled at the same time.  If you want to keep the built-in draggable functionality, implement aa suitable UI that toggles that during runtime.
  • Handle the ondragstart event of the container.

Here is a basic sample showcasing the approach: https://blazorrepl.telerik.com/QIFbvZFA00bHZbsj23.

Unplanned
Last Updated: 26 Oct 2023 08:23 by Michael
Try to update the node icon/text via the OnItemClick event. Every second click on a child node fails the update.
Unplanned
Last Updated: 11 Jun 2024 10:55 by Randeep
Created by: Randeep
Comments: 0
Category: TreeView
Type: Feature Request
1

I want to use a separate drag-and-drop mode in the TreeView similar to how the Drag column works for the rows in the Grid component. 

The main reason I am unable to use the current drag-and-drop behavior is that I cannot use an input component as part of the TreeView node.

Completed
Last Updated: 19 Nov 2024 07:12 by ADMIN
Release 2025 Q1 (Feb)

This REPL test page is based on the TreeView Filtering demo, but with added checkboxes.

  1. Check an item.
  2. Filter the TreeView data, so that the checked item is no longer present.
  3. Try to check another item.
  4. The TreeView will throw a NullReferenceException.

A possible workaround is to also filter (or clear) the collection that is bound to the CheckedItems parameter of the TreeView.

 
Declined
Last Updated: 04 Sep 2024 14:30 by ADMIN

Steps to reproduce:

  1. Open this edited Telerik REPL link, the original link came from TreeView - CheckBoxes, and I only changed "CheckedItems = Data.Skip(1).Take(2)" to "CheckedItems = Data.Skip(1).Take(4)".
  2. Run

Expected: Both the parent "Documents" and its 4 children should be checked.

Actual: Only the 4 children are checked; the parent remains unchecked.

This only happens when all children are checked. However, if not all children items are checked, the parent will also be checked.

Completed
Last Updated: 06 Apr 2023 11:10 by ADMIN
Release 4.2.0 (04/26/2023)
Created by: Jan
Comments: 4
Category: TreeView
Type: Bug Report
1

Hello,

I have a TelerikTreeView with about 2000 items bound to an ObservableCollection (Data). I use SelectedItems, SelectedItemsChanged, SelectionMode multitple and @bind-ExpandedItems.

When my users manually expand the nodes of the treeview, everything is fine and the operation of the treeview works smoothly. Loading UI components based on user selection takes less than 50ms.

As soon as I set the "ExpandedItems" collection from code (according to your treeview demo), the whole treeview operation becomes painfully slow with waiting times of 2 to 4 SECONDS for selection and expansion. Already expanding from code takes several seconds.

As soon as I reset the ExpandedItems from code and collapse the complete tree, the treeview is usable again without delays.


Completed
Last Updated: 27 Oct 2021 08:50 by ADMIN
Release 2.28.0

Stack trace:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Unknown edit type: 0
      Error: Unknown edit type: 0
          at e.applyEdits (https://localhost:44363/_framework/blazor.webassembly.js:1:15008)
          at e.updateComponent (https://localhost:44363/_framework/blazor.webassembly.js:1:12880)
          at Object.t.renderBatch (https://localhost:44363/_framework/blazor.webassembly.js:1:1704)
          at Object.window.Blazor._internal.renderBatch (https://localhost:44363/_framework/blazor.webassembly.js:1:34784)
          at _mono_wasm_invoke_js_unmarshalled (https://localhost:44363/_framework/wasm/dotnet.3.2.0.js:1:172099)
          at wasm_invoke_iiiiii (<anonymous>:wasm-function[3160]:0x9b33d)
          at icall_trampoline_dispatch (<anonymous>:wasm-function[5777]:0xfe711)
          at mono_wasm_interp_to_native_trampoline (<anonymous>:wasm-function[4607]:0xca81d)
          at ves_pinvoke_method (<anonymous>:wasm-function[3209]:0x9cd40)
          at interp_exec_method (<anonymous>:wasm-function[1120]:0x2598d)
Microsoft.JSInterop.JSException: Unknown edit type: 0
Error: Unknown edit type: 0
    at e.applyEdits (https://localhost:44363/_framework/blazor.webassembly.js:1:15008)
    at e.updateComponent (https://localhost:44363/_framework/blazor.webassembly.js:1:12880)
    at Object.t.renderBatch (https://localhost:44363/_framework/blazor.webassembly.js:1:1704)
    at Object.window.Blazor._internal.renderBatch (https://localhost:44363/_framework/blazor.webassembly.js:1:34784)
    at _mono_wasm_invoke_js_unmarshalled (https://localhost:44363/_framework/wasm/dotnet.3.2.0.js:1:172099)
    at wasm_invoke_iiiiii (<anonymous>:wasm-function[3160]:0x9b33d)
    at icall_trampoline_dispatch (<anonymous>:wasm-function[5777]:0xfe711)
    at mono_wasm_interp_to_native_trampoline (<anonymous>:wasm-function[4607]:0xca81d)
    at ves_pinvoke_method (<anonymous>:wasm-function[3209]:0x9cd40)
    at interp_exec_method (<anonymous>:wasm-function[1120]:0x2598d)
  at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,T2,TResult] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x3ae01e8 + 0x00046> in <filename unknown>:0 
  at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TResult] (System.String identifier, T0 arg0, T1 arg1) <0x3ae0108 + 0x00014> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync (Microsoft.AspNetCore.Components.RenderTree.RenderBatch& batch) <0x3ae0010 + 0x0001e> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x387e448 + 0x000f2> in <filename unknown>:0

Unplanned
Last Updated: 18 Jan 2022 13:37 by ADMIN
Created by: Christian
Comments: 1
Category: TreeView
Type: Bug Report
0

I'm trying to use a draggable TreeView inside a Window. I think the Window is interfering with the display of the red placement arrow when I try to move a tree node. I am able to have this work on another TreeView that is not in a Window.

Here is a REPL test page.

Duplicated
Last Updated: 09 Nov 2021 20:14 by ADMIN
Created by: Florian
Comments: 1
Category: TreeView
Type: Feature Request
0

It would be great to be able to expand nodes dynamically by setting the expand property by code.

 


protected async Task OnItemClickHandler(TreeViewItemClickEventArgs e)
{
    var item = e.Item as TreeViewItem;
    item.Expanded = true;
}

Completed
Last Updated: 08 Jan 2020 14:20 by ADMIN
Release 2.6.0
Created by: Shadi
Comments: 0
Category: TreeView
Type: Bug Report
0
You cannot collapse (properly) an item whose children were loaded on demand. A second click changes the arrow direction, but does not collapse the child items, they only flicker a little. A few more clicks sometimes collapse the items but the arrow may keep being out of sync.
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()
1 2 3