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

Javascript exception when dragging and dropping

1 Answer 73 Views

TreeView

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

Jon asked on 14 Jul 2015, 10:45 PM

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

Javascript exception when dragging and dropping

1 Answer, 1 is accepted