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

Hi.

I'd like to request the ability to set the Enabled property on check boxes in the treeview.

For example, given a tree view with check boxes:

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

I'd like to make the tree view read-only so the check boxes appear disabled and the user cannot check-mark or uncheck-mark them.

Thank you.

Per WAI-ARIA 1.2, the "aria-level" attribute, if present, "is an integer greater than or equal to 1".

However, Blazor TreeView uses 0-indexing for the attribute which means that the root item has an invalid (and ignored) aria-level property. This is problematic because the browser will infer the level from the DOM nesting for the root item, but then use aria-level for all other sub-trees, leading to inconsistent levels (in the demo, the level goes 2 > 1 > 2).

I have a TreeView declared and bound to a hierarchical database table. I'd like to be able to Cancel the 'Check' function on any node where HasChildren == true. I don't mind the check box being visible, because I like the multiple check states of the Parent Nodes, but the user should be only able to actually check the nodes where HasChildren == false. Is there a way to cancel the check for those parent nodes?

Please forward the ticket as a feature request for TreeView. For example:

<TelerikTreeView Data="@Data" CheckParents="true"CheckOnClick="true"CheckChildren="false" AllowParentNodesCheck="false">

The feature request is about introducing a configuration option about a delay to start the drag operation. Currently, the lack of such functionality causes unexpected drag clue appearance on double click. 

```
In my treeview the user can double-click to open an item or they can drag to reorganize the tree. When you double-click you can see the drag & drop initiates for the brief fraction of a second. Which is a confusing and unpleasant UX. It would be preferable if a drag & drop didn't initiate until the user dragged for 3-4 pixels from the mousedown location, as opposed to a single pixel. 

In general if there's a behavior like this that I would want to tweak, are there ways to adjust the control or override behaviors using Javascript? I used to do all sorts of stuff with the jQuery controls.

```

The TreeView should automatically update when a change in data fields occur. Changes in the `ItemsField`, `HasChildren` are crucial to be tracked to allow easy manipulation of data in binding to hierarchical data. This request will fulfill the observable collection support of the TreeView.

---

ADMIN EDIT

Changes in the ExpandedField of the element have been previously handled in the TreeView. However, this has been a side effect of incorrect code in our component that was causing performance hit. We reviewed our component and how it could provide better coverage in user scenarios, so here are our steps:

- Implement tracking of data item changes with ObservableCollection, so that we could fully support binding to observable data - click the Vote and Follow buttons on the current page to raise the priority of this feature implementation and to get notified for status updates.



We've been evaluating a major change where the ExpandedItems to be controlled via parameter/state. So, we would really appreciate if you could share feedback whether this change would be good for your project and use case.

- Implementation of ExpandedItems in TreeView to substitute ExpandedField in the collection: https://feedback.telerik.com/blazor/1448095-expanded-items-handling-feedback-requested

We believe that the above steps are the way to go with the maturing of the TreeView component.

A workaround could be reinitializing the Data when you update the property of the item, that will force the treeview to update:

TreeViewData = new List<MyModel>(TreeViewData)

---

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.

There are two related issues in this bug report:

1. TreeView does not allow horizontally scrolling when there are items that extend past the viewport
2. TreeView cuts off items when the browser is zoomed in

See REPL: https://blazorrepl.telerik.com/wwOHGPvi11wy1OBp06

Steps to reproduce:

1. Open and run the REPL.
2. Observe that the last deeply-nested tree item, Design20.......01 is not fully visible (if it is fully visible, just add more 0s in the middle). Specifically, the trailing "1" is not visible and cannot be scrolled to.
3. Zoom the browser to 200%.
4. Observe that the TreeView still does not allow horizontal scrolling to view any of the items cut off by the increased zoom.

Hi!

I can't find anything about validating drop targets. The only example in the demos checks the validity in the onDrop event. A bit late ...

Here are a few alternatives what will be useful for the TreeView to have:

1) new event OnDrag which fires when item is dragged over and dragged out of another item. Returns boolean indicating dropping is enabled. Requires a lot of roundtrips...

2) new properties of the TreeView items (DragType, DropTypes). Disables drop when DragType not in DropTypes.

3) a more generic DropZone component as in 2) which also could be used in TreeView templates.

https://chrissainty.com/investigating-drag-and-drop-with-blazor/ wrote an interesting article (sponsored by Telerik Blazor!) 

https://github.com/chrissainty/SimpleDragAndDropWithBlazor

Could be a inspiration for a generic DropZone component!

Best regards,
Jan

After upgrade to 3.0, when expanding a checked tree node, the child items are not checked. Also, if the child items are checked, but the parent is collapsed and expanded again, the checked children are unchecked.

This can be replicated on the online demo.

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

Check parent Documents item:

Then collapse parent and expand them again:

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.

Hi everyone,

We created this item to request your feedback on how you use the treeview binding with regards to the Expanded state of the nodes.

At the moment, the treeview updates the field in the collection when an item gets expanded or collapsed, and that makes it unique in the suite - the other data bound components do not alter their data source silently, and this is the general pattern we want to follow in order to have consistency across the board.

Thus, there are several approaches we are considering and we want to get your take on how you would find this most comfortable:

• Keep the current situation where the treeview updates the ExpandedField in the Data silently [we would rather change it] - the Data collection gets changed automatically. To control an expanded item, prepare the data source accordingly.
• Use the OnExpand event to get the item and its new state in order to update the collection yourself if needed. If you don't use the field for anything but to control the state of the treeview, you will not need to change anything. To control an expanded item, prepare the data source accordingly when providing it to the treeview. If you will be reusing the same data source with alterations, you may have to handle the event to sync the state between the treeview and the data.
• Use an ExpandedItems collection [we are inclined to go with this approach at the moment] - this will be a collection that you can provide to the treeview separately from its data source, like the selected items in a grid. This will let you avoid an Expanded field in the data (which we believe may not be present in an actual database anyway) and you will be able to use business logic to determine which items to add/remove to that collection, this also includes nested levels, even added through load-on-demand.

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

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