Turn off Node Expand on Hover During Node Drag

4 posts, 0 answers
  1. KubuliJohn
    KubuliJohn avatar
    10 posts
    Member since:
    May 2004

    Posted 12 Dec 2013 Link to this post

    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
  2. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 17 Dec 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. KubuliJohn
    KubuliJohn avatar
    10 posts
    Member since:
    May 2004

    Posted 17 Dec 2013 Link to this post

    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.
  5. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 19 Dec 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top