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?
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
0
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
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'
Don't forget adding your div the class.
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.
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:
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 ^^
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!