I have an application where the user should be able to drag nodes from a treeview to a form. It doesn't really matter what element the node gets dragged to, as long as it is dropped in the form area.
To detect where a node was dropped, I use the OnClientNodeDropping event. However, it seems that this event only fires sometimes when the receiving element is a RadTextBox! In about half of the cases, it seems like the release of the mouse button is not detected, and the user is forced to click to fire the OnClientNodeDropping event.
I have here a simple example that shows the problem. To reproduce, place the cursor in the textbox, and drag a node from the tree view to the textbox (possibly repeat). This is tested on FireFox 3.6.4.
I hope someone can help me. It seems like the problem never appears if I just use a normal <asp:textbox> control, but I really would like to keep the RadTextBox controls on the page.
Thanks,
Ulrik Rasmussen
To detect where a node was dropped, I use the OnClientNodeDropping event. However, it seems that this event only fires sometimes when the receiving element is a RadTextBox! In about half of the cases, it seems like the release of the mouse button is not detected, and the user is forced to click to fire the OnClientNodeDropping event.
I have here a simple example that shows the problem. To reproduce, place the cursor in the textbox, and drag a node from the tree view to the textbox (possibly repeat). This is tested on FireFox 3.6.4.
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title></title> |
| <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| <Scripts> |
| <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> |
| <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> |
| </Scripts> |
| </telerik:RadScriptManager> |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> |
| </telerik:RadAjaxManager> |
| <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Office2007"> |
| </telerik:RadSkinManager> |
| <div style="border: 1px solid black" runat="server"> |
| <telerik:RadTreeView runat="server" ID="treeview" EnableDragAndDrop="true" EnableDragAndDropBetweenNodes="false" OnClientNodeDropping="NodeDropping"> |
| <Nodes> |
| <telerik:RadTreeNode Text="TestNode"> |
| </telerik:RadTreeNode> |
| <telerik:RadTreeNode Text="Skinke"> |
| </telerik:RadTreeNode> |
| <telerik:RadTreeNode Text="Kaj er en kage"> |
| </telerik:RadTreeNode> |
| </Nodes> |
| </telerik:RadTreeView> |
| <div id="Div1" style="border: 1px solid red" runat="server"> |
| <table style="border: 1px solid blue" runat="server" id="sometable"> |
| <tr> |
| <td>Cell1</td><td>Cell2</td> |
| </tr> |
| <tr> |
| <td>Cell3</td> |
| <td><telerik:RadTextBox runat="server"></telerik:RadTextBox></td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| </form> |
| <telerik:RadScriptBlock runat="server"> |
| <script type="text/javascript" language="javascript"> |
| function NodeDropping(sender, args) |
| { |
| var table = $get('<%=sometable.ClientID %>'); |
| var elem = args.get_htmlElement(); |
| if (!elem) return; |
| while (elem != null) |
| { |
| if (elem == table) |
| { |
| alert('dropped on table!'); |
| return; |
| } |
| elemelem = elem.parentNode; |
| } |
| alert('not dropped on table'); |
| } |
| </script> |
| </telerik:RadScriptBlock> |
| </body> |
| </html> |
I hope someone can help me. It seems like the problem never appears if I just use a normal <asp:textbox> control, but I really would like to keep the RadTextBox controls on the page.
Thanks,
Ulrik Rasmussen
1 Answer, 1 is accepted
0
Accepted
Hi Ulrik,
Your observation is correct. RadInput controls prevent the mouseup client event in WebKit browsers (Firefox, Safari and Chrome) due to an issue with the selection on focus. Therefore, the mouseup event does not bubble from the RadInput controls.
To work around this limitation you can:
1. Use RadInputManager instead of RadTextBox.
2. Use RadTreeViews client-side OnClientNodeDragStart event to raise a boolean flag indicating a node is dragged. Then, overwrite RadInputControl's mouseup handler to prevent the mouseup event bubble cancelation:
Javascript:
Modified sample page you provided is attached.
All the best,
Veli
the Telerik team
Your observation is correct. RadInput controls prevent the mouseup client event in WebKit browsers (Firefox, Safari and Chrome) due to an issue with the selection on focus. Therefore, the mouseup event does not bubble from the RadInput controls.
To work around this limitation you can:
1. Use RadInputManager instead of RadTextBox.
2. Use RadTreeViews client-side OnClientNodeDragStart event to raise a boolean flag indicating a node is dragged. Then, overwrite RadInputControl's mouseup handler to prevent the mouseup event bubble cancelation:
<telerik:RadTreeView runat="server" ID="treeview" EnableDragAndDrop="true" EnableDragAndDropBetweenNodes="false" OnClientNodeDropping="NodeDropping" OnClientNodeDragStart="NodeDragStart"> </telerik:RadTreeView>Javascript:
function NodeDropping(sender, args){ //clear the boolean flag window.treeNodeDragging = false; var table = $get('<%=sometable.ClientID %>'); var elem = args.get_htmlElement(); if (!elem) return; while (elem != null) { if (elem == table) { alert('dropped on table!'); return; } elem = elem.parentNode; } alert('not dropped on table');}function NodeDragStart(sender, args){ //raise a boolean flag indicating a node is dragged window.treeNodeDragging = true;}Telerik.Web.UI.RadInputControl.prototype._onTextBoxMouseUpHandler = function (e){ //prevent mouseup bubbling cancelation if a node is dragged if (window.treeNodeDragging) { return; } //selectiononfocus in Safari/Chrome/FF when tabbing if (($telerik.isSafari || $telerik.isFirefox) && this._allowApplySelection) { this._allowApplySelection = false; this._updateSelectionOnFocus(); e.preventDefault(); e.stopPropagation(); }}Modified sample page you provided is attached.
All the best,
Veli
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items