This is a migrated thread and some comments may be shown as answers.

Drag nodes outside treeview

5 Answers 266 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Denis
Top achievements
Rank 1
Denis asked on 30 Aug 2012, 11:51 AM
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?

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 03 Sep 2012, 11:07 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted
Mathias
Top achievements
Rank 1
answered on 03 Sep 2012, 11:57 AM
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.
0
Monish
Top achievements
Rank 1
answered on 14 Sep 2012, 08:27 AM
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.
0
Mathias
Top achievements
Rank 1
answered on 14 Sep 2012, 09:36 AM
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 ^^
0
Denis
Top achievements
Rank 1
answered on 15 Sep 2012, 05:57 PM
You right! setStatusClass("k-add") working fine and UI look nice. Also, "drop" event occured as planned. Thanks!
Tags
TreeView
Asked by
Denis
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Mathias
Top achievements
Rank 1
Monish
Top achievements
Rank 1
Denis
Top achievements
Rank 1
Share this question
or