TreeView in Usercontrol

4 posts, 1 answers
  1. WebDeveloper
    WebDeveloper avatar
    10 posts
    Member since:
    Aug 2010

    Posted 03 Sep 2010 Link to this post

    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 Snippet
    '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.
  2. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 08 Sep 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. WebDeveloper
    WebDeveloper avatar
    10 posts
    Member since:
    Aug 2010

    Posted 13 Sep 2010 Link to this post

    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:
    Snippet
    <%@ 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:
    Snippet

    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:
    Snippet

    <%@ 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:
    Snippet
    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
  5. Answer
    Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 20 Sep 2010 Link to this post

    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
Back to Top