How to keep scrolling page while dragging Tree node until certain event

2 posts, 0 answers
  1. Matthew
    Matthew avatar
    6 posts
    Member since:
    Dec 2018

    Posted 23 Nov 2020 Link to this post

    While I am dragging a node from a RadTreeView, I want the page to scroll up or down when the element hits a certain position on either the top or bottom area of the inner height of the page.

    The best solution thus far has been this post: https://www.telerik.com/forums/radtreeview-drag-and-drop-scrolling

    01.function nodeDragging(sender, args)
    02.        {
    03.            var container = sender.get_element();
    04.            var divYCoord = $telerik.getLocation(container).y;
    05. 
    06.            var currentYCoord = args.get_domEvent().clientY;
    07.            var textbox = $get("textbox");
    08.                     
    09.            if (currentYCoord > (document.body.clientHeight - 20))
    10.                window.scrollBy(0, 20);
    11.           
    12.            window.status = "document.body.clientHeight:" + document.body.clientHeight + ":currentYCoord:" + currentYCoord + ":document.body.scrollTop:" + document.body.scrollTop + ":iTop:" + (currentYCoord - document.body.scrollTop) + ":" + args.get_domEvent().screenY + ":" + divYCoord;
    13.            if(currentYCoord < 20)
    14.                window.scrollBy(0, -20);
    15.        }

     

    I placed a code in a client node dragging function, but the issue is that the scrolling only happens once until I move the cursor again.

    I would like to know if there is a way where the page continues to scroll while the dragging tree node remains within an area of the page. 

     

     

     

     

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    898 posts

    Posted 27 Nov 2020 Link to this post

    Hello Matthew,

    There is an option to use a setInterval instead of moving only on mouse move:

    <telerik:RadTreeView ID="RadTreeView12" runat="server" EnableDragAndDropBetweenNodes="true"
        EnableDragAndDrop="true" OnClientNodeDropping="OnClientNodeDropping" OnClientNodeDragging="nodeDragging">
    </telerik:RadTreeView>
        </div>
    </form>
    
    <script type="text/javascript">
        var scrollInterval;
        function OnClientNodeDropping(sender, args) {
            clearInterval(scrollInterval)
        }
        function nodeDragging(sender, args) {
            clearInterval(scrollInterval)
            var container = sender.get_element();
            var divYCoord = $telerik.getLocation(container).y;
    
            var currentYCoord = args.get_domEvent().clientY;
            var textbox = $get("textbox");
    
            if (currentYCoord > (document.body.clientHeight - 20)) {
                scrollInterval = setInterval(function () {
    
                    window.scrollBy(0, 20);
                }, 100)
            }
    
            window.status = "document.body.clientHeight:" + document.body.clientHeight + ":currentYCoord:" + currentYCoord + ":document.body.scrollTop:" + document.body.scrollTop + ":iTop:" + (currentYCoord - document.body.scrollTop) + ":" + args.get_domEvent().screenY + ":" + divYCoord;
            if (currentYCoord < 20) {
                scrollInterval = setInterval(function () {
                    window.scrollBy(0, -20);
                        
                }, 100);
            }
        }
    
    </script>

    Regards,
    Peter Milchev
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top