New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Adding new nodes to RadTreeView with Ajax requests from the client

Updated on Oct 24, 2025

Environment

ProductRadTreeView for ASP.NET AJAX

Description

Find out two ways of adding new nodes to RadTreeView on a button click with an Ajax request with the help of RadAjaxManager and RadAjaxPanel in the Solution section below:

Solution

Scenario 1: RadAjaxManager and ajaxRequest:

ASPX
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>RadAjaxManager and ajaxRequest</title>
</head>

<body>
    <script type="text/javascript">
        function refreshWindow() {
            $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest();
        }
    </script>

    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadButton1" />
                        <telerik:AjaxUpdatedControl ControlID="treeEmployees" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadButton1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="treeEmployees" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <div style="height: 200px; width: 300px;">
            <telerik:RadTreeView ID="treeEmployees" runat="server" ShowLineImages="False" Skin="Glow" ForeColor="Black">
            </telerik:RadTreeView>
        </div>

        <telerik:RadButton ID="RadButton1" runat="server" Text="Add a new Treeview Node" AutoPostBack="false" OnClientClicked="refreshWindow"></telerik:RadButton>
    </form>
</body>
</html>
C#
using Telerik.Web.UI;

partial class testForm : System.Web.UI.Page
{
    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        RadTreeNode mainNode;

        mainNode = new RadTreeNode();
        mainNode.Text = "Testing";

        treeEmployees.Nodes.Add(mainNode);
    }
}

Scenario 2: RadAjaxPanel and ajaxRequest:

ASPX
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>

<body>
    <script type="text/javascript">

        function refreshWindow() {
            $find("<%= RadAjaxPanel1.ClientID %>").ajaxRequest();
        }
    </script>

    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

        <div>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px" OnAjaxRequest="RadAjaxPanel1_AjaxRequest">
                <telerik:RadTreeView ID="treeEmployees" runat="server" ShowLineImages="False" Skin="Glow" ForeColor="Black">
                </telerik:RadTreeView>
            </telerik:RadAjaxPanel>

            <telerik:RadButton ID="RadButton1" runat="server" Text="Add a new Treeview Node" AutoPostBack="false" OnClientClicked="refreshWindow"></telerik:RadButton>
        </div>
    </form>
</body>
</html>
C#
using Telerik.Web.UI;

partial class testForm : System.Web.UI.Page
{
    protected void RadAjaxPanel1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        RadTreeNode mainNode;

        mainNode = new RadTreeNode();
        mainNode.Text = "Testing";

        treeEmployees.Nodes.Add(mainNode);
    }
}
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support