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

[Matthew]

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. 

 

 

 

 

[Peter Milchev]

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