This is a migrated thread and some comments may be shown as answers.

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

1 Answer 282 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Veteran
Matthew asked on 23 Nov 2020, 11:33 AM

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. 

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 27 Nov 2020, 05:38 PM

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/.

Tags
TreeView
Asked by
Matthew
Top achievements
Rank 1
Veteran
Answers by
Peter Milchev
Telerik team
Share this question
or