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

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.

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

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.

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.

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

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

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

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.