Cannot scroll while dragging

[James]

If you have a rad grid that has say 100 items which causes the page to scroll, if you try to drag an item from the bottom of the rad grid to another rad grid that is not visible (due to the scrolling) the page does not scroll.

I know that this is a browser issue rather than a radgrid issue, but does anyone have a good workaround?

thanks

james

[Galin]

Hi James,

Our RadGrid supports auto scroll inside the grid, but does not support custom events outside of it. You can use the following javascript sample to implement this feature:

var viewportHeight =  document.documentElement.clientHeight || document.body && document.body.clientHeight;

function mouseObserver(e) {
    if(e.clientY < 50){document.documentElement.scrollTop -= 20}
    else if(e.clientY > viewportHeight - 50){document.documentElement.scrollTop += 20}
}

Also, add this attribute to ClientSettings > ClientEvents:

OnRowDragStarted="function(){document.body.onmousemove = function(e){mouseObserver(e)}}"

I hope this helps.

Best wishes,
Galin
the Telerik team

[James]

hi, sorry for the late reply - just implementing this in a different project from the one in march.

I have had a problem with the clientY bit in IE8. the below javascript seems to work pretty well though

 

var viewportHeight = document.documentElement.clientHeight || document.body && document.body.clientHeight;

 

 

 

// Detect if the browser is IE or not.

 

// If it is not IE, we assume that the browser is NS.

var

 

IE = document.all?true:false

 

// If NS -- that is, !IE -- then set up for mouse capture

if

 

(!IE) document.captureEvents(Event.MOUSEMOVE)

 

// Temporary variables to hold mouse x-y pos.s

var

 

tempX = 0

 

var

 

tempY = 0

 

function

 

mouseObserver(e) {

 

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

}

 

// catch possible negative values in NS4

 

 

if (tempX < 0){tempX = 0}

 

 

if (tempY < 0){tempY = 0}

 

 

 

if(tempY < 50){document.documentElement.scrollTop -= 20}

 

 

else if(tempY > viewportHeight - 50){document.documentElement.scrollTop += 20}

 

}

[James]

i just noticed that the scrolling continues if you drop a row onto a group header row or header row. you need to stop observing the event onrowdropping

[Galin]

Hello James,

You can break the element with the following js:

OnRowDropped="function(){document.body.onmousemove = ''}"

I hope this helps.

Best wishes,
Galin
the Telerik team