Turn off Node Expand on Hover During Node Drag

[KubuliJohn]

I have a treeview using load on demand via ajax.  When I drag a node (or some nodes) and hover over a collapsed node, the collapsed node expands after a few seconds.  However, the drag operation is then no longer active - when I release the mouse button nothing happens - no events are fired and no errors are generated.  This is possibly because of the complexity of what I am doing when a node is expanded.

No problem, now I just want to turn off the auto-expansion of collapsed nodes when I hover during a drag operation.  I can't find a way to do this - I tried handling OnClientNodeExpanding to return false if a javascript variable (isDragging) is true - I set isDragging to true in the OnClientNodeDragStart event and false in the OnClientNodeDropping event, but if I drop the node somewhere invalid the flag doesn't get turned off because the ClientNodeDropping event isn't fired.

Any way to just disable the auto-expand functionality?

Thanks,

John H

[Nencho]

Hello John,

The approach you attempt to implement is the correct one. I have performed several tests locally and it seems that the desired behavior is achieved and the OnClientNodeDropping is fired regardless if the node is drop on a "valid" element or not. Here is a video, demonstrating the behavior at my end. Would you specify which version of our controls are you currently using and under which browser the issue is encountered.

Regards,
Nencho
Telerik

[KubuliJohn]

You are correct this is in fact working with the OnClientNodeDropping event.  Like so many issues I have been having recently this was caused by my client's browsers being set to an old compatibility standard - they are using IE9 but defaulting it to run in IE7 standards mode.  I added a X-UA-Compatible header with IE=edge and now many things behave much better.

The only case I see where the node dropping event is not fired is if the user hits the escape key to cancel the drag operation.

I am using ASP.NET Ajax controls 2013 Q3.

Thanks,
John H.

[Nencho]

Hello John,

Your observations are correct. In order to cover this scenario, I would suggest you to use jquery and capture if the keydown event is fired with an event.which equal to 27 (Esc Char Code), while the  "shouldExpand" flag is false. Please consider this implementation :

<script type="text/javascript">
       var shouldExpand = true;

       function OnClientLoad(sender) {
           $telerik.$(document).on("keydown", function (e) {
               if (e.which == 27 && shouldExpand == false) {
                   shouldExpand = true;
               }
           });
       }

       function OnClientNodeExpanding(sender, eventArgs) {
           eventArgs.set_cancel(!shouldExpand);
       }

       function OnClientNodeDragStart(sender, eventArgs) {
           shouldExpand = false;
       }

       function OnClientNodeDropping(sender, eventArgs) {
           alert("fired")
           shouldExpand = true;

       }

   </script>

Regards,
Nencho
Telerik