TreeView in Usercontrol

[WebDeveloper]

Dear Support,

I have a Treeviiew inside an usercontrol. On my page i have this user control and a Grid. I am trying to implement the Drag and drop from Tree to the Grid. But the

'RadTreeView_NodeDrop' 
event in the UserControl does not fire in this case. If the tree is not in an user control but directrly 
on the Page it works fine.

Is it that the since its in user control the Node Drop does not fire or internally the Drop gets 
cancelled as soon as the Drop goes outside the user control containing the Treeview.

Is there a work around for this?

Thanks.

[Nikolay Tsenkov]

Hello WebDeveloper,

Could you, please, post the code of the user control and a simple page which reproduces this behavior?
Thanks!

This way I can, probably, resolve this for you and post back the page with working as expected drag and drop.

Hope that soon we will resolve this on for you!


Regards,
Nikolay Tsenkov
the Telerik team

[WebDeveloper]

Dear Support,

Problem:
The event Handler:

CtrlTreeView1_RadTreeView1_NodeDrop

does  not fire. Even if we declare our own custom event in the user control and raise it on NodeDrop from usercontrol and listen that in the page, the Node Drop inside the control also does not get fired.
 
Here is the code:

UserControl with the Treeview
Markup:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="CtrlTreeView.ascx.vb"
    Inherits="Sample.CtrlTreeView" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<div>
    <script language="javascript" type="text/javascript">
        function ClientNodeClicked(sender, eventArgs) {
            var node = eventArgs.get_node();
            node.toggle();
        }
    </script>
    <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="True" ExpandMode="ClientSide" OnNodeDataBound="RadTreeView1_NodeDataBound"
        OnClientNodeClicked="ClientNodeClicked">
        <%--<NodeTemplate> user can user it for their own style
            <a>
                <%# DataBinder.Eval(Container, "Text")%>
            </a>
        </NodeTemplate>--%>
    </telerik:RadTreeView>
</div>

vb:

Imports Telerik.Web.UI

Public Class CtrlTreeView
    Inherits System.Web.UI.UserControl


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim objPage As BasePage
        If Not Page.IsPostBack Then
            Dim dt As DataTable

            If Me.Parent IsNot Nothing AndAlso TypeOf Me.Page Is BasePage Then
                objPage = DirectCast(Me.Page, BasePage)
                dt = objPage.GetDataFromStore(EnumECEnt.EnmAppStorage.Application, C_APP_DATA_DSMODULEMANAGER)

                RadTreeView1.DataSource = dt
                RadTreeView1.DataTextField = "Name"
                RadTreeView1.DataFieldParentID = "ParentID"
                RadTreeView1.DataFieldID = "ID"
                RadTreeView1.DataBind()
            End If

        End If
    End Sub

    Protected Sub RadTreeView1_NodeDataBound(ByVal sender As Object, ByVal e As RadTreeNodeEventArgs) Handles RadTreeView1.NodeDataBound
        e.Node.ToolTip = (DirectCast(e.Node.DataItem, DataRowView))("TOOLTIP").ToString()
        e.Node.ImageUrl = (DirectCast(e.Node.DataItem, DataRowView))("Normal_Icon").ToString()
        e.Node.HoveredImageUrl = (DirectCast(e.Node.DataItem, DataRowView))("Hover_Icon").ToString()
        e.Node.SelectedImageUrl = (DirectCast(e.Node.DataItem, DataRowView))("SELECTED_ICON").ToString()
        e.Node.Attributes.Add("Type", DirectCast(e.Node.DataItem, DataRowView).Row("TYPE"))

        If DirectCast(e.Node.DataItem, DataRowView).Row("TYPE") <> "FEATURE" Then
            e.Node.AllowDrag = False
        Else
            e.Node.AllowDrag = True
        End If
    End Sub



    

End Class




Page in which am using the above Control
Markup:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="Sample.WebForm1" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<%@ Register src="../Modules/Tools/UI/CtrlTreeView.ascx" tagname="CtrlTreeView" tagprefix="uc1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <uc1:CtrlTreeView ID="CtrlTreeView1" runat="server" />
    
        <telerik:RadGrid ID="RadGrid1" runat="server">
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>

vb:

Public Class WebForm1
    Inherits System.Web.UI.Page
 
 
    Private Sub WebForm1_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        AddHandler CtrlTreeView1.RadTreeView1.NodeDrop, AddressOf CtrlTreeView1_RadTreeView1_NodeDrop
 
    End Sub
 
 
 
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
    End Sub
 
 
    Private Sub CtrlTreeView1_RadTreeView1_NodeDrop(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTreeNodeDragDropEventArgs)
        MsgBox("Drop over")
    End Sub
 
End Class

[Nikolay Tsenkov]

Hello WebDeveloper,

Sorry for the late response.
I have modified your code just a little bit and the handler for nodeDrop worked!
Basically, all I did, is to add a public property for the RadTreeView1 instance in the user control, and some minor changes on the dataSource (hardcoded it) and some other small modifications that enabled me to run and test the solution.

Here is how it looks now:
1. user control markup:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<div>
    <script language="javascript" type="text/javascript">
        function ClientNodeClicked(sender, eventArgs) {
            var node = eventArgs.get_node();
            node.toggle();
        }
    </script>

    <asp:ScriptManager runat="server" ID="ScriptManager1" />

    <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="True" ExpandMode="ClientSide" OnNodeDataBound="RadTreeView1_NodeDataBound"
        OnClientNodeClicked="ClientNodeClicked">
        <%--<NodeTemplate> user can user it for their own style
            <a>
                <%# DataBinder.Eval(Container, "Text")%>
            </a>
        </NodeTemplate>--%>
    </telerik:RadTreeView>
</div>

2. user control code-behind has a new property for the RadTreeView1 instance to be publicly accessible (and hardcoded the dataSource, and removed dependencies so I can test and debug):

Public Property TreeView As RadTreeView
    Get
        Return Me.RadTreeView1
    End Get
    Set(ByVal value As RadTreeView)

    End Set
End Property

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not Page.IsPostBack Then

        Dim dataTable As DataTable = New DataTable()
        dataTable.Columns.Add("FOBName")
        dataTable.Columns.Add("FOBID")
        dataTable.Columns.Add("ParentID")
        dataTable.Columns.Add("IsChecked")

        Dim element As String() = {"root node1", "1", Nothing, "false"}
        dataTable.Rows.Add(element)
        element = {"root node2", "2", Nothing, "false"}
        dataTable.Rows.Add(element)
        element = {"root node3", "3", Nothing, "false"}
        dataTable.Rows.Add(element)
        element = {"root node4", "4", Nothing, "false"}
        dataTable.Rows.Add(element)
        element = {"root node5", "5", Nothing, "false"}
        dataTable.Rows.Add(element)
        element = {"root node6", "6", Nothing, "false"}
        dataTable.Rows.Add(element)
        element = {"node11", "7", "1", "false"}
        dataTable.Rows.Add(element)

        RadTreeView1.DataSource = dataTable
        RadTreeView1.DataTextField = "FOBName"
        RadTreeView1.DataFieldParentID = "ParentID"
        RadTreeView1.DataFieldID = "FOBID"
        RadTreeView1.DataBind()

    End If
End Sub

Protected Sub RadTreeView1_NodeDataBound(ByVal sender As Object, ByVal e As RadTreeNodeEventArgs) Handles RadTreeView1.NodeDataBound

End Sub

3. the page markup:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register src="345164 - nodeDrop treeView in userControl.ascx" tagname="CtrlTreeView" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <uc1:CtrlTreeView ID="CtrlTreeView1" runat="server" />

        <telerik:RadGrid ID="RadGrid1" runat="server">
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>

(I think this shouldn't be any different)
4. page code-behind:

Private Sub WebForm1_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
    AddHandler CtrlTreeView1.TreeView.NodeDrop, AddressOf CtrlTreeView1_RadTreeView1_NodeDrop

End Sub

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub

Private Sub CtrlTreeView1_RadTreeView1_NodeDrop(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTreeNodeDragDropEventArgs)
    MsgBox("Drop over")
End Sub

I hope this is helpful for you!
If there are some further complications with this, please, contact with us again! We will be happy to help!


Regards,
Nikolay Tsenkov
the Telerik team