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

Grid Row Drag and Drop Restrict to Y-Axis

7 Answers 18 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bill
Top achievements
Rank 1
Bill asked on 28 Jul 2014, 08:09 PM
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. 

7 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 31 Jul 2014, 02:55 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Bill
Top achievements
Rank 1
answered on 07 Aug 2014, 08:46 PM
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?
0
Eyup
Telerik team
answered on 12 Aug 2014, 10:26 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Bill
Top achievements
Rank 1
answered on 12 Aug 2014, 01:06 PM
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
0
Pavlina
Telerik team
answered on 15 Aug 2014, 02:27 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Bill
Top achievements
Rank 1
answered on 15 Aug 2014, 03:19 PM
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?
0
Eyup
Telerik team
answered on 20 Aug 2014, 01:54 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Bill
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Bill
Top achievements
Rank 1
Pavlina
Telerik team
Share this question
or