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

TreeView in Usercontrol

3 Answers 163 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
WebDeveloper
Top achievements
Rank 1
WebDeveloper asked on 03 Sep 2010, 03:00 PM
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.

3 Answers, 1 is accepted

Sort by
0
Nikolay Tsenkov
Telerik team
answered on 08 Sep 2010, 08:57 AM
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
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 Public Issue Tracking system and vote to affect the priority of the items
0
WebDeveloper
Top achievements
Rank 1
answered on 13 Sep 2010, 07:42 AM
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 ObjectByVal e As System.EventArgsHandles 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 ObjectByVal e As RadTreeNodeEventArgsHandles 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 ObjectByVal e As System.EventArgsHandles Me.Init
        AddHandler CtrlTreeView1.RadTreeView1.NodeDrop, AddressOf CtrlTreeView1_RadTreeView1_NodeDrop

    End Sub




    Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgsHandles Me.Load

    End Sub


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

End Class
0
Accepted
Nikolay Tsenkov
Telerik team
answered on 20 Sep 2010, 09:19 AM
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">
  
<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
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 Public Issue Tracking system and vote to affect the priority of the items
Tags
TreeView
Asked by
WebDeveloper
Top achievements
Rank 1
Answers by
Nikolay Tsenkov
Telerik team
WebDeveloper
Top achievements
Rank 1
Share this question
or