[Solved] Tree View and Ajax Controls

[Brent]

Hello,

I am trying to get clicks on tree view to load WebSuerControls to display new information, rather than loading the whiole page. I managed to do this without treeview using simple buttons, but cannot get it to work in treeview.

The code is as follows:

<div class="column first" id="">
                <telerik:RadTreeView ID="RadTreeView1" Runat="server">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Load WebUserControl1.ascx" OnClick="Button1_Click" ID="Button1" >
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Load WebUserControl2.ascx" OnClick="Button2_Click" ID="Button2">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode3">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode4">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeView>
                <br />

                <asp:Button ID="Button3" runat="server" Text="Load WebUserControl1.ascx" OnClick="Button1_Click" />
<asp:Button ID="Button4" runat="server" Text="Load WebUserControl2.ascx" OnClick="Button2_Click" />


<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
   <AjaxSettings>
       <telerik:AjaxSetting AjaxControlID="Button1">
           <UpdatedControls>
               <telerik:AjaxUpdatedControl ControlID="Panel1" />
           </UpdatedControls>
       </telerik:AjaxSetting>
       <telerik:AjaxSetting AjaxControlID="Button2">
           <UpdatedControls>
               <telerik:AjaxUpdatedControl ControlID="Panel1" />
           </UpdatedControls>
       </telerik:AjaxSetting>
   </AjaxSettings>
</telerik:RadAjaxManager>


        </div>
        <div class="column last">
                <h3>Multivariate Data Analysis</h3>
                <asp:Panel ID="Panel1" runat="server">
</asp:Panel>
            </div>

And code behind:

Partial Class InSite_test_Default
    Inherits System.Web.UI.Page



    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Me.Load
        If (Not Me.CurrentControl Is String.Empty) Then
            Me.LoadMyUserControl(Me.CurrentControl, Panel1)
        End If
    End Sub

    Protected Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
        Me.LoadMyUserControl("WebUserControl1.ascx", Panel1)
    End Sub

    Protected Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
        Me.LoadMyUserControl("WebUserControl2.ascx", Panel1)
    End Sub

    Private Property CurrentControl() As String
        Get
            Return IIf(Me.ViewState("CurrentControl") Is Nothing, String.Empty, Me.ViewState("CurrentControl"))
        End Get
        Set(ByVal Value As String)
            Me.ViewState("CurrentControl") = Value
        End Set
    End Property

    Private Sub LoadMyUserControl(ByVal controlName As String, ByVal parent As Control)
        parent.Controls.Clear()
        Dim MyControl As UserControl = Me.LoadControl(controlName)
        Dim userControlID As String = controlName.Split(".")(0)
        MyControl.ID = userControlID.Replace("/", "").Replace("~", "")
        parent.Controls.Add(MyControl)
        Me.CurrentControl = controlName
    End Sub

End Class

Please help?

Tris.

[Simon]

Hi Brent,

You need to handle the NodeClick event of the RadTreeView itself to make this work.

Please see this demo showing how to that.

Best wishes,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Brent]

Thanks Simon,

I tried it, but I still can't figure out how to get a click on each node to display a different webusercontrol. Here is what I changed:

<telerik:RadTreeView ID="RadTreeView1" Runat="server" OnNodeClick="RadTreeView1_NodeClick">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1" >
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Load WebUserControl1.ascx" >
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2"
                            OnClick="Button2_Click" ID="Button2">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Load WebUserControl2.ascx">
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeView>

Code behind:

Imports Telerik.Web.UI

Partial Class InSite_test_Default
    Inherits System.Web.UI.Page



    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Me.Load
        If (Not Me.CurrentControl Is String.Empty) Then
            Me.LoadMyUserControl(Me.CurrentControl, Panel1)
        End If
    End Sub

    Protected Sub RadTreeView1_NodeClick(ByVal sender As Object, ByVal e As RadTreeNodeEventArgs)
        Me.LoadMyUserControl("WebUserControl1.ascx", Panel1)
    End Sub

    Protected Sub RadTreeView1_NodeClick(ByVal sender As Object, ByVal e As RadTreeNodeEventArgs)
        Me.LoadMyUserControl("WebUserControl2.ascx", Panel1)
    End Sub

    Private Property CurrentControl() As String
        Get
            Return IIf(Me.ViewState("CurrentControl") Is Nothing, String.Empty, Me.ViewState("CurrentControl"))
        End Get
        Set(ByVal Value As String)
            Me.ViewState("CurrentControl") = Value
        End Set
    End Property

    Private Sub LoadMyUserControl(ByVal controlName As String, ByVal parent As Control)
        parent.Controls.Clear()
        Dim MyControl As UserControl = Me.LoadControl(controlName)
        Dim userControlID As String = controlName.Split(".")(0)
        MyControl.ID = userControlID.Replace("/", "").Replace("~", "")
        parent.Controls.Add(MyControl)
        Me.CurrentControl = controlName
    End Sub

End Class

[Simon]

Hi Brent,

One possible way of resolving this is to set the name of the UserControl corresponding to each Node to the Node's Value property. 

<telerik:RadTreeView ID="RadTreeView1" Runat="server" OnNodeClick="RadTreeView1_NodeClick">
    <Nodes>
        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1" >
            <Nodes>
                <telerik:RadTreeNode runat="server" Text="Load WebUserControl1.ascx" Value="WebUserControl1.ascx">
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2">
            <Nodes>
                <telerik:RadTreeNode runat="server" Text="Load WebUserControl2.ascx" Value="WebUserControl2.ascx">
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

Then you will need only one NodeClick event handler in which you can do the following:

Protected Sub RadTreeView1_NodeClick(ByVal sender As Object, ByVal e As RadTreeNodeEventArgs)
    Me.LoadMyUserControl(e.Node.Value, Panel1)
End Sub

Greetings,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.