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.

The TreeView resets the checkbox state of its items when the app adds or removes a node to the component datasource.

A possible workaround is to reset the object reference of the CheckedItems parameter.

The following test page with a workaround is a modified version of TreeView - Refresh Data - Observable Data.

@using System.Collections.ObjectModel

<TelerikButton OnClick="@AddItem">Add Item</TelerikButton>

<TelerikButton OnClick="@RemoveItem">Remove Item</TelerikButton>

<p>
    TreeViewCheckedItems Count: @TreeViewCheckedItems.Count()
    <br />
    <label><TelerikCheckBox @bind-Value="@ApplyWorkaround" /> Apply Workaround</label>
</p>

<TelerikTreeView Data="@TreeViewData"
                 CheckBoxMode="@TreeViewCheckBoxMode.Multiple"
                 @bind-CheckedItems="@TreeViewCheckedItems" />

@code {
    private IEnumerable<object> TreeViewCheckedItems { get; set; } = new List<TreeItem>();
    private ObservableCollection<object> TreeViewData { get; set; } = new ObservableCollection<object>();

    private int LastId { get; set; }
    private bool ApplyWorkaround { get; set; }

    private void AddItem()
    {
        TreeViewData.Add(
            new TreeItem
            {
                Id = ++LastId,
                Text = $"Item {LastId}",
            });

        if (ApplyWorkaround)
        {
            TreeViewCheckedItems = new List<object>(TreeViewCheckedItems);
        }

    }

    private void RemoveItem()
    {
        if (TreeViewData.Count > 1)
        {
            TreeViewData.Remove(TreeViewData.Last());

            if (ApplyWorkaround)
            {
                TreeViewCheckedItems = new List<object>(TreeViewCheckedItems);
            }
        }
    }

    protected override void OnInitialized()
    {
        TreeViewData = new ObservableCollection<object>() {
            new TreeItem()
            {
                Id = ++LastId,
                Text = $"Item {LastId}"
            }
        };

        TreeViewCheckedItems = new List<object>() { TreeViewData.First() };
    }
    public class TreeItem
    {
        public int Id { get; set; }
        public int? ParentId { get; set; }
        public string Text { get; set; } = string.Empty;
        public bool HasChildren { get; set; }
    }
}

asdf

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.

Hi,

Is there a plan to support lines between treeview items as available in radtreeview?

radTreeView1.ShowLines = true;
radTreeView1.LineStyle = TreeLineStyle.DashDot;
 
Without this it is very confusing to the end user what the connections between open items are.
 
Regards,

peter
 
 
 
 

The problem at hand arises when attempting to update the CheckedItems property of a TreeView control from within an async method.

The problem seems to be timing-related and is not always reproducible. The issue is observed most often when starting the project. It seems to be reproducible only in Blazor Server App.

Reproduction:
To reproduce the issue, try running the following snippet in a Blazor Server App.

@page "/"
<TelerikTreeView Data="@FlatData"
                 CheckBoxMode="@TreeViewCheckBoxMode.Multiple"
                 CheckParents="@true"
                 CheckChildren="@true"
                 CheckOnClick="@false"
                 @bind-CheckedItems="@SelectedItems">
</TelerikTreeView>

@code {
    List<TreeItem> FlatData { get; set; }
    IEnumerable<object> SelectedItems { get; set; } = new List<object>();
    protected override async Task OnInitializedAsync()
    {
        await GenerateData();
        await SelectDefault();
    }

    async Task SelectDefault()
    {
        await Task.Delay(100);
        SelectedItems = FlatData.Where(data => data.Id == 2);
    }
#pragma warning disable
    async Task GenerateData()
    {
        FlatData = new List<TreeItem>();

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

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

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

The second TreeItem should be selected.

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.

```

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

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.

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.

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.