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.
Basically the same idea that Netflix has when you reorder your queue.
7 Answers, 1 is accepted
0
Hi Bill,
You can place the following script on the page:
Hope this helps. Please give it a try and let me know about the result.
Regards,
Eyup
Telerik
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?
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
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
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
http://screencast.com/t/1MYVOIxF
0
Hello,
In order to achieve the desired functionality you should modify the script provided by my colleague Eyup as shown below:
Regards,
Pavlina
Telerik
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
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
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.