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

Drag and Drop not working in Firefox 5 and previous versions

6 Answers 66 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Dzyann
Top achievements
Rank 1
Dzyann asked on 24 Nov 2011, 05:57 PM
Hi,
I have been looking all over to find if anyone else had this issue, but I couldn't find anything.
In our project we have several Telerik controls, in one particular place, we are using drag and drop from a Rad Grid to a TreeView, it works fine in Firefox 8 and in IE, but in Firefox 5 and previous versions throws the following error:
args.get_destinationHtmlElement().click is not a function

The code we use to drag and drop from the grid to the tree, we took it from this forums.
The error happens in the function:
function dropRowOnTree(args) {
                   args.get_destinationHtmlElement().click();

}

Which is called in:
function onRowDropping(sender, args) {
                    var dest = args.get_destinationHtmlElement();
                    if (dest) {
                        dropRowOnTree(args);
                    }
                }
This is the function to handle the OnClientRowDropping of the grid event.

Using firefug to debug i find that args.get_destinationHtmlElement(), is brining the span where the text of the node is being shown.

The tree is configured like this
<cc1:TreeView ID="treeOptions" runat="server" EnableDragAndDrop="true" OnNodeDrop="treeOptions_HandleDrop"
                                MultipleSelect="true" OnClientNodeDropping="onNodeDropping" EnableDragAndDropBetweenNodes="true">
                                <NodeTemplate>
                                    <div onmouseover="<%#string.Format("javascript:showHideNodeOptions(this, true, '{0}');", Eval("Type")) %>"
                                        onmouseout="javascript:showHideNodeOptions(this, false);" style="margin-right: 10px;">
                                        <span>
                                            <%# DataBinder.Eval(Container.DataItem, "Name") %></span> &nbsp;
                                        <asp:LinkButton CausesValidation="false" ID="imgAdd" Style="display: none; cursor: pointer"
                                            AlternateText="Edit" runat="server" OnCommand="NodeEditClick" CssClass="icon editIcon"
                                            CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Id") %>' />
                                    </div>
                                </NodeTemplate>
                            </cc1:TreeView>

Any help you could give me would be greatly appreciated.

Dzy.-

6 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 25 Nov 2011, 03:39 PM
Hello Dzyann,

The problem is that the Click event doesn't work on span tags and hyperlinks in Firefox. Try putting the contents inside a div or some other container, and attach the click to it. This should solve your problem.
There is also a discussion on the issue here

Greetings,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Dzyann
Top achievements
Rank 1
answered on 25 Nov 2011, 04:24 PM
Hi Bozhidar,

First of all thanks for your quick response!

I read your post and I would like to change my code so it doesn't find a span and gets the div instead. The problem I have, is that my nodes on my tree are already inside a div, as you can see here:

<cc1:TreeView ID="treeOptions" runat="server" EnableDragAndDrop="true" OnNodeDrop="treeOptions_HandleDrop"
MultipleSelect="true" OnClientNodeDropping="onNodeDropping" EnableDragAndDropBetweenNodes="true">
        <NodeTemplate>
             <div onmouseover="<%#string.Format("javascript:showHideNodeOptions(this, true, '{0}');", Eval("Type")) %>" onmouseout="javascript:showHideNodeOptions(this, false);" style="margin-right: 10px;">
                            <span><%# DataBinder.Eval(Container.DataItem, "Name") %></span>  
                             <asp:LinkButton CausesValidation="false" ID="imgAdd" Style="display: none; cursor: pointer"
                               AlternateText="Edit" runat="server" OnCommand="NodeEditClick" CssClass="icon editIcon"
                                CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Id") %>' />
              </div>
     </NodeTemplate>
</cc1:TreeView>

Yet when the function onRowDropping, that is the handler of the event OnClientRowDropping of the grid is called:

 function onRowDropping(sender, args) {
                    var dest = args.get_destinationHtmlElement();
                    if (dest) {
                        dropRowOnTree(args);
                    }
                }
The variable "dest ", cointains a span, and not the div, that is the main container of my node on the tree.

Can you give me any hints on whether what to do, or what may be the problem?

Regards,

Dzy.-
0
Bozhidar
Telerik team
answered on 25 Nov 2011, 05:03 PM
Hi Dzyann,

Once you get the inner span, you can get its parent element with the parentNode property. Then you can call the click function on the parent. Here's how you code should look like:

function onRowDropping(sender, args) {
var dest = args.get_destinationHtmlElement();
if (dest) {
        var destParent = dest.parentNode;
         destParent.click();
}
  }

Greetings,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Dzyann
Top achievements
Rank 1
answered on 25 Nov 2011, 07:08 PM
Hi Bozhidar,

Thanks, for your answer! I tried that, but it keeps telling me that "click is not a function", now for the div element. I tried too, removing the span, and that would I could retrieve directly the div that is the node container, but yet the click event wouldn't work.
I think there might be a problem, on the way the tree is being created? Or maybe I should configure it differently?
The problem, is that I don't know how the event click is supposed to be attached to the element. I think the tree is the one that is supposed to do it? I didn't implement this page, maybe you could guide me on how is the best way to implement the drag and drop from a grid to a drop.

Regards,

Dzy.-
0
Accepted
Bozhidar
Telerik team
answered on 28 Nov 2011, 03:02 PM
Hi Dzyann,

Here is a solution that works in all browsers, as well as in earlier versions of Mozilla:

function rowDropping(sender, args){
    var dest = args.get_destinationHtmlElement();
    if (dest) {
        var destParent = dest.parentNode;
        if (destParent != null)
        {
            if (destParent.fireEvent)
            destParent.fireEvent("onclick");
            else
            {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click", true, true, window,
                                        0, 0, 0, 0, 0, false, false, false, false, 0, null);
            destParent.dispatchEvent(evt);
            }
        }
    }
}

You still have to use the div element though, it doesn't work on span tags.


Best wishes,

Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Dzyann
Top achievements
Rank 1
answered on 29 Nov 2011, 07:18 PM
Hi Bozhidar,
Thank you very much!!! That worked perfectly, I haven't used much javascript, I tried different ways to trigger the event click, but I didn't know of that one.
I tested it in: Firefox 3.6, Firefox 8, IE8 and Chrome.
Regards,

Dzyann.-
Tags
TreeView
Asked by
Dzyann
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Dzyann
Top achievements
Rank 1
Share this question
or