Approved
Last Updated: 31 Jan 2018 12:03 by Matt Howeson
ADMIN
Slav
Created on: 14 Feb 2014 15:15
Category: Dock
Type: Feature Request
7
Add functionality for scrolling the page when a RadDock is dragged to its bottom edge
When a RadDock control is dragged to the bottom of a page, the page will start scrolling.
1 comment
Matt Howeson
Posted on: 31 Jan 2018 12:03
I've been trying to make this work for sometime, thought I'd share progress.  The below solution works effectively for vertical scrolling, which solves the issue for us, could quite easily be extended to cover horizontal using the same approach.   Simply add the below JS function, and wire it up to the OnClientDrag property of the dock as 

dock.OnClientDrag = "OnDockClientDrag";

javascript function....

function OnDockClientDrag(dock) {
    var e = window.event;
    var posX = e.clientX;
    var posY = e.clientY;
    var scrollTop = $(window).scrollTop();
    var step = 0;

    if (posY < 50 && scrollTop > 0) {
        step = -8;
    } else {
        var h = window.innerHeight;
        var scrollHeight = $(document).height();
        var scrollPosition = $(window).height() + scrollTop;
        var isatbottom = ((scrollHeight - scrollPosition) / scrollHeight === 0);

        if (posY > h - 50 && !isatbottom) {
            step = 8;
        }
    }
    // is there scroling to be done?
    if (step != 0) {
        // scroll page by step amount
        window.scrollTo(document.body.scrollLeft + (dockStartXPos - e.clientX), scrollTop + step);
        // move top of dock to reflect scrolling, keeps dock in sync with mouse pointer, can't use set_top for some reason
        dock.get_element().style.top = parseInt($(dock.get_element()).css("top")) + step + "px";
    }
}