Javascript exception when dragging and dropping

2 posts, 0 answers
  1. Jon
    Jon avatar
    14 posts
    Member since:
    May 2014

    Posted 14 Jul 2015 Link to this post

    I only discovered this after finally realising that a drag/drop between RADTreeviews does not seem to work when the views are databound so I am not even sure if I can use this component.

    After spending some time stylising and getting a data bound treeview working, drag and drop seems to lock up and stop working after one operation.

    To my dismay I discovered articles suggesting that drag and drop is not supported for data bound views but I was convinced that this error was a side issue.

    When I drag from one treeview to another on the same page and both in the same UpdatePanel, in the Chrome Developer window I see an error caused inside what appears to be Ajax scripts

    "Uncaught Sys.ArgumentTypeException: Sys.ArgumentTypeException: Object of type 'Telerik.Web.UI.RadTreeView' cannot be converted to type 'Sys.UI.Control'." Parameter name: instance

    To see whether the problem was related to drag/drop in a databound treeview I stripped out all the code and data bindings and created a simple page like this:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="TVTest.aspx.vb" Inherits="JobManager_TVTest" %>
     
        <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
     
        <script type="text/javascript" src="../Scripts/Onsite.debug.js"></script>
     
        <html xmlns="http://www.w3.org/1999/xhtml">
     
        <head id="Head1" runat="server">
            <title></title>
        </head>
     
        <body>
         
        <form id="form2" runat="server">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">   
                <ContentTemplate>
                    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
                    <div id="ExplorerWindow" style="border: solid 1px silver; width:48%; float:left">           
                        <table ID="Maintable" runat="server" style="width:100%; border-spacing:0px">
                            <tr id="DisplayRow">
                                <td style="width:300px; vertical-align:top; margin:2px; padding:10px">
     
                                    <telerik:radtreeview id="RadTreeView" runat="server" style="overflow:auto;"  
                                            EnableDragAndDrop="True" OnClientNodeClicked="onClientNodeClicked"
                                             OnNodeDrop="RadTreeView1_NodeDrop"
                                        DataFieldParentID="ParentID" ResolvedRenderMode="Classic"  >
                                   <NodeTemplate>
                                        <div>
                                            <img src="../Images/16 x 16/Complete.bmp" alt="" style="border-width:0px;">
                                            <asp:CheckBox ID="CheckBox1" runat="server" />
                                        </div>
                                    </NodeTemplate>
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                                                        <Nodes>
                                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">
                                                                <Nodes>
                                                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 4">
                                                                        <NodeTemplate>
                                                                            four
                                                                        </NodeTemplate>
                                                                    </telerik:RadTreeNode>
                                                                </Nodes>
                                                                <NodeTemplate>
                                                                    three
                                                                </NodeTemplate>
                                                            </telerik:RadTreeNode>
                                                        </Nodes>
                                                        <NodeTemplate>
                                                            two
                                                        </NodeTemplate>
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                                <NodeTemplate>
                                                    one
                                                </NodeTemplate>
                                            </telerik:RadTreeNode>
                                        </Nodes>                              
                                     </telerik:radtreeview>
     
                                </td>
     
                                <td style="vertical-align:top; padding:10px">
     
                                </td>
     
                            </tr>
     
                        </table>
                                             
                    </div>
     
     
                    <div id="Div1" style="border: solid 1px silver; width:50%; float:right">
                 
                        <table ID="Table1" runat="server" style="width:100%; border-spacing:0px">
                            <tr id="Tr1">
                                <td style="width:300px; vertical-align:top; margin:2px; padding:10px">
     
                                    <telerik:radtreeview id="RadTreeView1" runat="server" style="overflow:auto;"  
                                            EnableDragAndDrop="True" OnClientNodeClicked="onClientNodeClicked"
                                             OnNodeDrop="RadTreeView1_NodeDrop"
                                        DataFieldParentID="ParentID" ResolvedRenderMode="Classic"
                                           EnableDragAndDropBetweenNodes="True">
                                   <NodeTemplate>
                                        <div>
                                            <img src="../Images/16 x 16/Complete.bmp" alt="" style="border-width:0px;">
                                            <asp:CheckBox ID="CheckBox1" runat="server" />
                                        </div>
                                    </NodeTemplate>
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                                                        <Nodes>
                                                            <telerik:RadTreeNode runat="server" Text="Child 3">
                                                                <Nodes>
                                                                    <telerik:RadTreeNode runat="server"
                                                                                                                                                     Text="Child 4">
                                                                        <NodeTemplate>
                                                                            five
                                                                        </NodeTemplate>
                                                                    </telerik:RadTreeNode>
                                                                </Nodes>
                                                                <NodeTemplate>
                                                                    six
                                                                </NodeTemplate>
                                                            </telerik:RadTreeNode>
                                                        </Nodes>
                                                        <NodeTemplate>
                                                            seven
                                                        </NodeTemplate>
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                                <NodeTemplate>
                                                    eight
                                                </NodeTemplate>
                                            </telerik:RadTreeNode>
                                        </Nodes>                              
                                     </telerik:radtreeview>
     
                                </td>
     
                                <td style="vertical-align:top; padding:10px">
     
                                </td>
     
                            </tr>
     
                        </table>
     
                    </div>
     
     
                        </ContentTemplate>
                    </asp:UpdatePanel>
     
                </form>
            </body>
     
        </html>
     
    <script type="text/javascript">
     
        function pageLoad() {
            treeExpandAllNodes()
        }
     
        function treeExpandAllNodes() {
            var treeView = $find("<%= RadTreeView.ClientID %>");
            if (treeView) {
                var nodes = treeView.get_allNodes();
                for (var i = 0; i < nodes.length; i++) {
     
                    if (nodes[i].get_nodes() != null) {
                        nodes[i].expand();
                    }
                }
            }
        }
     
        function treeCollapseAllNodes() {
            var treeView = $find("<%= RadTreeView.ClientID %>");
            var nodes = treeView.get_allNodes();
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].get_nodes() != null) {
                    nodes[i].collapse();
                }
            }
        }
     
        function onClientNodeClicked(treeView, e) {
            var node = e.get_node();
            // if (!node.get_expanded()) {
            node.toggle();
        }
     
    </script>

    and code behind is just this:

     

    Protected Sub RadTreeView1_NodeDrop(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTreeNodeDragDropEventArgs)
        For Each node As RadTreeNode In e.DraggedNodes
            e.DestDragNode.Nodes.Add(node)
        Next
    End Sub

    If I drag one item then not only does the node not move but the Javascript error causes all future drag attempts to do nothing.

    I updated to the latest Telerik version today and that made no difference.

    I and using .net 4.0

    can anyone see what I am doing wrong here?

    thanks

    jON

  2. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 17 Jul 2015 Link to this post

    Hello,

    The problem is not with the TreeView control, but with the placement of the ScriptManager on the page. You should put the ScriptManager outside of the UpdatePanel, in order for the page to work properly.

    Regards,
    Bozhidar
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top