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

[Solved] Dropping nodes on RadTextBox seems brittle

1 Answer 79 Views

TreeView

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

Ulrik asked on 25 Jun 2010, 01:11 PM

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.

    
            <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

Accepted

answered on 01 Jul 2010, 08:02 AM

default.zip

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:

<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