Drag nodes outside treeview

[Denis]

I make a simple treeview with some nodes and drag/drop possibility. Drag/drop working fine inise treeview and between nodes.
But, I can't drag node outside treeview. For example, I want drag nodes (=gather information about nodes) into DIV element.
I set handler for "drag" event, but this handler empty and don't modify node state. However, I can't drag node into external DIV at same page - node status automatically set like "k-denied".

How I can correct this behaviour? Is this by design or my mistake?

[Dimo]

Hello Denis,

The built-in TreeView drag-n-drop functionality is not designed to support random drop targets. What you can do is disable the TreeView's drag-n-drop and use the same standalone functionality with its events and abilities.

All the best,
Dimo
the Telerik team

[Mathias]

I think there is a solution (just did it the same way):
In the drag-Event you can check if the dropTarget is your div and then you set the StatusClass to 'k-add'

function onDrag(e)

{

    if (e.dropTarget.className == "dropDiv")

    {

        e.setStatusClass("k-add");

    }

}

Don't forget adding your div the class.

[Monish]

Hi,

I have similar kind of requirements - Need to drop a node from the treeview on the editor control. However, the editor might be initially empty - without any text or markup. User can start typing in the editor and wherever required will drop the node within editor.
As per Mathias's solution, I need to have a div with some class within the editor - which might not be the case. I might not have that div in the editor.

How can I achieve the functionality? Is it required to have a div / span (with certain class) where I will drop the node?

Regards,
Monish.

[Mathias]

Hmmm... the editable area in an editor still has its own class. Its called "k-editable-area". So you can try the following:

function onDrag(e)

{

if (e.dropTarget.className == "k-editable-area")

{

e.setStatusClass("k-add");

}

}

But this code just sets the add-Symbol on the drag-element as soon as its hovering the editor. To fill the editor with the nodes text or whatever, you need to use the drop-event and... do whatever you wanna do ^^

[Denis]

You right! setStatusClass("k-add") working fine and UI look nice. Also, "drop" event occured as planned. Thanks!