Seems even having multiple selections we just can drag and drop items one by one, am I right? Basically having access to selected items & drop event I can code workaround & move them myself, but hope that we have it out of the box, do we?

Set TreeView selection type to multiple, select several items, try to drag, just one item will be dragged despite having several selected.

------------ADMIN EDIT--------------

A possible workaround can be implemented by using the OnDrop event when you have Multiple selected Items.

Add checkbox support at the node level.  Similar to...

https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes/

Currently there does not appear to be a way to provide validation of the drag & drop action prior to the OnDrop hook. The result is that the user experience looks as if they are able to drag and drop nodes to places where they should not be able to based on custom logic. It appears there is some logic behind the scenes that provide an icon during the hover of the drag and drop action but the logic determining this icon is not extendable to my knowledge. What I'd like to be able to do is override or extend the logic determines on hover UI feedback of the drag and drop action.  Specifically, for my case, I would like to be able to validate with business logic if the drag and drop action is allowed prior to the OnDrop so invalid actions look something like the below picture. This picture from your demo site shows the feedback provided when you try to drag and drop a node onto itself. It shows a clear icon that suggest the action is not allowed but as I mentioned the logic to produce this result does not appear to be extensible.

Repro plus workaround (already in):

<button @onclick="@SwitchDataSource">switch to other data source</button>

<TelerikTreeView Data="@FlatData">
    <TreeViewBindings>
        <TreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" TextField="Text" 
                         HasChildrenField="HasChildren" IconField="Icon">
            <ItemTemplate>
                @{
                    TreeItem currProduct = context as TreeItem;
                    @(currProduct.Text)
                }
            </ItemTemplate>
            </TreeViewBinding>
    </TreeViewBindings>
</TelerikTreeView>

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

    async void SwitchDataSource()
    {
        //workaround - remove it to see the actual error
        foreach (TreeItem item in FlatData)
        {
            item.Expanded = false;
        }
        StateHasChanged();
        await Task.Delay(300);//awaits the animation that will hide the nodes we just collapsed so their elements get properly disposed
        
        //change data
        LoadSecondDataSource();
        //update UI
        StateHasChanged();
    }

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

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

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

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

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

        items.Add(new TreeItem()
        {
            Id = 4,
            Text = "site.psd",
            ParentIdValue = 2,
            HasChildren = false,
            Icon = "psd",
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 5,
            Text = "index.js",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "js"
        });
        items.Add(new TreeItem()
        {
            Id = 6,
            Text = "index.html",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "html"
        });
        items.Add(new TreeItem()
        {
            Id = 7,
            Text = "styles.css",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "css"
        });

        FlatData = items;
    }

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

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

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


        //if you add this, there is no error because the levels match
        //if the new data source does not have the same number of (maybe expanded) levels
        //you will get an error while disposing those levels
        //items.Add(new TreeItem()
        //{
        //    Id = 3,
        //    Text = "1 1 1",
        //    ParentIdValue = 2
        //});



        FlatData = items;
    }
}

Hello,

I am trying to fill the TreeView using an async method. The first level is loaded an expanded. Subsequent levels are not. Or so it seams. They are loaded, but when expanding a node it expands and immediately collapses. Expanding a second time reveals the nodes loaded earlier.

I included a demo project. Open http://localhost:{port}/tree.

Best regards,

Marcel Gelijk

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.

The issue manifests both when

• using .Add() or .Remove() on an ObservableCollection
• creating a new List<T>(updatedData)

Happens in 2.14.1 first.

*** Thread created by admin on customer behalf ***

I need to be able to multiselect items in a treeview and drag n drop to reorder items.

(Same as RadTreeView AJAX component)

I would like a node click event exposed from the treeview.

At the moment, you need to use a template. Example and considerations are available in the following forum thread: https://www.telerik.com/forums/row-click-and-double-click-events#PQpO8DcbzkCArF3UqoLcWA.

I have an extensive WPF background and so I naturally use ObservableCollection for virtually all UI type binding scenarios.

However I noticed that it seems the TreeView control doesn't seem to work when bound that way.
I switched the property to an array instead and it worked with no other modifications.

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

When using load-on-demand, you may not know how much data there is and how many levels deep it will go. You need the OnExpand event to fire for each node so you can call your services and retrieve data.

Unfortunately, it does not fire for the second level of nodes, so you cannot load data for them.