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) NextEnd SubIf 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
1 Answer, 1 is accepted
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