Scrolling on drag

[Russell Mason]

Hi

I have a scollable RadGrid and would like to drag and drop items within the grid (i.e. to re-order them). This is fine within the visible grid area itself but the grid does not automatically scroll if you drag to its bounds (probably not surprising in a web control!).

The mouse wheel does scroll the grid allowing me to drop to an initially non-visible row. I would like the up/down/page up/page down keys to do this but they are disabled during the drag operation. However if I drag with the right mouse button the keys work as expected (but the context menu is displayed on release).

Is there anything I can do to allow the up/down/page up/page down keys to scroll the grid while the drag is in progress?

Thanks
Russell Mason

[Veli]

Hello Russell,

Unfortunately RadGrid does not automatically recognize when an item is dragged and the edges of the grid are reached. You will need to implement a similar functionality yourself. I am posting a sample javascript that automatically scrolls up and down when the mouse reaches the first and last 20 pixels if its height respectively. In this manner, now it is possible to scroll down with a dragged item.

var grid;
var IE = document.all?true:false;

function GridCreated(sender, args)
{
    document.onmousemove = getMouseXY;
    grid = sender;
    grid.get_element().onmousemove = AdjustScroll;
}

function AdjustScroll(e)
{
    var scrollMin = grid.get_element().offsetTop;
    var scrollMax = grid.get_element().offsetHeight + grid.get_element().offsetTop;

    if(tempY < scrollMax && tempY > scrollMax - 20)
    {
        document.getElementById('RadGrid1_GridData').scrollTop += 20;
    }

    if(tempY > scrollMin && tempY < scrollMin + 20)
    {
        document.getElementById('RadGrid1_GridData').scrollTop -= 20;
    }
}

var tempX;
var tempY;
function getMouseXY(e) //sample taken from http://javascript.internet.com/page-details/mouse-coordinates.html
{
    if (IE)
    {   // grab the x-y pos.s if browser is IE
        tempX = event.clientX + document.body.scrollLeft;
        tempY = event.clientY + document.body.scrollTop;
    }
    else
    {  // grab the x-y pos.s if browser is NS
        tempX = e.pageX;
        tempY = e.pageY;
    }
}

Best wishes,
Veli
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Andreas Kaech]

Hi Telerik,
it seems, that RadGrid does now automatically recognize when an item is dragged and the edges of the grid are reached.
My problem now: When dragging items from one grid to another, the scroll-functionality of the source-grid should be disabled temporarily. How can I acheve this?
Thanks for answering,
Andreas

[Sebastian]

Hi Andreas,

Indeed the functionality requested in this thread is already supported by our web grid and demonstrated in the corresponding online demo:

http://demos.telerik.com/aspnet-ajax/Grid/Examples/Programming/DragAndDrop/DefaultCS.aspx

Unfortunately disabling temporary the auto-scroll functionality on drag and drop between different grids is not supported by the control - I hope this is not a show stopper for you.

Kind regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Andreas Kaech]

Hi Telerik,
in 2009/1, the scrolling functionality by Drag&Drop changed again. But the code above (posted on Jul 11, 2008)  seems not to function in my case: My Grid is embedded in splitter environment.

Best regards,
Andreas

[Rosen]

Hello Andreas,

Indeed there is an issue with auto scrolling functionality when item is dragged which our developers has already addressed. Thus the fix will be available in next service pack of Q1 2009 RadControls for ASP.NET AJAX.

Please excuse us for the inconvenience.

Sincerely yours,
Rosen
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Darshan Sedani]

Hi,

i have tried this. still it's not working on IE8. ClientEvents i have called the GridCreated function. but it's not moving scroolbar

 

 

 

here i am pasting the code

 

 

var

 

grid;

 

 

 

var IE = document.all ? true : false;

 

 

 

function GridCreated(sender, args) {

 

 

alert(KitList);

 

 

 

document.onmousemove = getMouseXY;

 

grid =

"KitList";

 

 

grid.get_element().onmousemove = AdjustScroll;

 

}

 

 

function AdjustScroll(e) {

 

 

 

var scrollMin = grid.get_element().offsetTop;

 

 

 

var scrollMax = grid.get_element().offsetHeight + grid.get_element().offsetTop;

 

 

alert(scrollMax);

 

 

if (tempY < scrollMax && tempY > scrollMax - 20) {

 

 

document.getElementById(

'KitList').scrollTop += 20;

 

 

}

 

 

if (tempY > scrollMin && tempY < scrollMin + 20) {

 

 

document.getElementById(

'KitList').scrollTop -= 20;

 

 

}

 

}

 

 

var tempX;

 

 

 

var tempY;

 

 

 

function getMouseXY(e) //sample taken from http://javascript.internet.com/page-details/mouse-coordinates.html

 

 

 

 

 

 

{

 

 

if (IE) { // grab the x-y pos.s if browser is IE

 

 

 

 

 

 

tempX = event.clientX + document.body.scrollLeft;

 

tempY = event.clientY + document.body.scrollTop;

 

}

 

 

else { // grab the x-y pos.s if browser is NS

 

 

 

 

 

 

tempX = e.pageX;

 

tempY = e.pageY;

 

}

 

}

[Veli]

Hello Darshan,

What is the exact version of the Telerik.Web.UI.dll you are using? Note that since the start of this thread, the autoscroll on item drag functionality has been added as a feature to RasdGrid as demonstrated in the RadGrid rows drag-drop demo and the code you are using is considered obsolete.

Veli
the Telerik team

[Virendra Shinde]

<ClientEvents OnGridCreated="GridCreated" /> Add the function to GridCreated.