Phil Jones
Top achievements
Rank 1
Rank 1
Phil Jones
asked on 25 Feb 2011, 03:16 PM
Hi,
I'm making an application, where one of the wanted features is to have the ability to move fields around and save their position(the app is mostly made up of data fields, lots of labels and textboxes) and I have been using RadDock to achieve this. It works great, I've removed the styling for the docks so by default they can't be seen, and clicking a button to enter an 'edit mode' reveals the grip drag handle to move them around. When the user is done, you can exit edit mode and the form has been re-arranged with no problems.
What I'm wondering is if there is way to set the drag handle of a RadDock to the RadDock itself, so instead of having the grip appear above the field (it makes the entire form double in height), clicking on anything inside of the dock would allow you to drag it. Obviously the controls inside the dock would not be usable, as for example clicking on a button would just enable the dock for dragging.
I thought I could use the same method as used in the demo for creating a custom drag handle, but it doesn't seem to be working in this situation.
Anyone attempted this before?
Thanks,
I'm making an application, where one of the wanted features is to have the ability to move fields around and save their position(the app is mostly made up of data fields, lots of labels and textboxes) and I have been using RadDock to achieve this. It works great, I've removed the styling for the docks so by default they can't be seen, and clicking a button to enter an 'edit mode' reveals the grip drag handle to move them around. When the user is done, you can exit edit mode and the form has been re-arranged with no problems.
What I'm wondering is if there is way to set the drag handle of a RadDock to the RadDock itself, so instead of having the grip appear above the field (it makes the entire form double in height), clicking on anything inside of the dock would allow you to drag it. Obviously the controls inside the dock would not be usable, as for example clicking on a button would just enable the dock for dragging.
I thought I could use the same method as used in the demo for creating a custom drag handle, but it doesn't seem to be working in this situation.
Anyone attempted this before?
Thanks,
3 Answers, 1 is accepted
0
Hi Mark,
I believe the following demo will be helpful when trying to achieve the desired scenario: http://demos.telerik.com/aspnet-ajax/dock/examples/setdraghandleclientside/defaultcs.aspx.
You can easily make the entire content container of the dock a drag handle, however the other elements might still capture the [drag related] events and the dock cannot be dragged, for example, by grabbing a disabled button or textbox.
This can be avoided by specifying as a handle, an element that does not contain other HTML elements, as shown in this example:
Best wishes,
Pero
the Telerik team
I believe the following demo will be helpful when trying to achieve the desired scenario: http://demos.telerik.com/aspnet-ajax/dock/examples/setdraghandleclientside/defaultcs.aspx.
You can easily make the entire content container of the dock a drag handle, however the other elements might still capture the [drag related] events and the dock cannot be dragged, for example, by grabbing a disabled button or textbox.
This can be avoided by specifying as a handle, an element that does not contain other HTML elements, as shown in this example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="RadScriptManager1" runat="server"> </asp:ScriptManager> <script type="text/javascript"> function OnClientInitialize(dock, args) { //Uncomment the following line to make the whole content area a drag handle //dock.set_handle(dock.get_contentContainer()); dock.set_handle($get(dock.get_id() + "_C_handle")); } </script> <div> <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px"> <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px" OnClientInitialize="OnClientInitialize" DockHandle="None"> <ContentTemplate> <asp:Label ID="handle" runat="server" Style="background: yellow;">Drag Here</asp:Label> <asp:TextBox runat="server" Enabled="false" /> <asp:Button Text="Button" runat="server" Enabled="false" /> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadDockLayout> </div> </form></body></html>Best wishes,
Pero
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
John
Top achievements
Rank 1
Rank 1
answered on 01 Sep 2011, 04:28 PM
I am curious if this same method can be applied to RadListViewItemDragHandle. I am trying to Drag the ListViewItems between ListViews and it would be great if the handle could span the entire ListViewItem.
I have tried to increase the size of the handle, but this pushes all of the content of the ListViewItem around. Even though the handle has the option of having children, it does not properly handle the drag event if you were to try and drag the content.
none of the controls in my ListViewItem are going to be input items as of yet, but the possibility does need to be considered.
I have tried to increase the size of the handle, but this pushes all of the content of the ListViewItem around. Even though the handle has the option of having children, it does not properly handle the drag event if you were to try and drag the content.
none of the controls in my ListViewItem are going to be input items as of yet, but the possibility does need to be considered.
0
Hello John,
In RadListView, an arbitrary HTML element can be your drag handle. The little RadListViewItemDragHandle control is provided for convenience, but you are not limited to using that only. To make an HTML element a drag handle, the following conditions should be met
1. The drag handle element must have a CSS class of "rlvDrag"
2. The drag handle element must have an onmousedown event handler in the form:
where [RadListView.ClientID] is the client ID of the RadListView instance and [DisplayIndex of dragged item] is the RadListViewDataItem.DisplayIndex value of the item that is dragged.
3. The topmost container in the ItemTemplate of the listview must have a CSS class of "rlvI"or "rlvA" (for alternating items)
4. The topmost item container (with class="rlvI") cannot be the same as the drag handle (with class="rlvDrag").
So, effectively, the above points require that you explicitly specify your topmost item container (that will be dragged) as well as the drag handle element that will be used for dragging.
In your particular scenario, you want your drag handle to be the entire item container. As you cannot use one and the same element for both your item container and your drag handle, you need at least 2 elements. Here is a sample ItemTemplate declaration in your markup:
This is the minimum of markup you need to make an arbitrary element your drag handle.
Greetings,
Veli
the Telerik team
In RadListView, an arbitrary HTML element can be your drag handle. The little RadListViewItemDragHandle control is provided for convenience, but you are not limited to using that only. To make an HTML element a drag handle, the following conditions should be met
1. The drag handle element must have a CSS class of "rlvDrag"
2. The drag handle element must have an onmousedown event handler in the form:
$find('[RadListView.ClientID]')._itemDrag._dragHandleMouseDown(event, [DisplayIndex of dragged item]);where [RadListView.ClientID] is the client ID of the RadListView instance and [DisplayIndex of dragged item] is the RadListViewDataItem.DisplayIndex value of the item that is dragged.
3. The topmost container in the ItemTemplate of the listview must have a CSS class of "rlvI"or "rlvA" (for alternating items)
4. The topmost item container (with class="rlvI") cannot be the same as the drag handle (with class="rlvDrag").
So, effectively, the above points require that you explicitly specify your topmost item container (that will be dragged) as well as the drag handle element that will be used for dragging.
In your particular scenario, you want your drag handle to be the entire item container. As you cannot use one and the same element for both your item container and your drag handle, you need at least 2 elements. Here is a sample ItemTemplate declaration in your markup:
<ItemTemplate> <div class="rlvI"> <div class="rlvDrag" onmousedown='$find("<%= RadListView1.ClientID %>")._itemDrag._dragHandleMouseDown(event, <%# Container.DisplayIndex %>);'> <%--My item content here--%> </div> </div></ItemTemplate>This is the minimum of markup you need to make an arbitrary element your drag handle.
Greetings,
Veli
the Telerik team
Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>