Grid Row Drag and Drop Restrict to Y-Axis

[Bill]

Currently when you drag an element to drop you can move it all around the page, which is good if you need to drop onto a different area, but for reordering a grid is there anyway to restrict the dragging to just the y-axis? 

Basically the same idea that Netflix has when you reorder your queue. 

[Eyup]

Hi Bill,

You can place the following script on the page:

Telerik.Web.UI.Grid.PositionDragElement = function (element, mouseEvent) {
    var clientY = $telerik.isTouchDevice ? $telerik.getTouchEventLocation(mouseEvent).y : mouseEvent.clientY;
    element.style.top = clientY + $telerik.getDocumentElementScrollTop() + 1 + "px";
    if ($telerik.isOpera || ($telerik.isOpera || $telerik.isSafari2) || $telerik.isTouchDevice) {
        element.style.top = parseInt(element.style.top) - document.body.scrollTop + "px";
    }
};

Hope this helps. Please give it a try and let me know about the result.

Regards,
Eyup
Telerik

 

 

[Bill]

Thanks for your help, it sort of works. The dragged item only moves vertically, However the dragged item is positioned to the left side of the screen. (i.e. absolutely positioned left: 0)

Also we have another grid that can drag onto a main one and the script effects that one as well, which we don't want. Anyway to target the script towards a specific grid?

[Eyup]

Hi Bill,

The second requirement is achievable but the first one is somewhat unclear. Can you please send us sample screenshots or video demonstrating the exact desired behavior? Thus, we will be able to figure out your specific scenario and prepare a sample RadGrid web site and send it to you.

Regards,
Eyup
Telerik

 

 

[Bill]

Here is a little screen capture so you can see what I mean. When I start to drag the item is flush against the left side of the screen instead of within the grid.

http://screencast.com/t/1MYVOIxF

[Pavlina]

Hello,

In order to achieve the desired functionality you should modify the script provided by my colleague Eyup as shown below:

Telerik.Web.UI.Grid.PositionDragElement = function (element, mouseEvent) {
    var clientY = $telerik.isTouchDevice ? $telerik.getTouchEventLocation(mouseEvent).y : mouseEvent.clientY;
    var grid = $find('<%= grdPendingOrders.ClientID %>').get_element();
    element.style.left = $telerik.getLocation(grid).x + "px";
    element.style.top = clientY + $telerik.getDocumentElementScrollTop() + 1 + "px";
    if ($telerik.isOpera || ($telerik.isOpera || $telerik.isSafari2) || $telerik.isTouchDevice) {
        element.style.top = parseInt(element.style.top) - document.body.scrollTop + "px";
    }
};

 
Regards,
Pavlina
Telerik

 

 

[Bill]

Thank you! That solves the positioning problem, but how would I just target one grid since I have two on this page? Basically only run this function when dragging on the grdPendingOrders grid in your example?

[Eyup]

Hi Bill,

I have created a sample RadGrid web site to demonstrate how you can achieve the requested functionality. Please run the attached application and let me know if it helps you.

Regards,
Eyup
Telerik