[Solved] Drag and drop questions

[Eugene]

Greetings,
    I have two questions about the mvc treeview control.
(1) How can the text of the parent of the source and destination items involved in a drag and drop operation be obtained?
(2) Is it possible to get the level of the source and destination of these items so that moving an item to another level can be prevented?

Thanks in advance,
Eugene

[Alex Gyoshev]

Hi Eugene,

1. $(e.item.parentNode).closest('.t-item')
   and
   $(e.destinationItem.parentNode).closest('.t-item')
   Since these are jQuery objects, you can check their .length property - if it's 0, the item was dragged to the root level. If it's 1, the jQuery object holds the parent item and you can call the getItemText function of the TreeView in order to get the item text.
2. Sure! After trying it out, it does not seem trivial, so here's the code:
   

   var itemLevel = -1;
   
   function isDropAllowed(e)
   {
       var $dropTarget = $(e.dropTarget);
       var hoveredItem = $dropTarget.closest('.t-top,.t-mid,.t-bot');
   
       if (hoveredItem.length > 0) {
           var itemHeight = hoveredItem.outerHeight();
           var itemTop = hoveredItem.offset().top;
           var itemContent = $dropTarget.closest('.t-in');
           var delta = itemHeight / (itemContent.length > 0 ? 4 : 2);
   
           var insertOnTop = e.pageY < (itemTop + delta);
           var insertOnBottom = (itemTop + itemHeight - delta) < e.pageY;
           var addChild = itemContent.length > 0 && !insertOnTop && !insertOnBottom;
   
           if (addChild)
               return $dropTarget.parents('.t-item').length == itemLevel;
           else
               return $dropTarget.parents('.t-item').length == itemLevel + 1;
       }
   
       return false;
   }
   
   function onNodeDragStart(e) {
       itemLevel = $(e.item).parents('.t-item').length;
   }
   
   function onNodeDragging(e) {
       if (!isDropAllowed(e))
           e.setStatusClass('t-denied');
   }
   
   function onNodeDrop(e) {
       if (!isDropAllowed(e))
           e.preventDefault();
   }

   
   Please note that it requires a small patch in telerik.treeview.js, which you can find attached.

Sincerely yours,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Eugene]

Hi Alex,
    Thank you for your prompt and thorough reply.  The answer to the second question works fine but I don't follow the answer to the first question.  Could you please elaborate on your answer on how one can get the text of the source and destination nodes involved in a drag and drop operation?  I'm still not getting the text of these items.

Thanks,
Eugene

[Alex Gyoshev]

Hi Eugene,

Here's a snippet that illustrates the idea better:

function onNodeDropped(e) {
    var treeview = $('#TreeView').data('tTreeView');

    var draggedItemParent = $(e.item.parentNode).closest('.t-item');
    treeView.getItemText(draggedItemParent); // text of parent node of dragged item

    var destinationItemParent = $(e.destinationItem.parentNode).closest('.t-item');
    treeView.getItemText(destinationItemParent); // text of parent node of destination item
}

Please note that the event should be onNodeDropped, rather than onNodeDrop, in order to have the start and destination item in the event arguments.

Sincerely yours,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Eugene]

Greetings Alex,
       In my onNodeDropped function, the value of my treeview variable, set with var treeview = $('#TreeViewArticle).data('tTreeView');
 is null, so my app crashes.  That variable is set to a value in other callback functions, such as onNodeDrop.
       Also, the new js file 186424_telerik_treeview.js causes my app to act strangely and eventually to crash, but the previous code that you sent me to handle drags to different levels seems to work pretty good without the new js file.  Do you know why the value of my treeview object cannot be retrieved in the onNodeDropped function?  My app is using

 

<

 

script src="../../Scripts/2010.1.309/jquery-1.4.2.min.js" type="text/javascript"></script> , Internet Explorer 8 running under Windows Vista Business N with Service Pack 2.

 

 

 

My tree definition:

 

 

<div id="TreeViewArticle">

 

 

 

 

<%

= Html.Telerik().TreeView()

 

.Name(

"TreeView")

 

.DragAndDrop(settings => settings

.DropTargets(

".drop-container")

 

)

.ClientEvents(events => events

.OnNodeDragStart(

"onNodeDragStart")

 

.OnNodeDropped(

"onNodeDropped")

 

.OnNodeDrop(

"onNodeDrop")

 

.OnNodeDragging(

"onNodeDragging")

 

.OnSelect(

"onSelect")

 

)

.BindTo(Model, (item, Article) =>

{

 

// bind initial data - can be omitted if there is none

 

 

 

 

item.Text = Article.Name;

item.Value = Article.ID.ToString();

item.LoadOnDemand =

true;

 

item.Selected =

true;

 

})

.DataBinding(dataBinding =>

{

dataBinding.Ajax()

.Enabled(

true)

 

.Select(

"LoadArticlesOnDemand", "Home");

 

})

%>

 

 

</div>

 

 

 

Thanks,
Eugene

[Alex Gyoshev]

Hello Eugene,

If you use $('#TreeView').data('tTreeView'), it should return the TreeView client object - please note that the selector uses the TreeView.Name (which is its ID).

I do not reproduce the crash, though - could you please open a support ticket and send your project so that I can take a look at the problem?

Best wishes,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.