New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
Show/Hide Web Controls

Telerik controls

RadCalendar
RadPanelBar
RadTreeView
Form controls

Button
CheckBoxList
DropDownList
About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application
This demo illustrates how to show/hide Telerik UI for ASP.NET AJAX or other ASP.NET controls using AJAX requests. Consider these two important details:
The controls that are initially hidden should reside in an always visible container (ASP:Panel in this case) which is marked as an updated control through setting the RadAjaxManager.
RadControls will register their skins automatically when updated via RadAjaxManager or RadAjaxPanel. When using MS UpdatePanels, you need to register the skins manually as explained in this help topic (since the ASP.NET AJAX framework does not support dynamic skin registration for initially invisible controls).
It is a common scenario for ASP.NET applications to show/hide controls as a result of user interaction or some event.
You can have the same functionality with RadAjaxManager or RadAjaxPanel as well, but you should have the following in mind — RadAjaxManager relies on the HTML output of controls to be updated, and that's why you need to put the control that should be updated in an always visible container like ASP:Panel. Then set in the RadAjaxManager the AJAX pairs where the AJAX initiator control should update the ASP:Panel. In the code-behind, set the Visible property of the control that should be shown/hidden to true or false accordingly.
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.AjaxManager.ApplicationScenarios.ShowHideWebControls.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rbListRadControls">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rbListRadControls"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="rbListFormControls">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rbListFormControls"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnPostback">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblMessage" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="chkBoxListCountries">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblMessage" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ddlContinents">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblMessage" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadCalendar1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblMessage" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadPanelBar1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblMessage" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTreeView1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblMessage" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

    <div class="demo-containers">
        <div class="demo-container">
            <div class="controlsContainer">
                <h2>Telerik controls</h2>

                <asp:RadioButtonList ID="rbListRadControls" runat="server" AutoPostBack="True" OnSelectedIndexChanged="rbListRadControls_SelectedIndexChanged" RepeatDirection="Horizontal" CssClass="controlsList">
                    <asp:ListItem Value="RadCalendar">RadCalendar</asp:ListItem>
                    <asp:ListItem Value="RadPanelBar">RadPanelBar</asp:ListItem>
                    <asp:ListItem Value="RadTreeView">RadTreeView</asp:ListItem>
                </asp:RadioButtonList>

                <asp:Panel ID="Panel1" runat="server">
                    <table>
                        <tr>
                            <td style="height: 100px; vertical-align: top;">
                                <telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar1" runat="server" EnableMultiSelect="false" Visible="false"
                                    AutoPostBack="true" OnSelectionChanged="RadCalendar1_SelectionChanged">
                                </telerik:RadCalendar>
                                <telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelBar1" runat="server" Visible="false" OnItemClick="RadPanelbar1_ItemClicked">
                                    <Items>
                                        <telerik:RadPanelItem Text="Mail" Expanded="True">
                                            <Items>
                                                <telerik:RadPanelItem Text="Personal Folders">
                                                </telerik:RadPanelItem>
                                                <telerik:RadPanelItem Text="Deleted Items">
                                                </telerik:RadPanelItem>
                                                <telerik:RadPanelItem Text="Inbox">
                                                </telerik:RadPanelItem>
                                            </Items>
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem Text="Contacts">
                                            <Items>
                                                <telerik:RadPanelItem Text="My Contacts">
                                                </telerik:RadPanelItem>
                                                <telerik:RadPanelItem Text="Address Cards">
                                                </telerik:RadPanelItem>
                                                <telerik:RadPanelItem Text="Phone List">
                                                </telerik:RadPanelItem>
                                                <telerik:RadPanelItem Text="Shared Contacts">
                                                </telerik:RadPanelItem>
                                            </Items>
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem Text="Tasks">
                                            <Items>
                                                <telerik:RadPanelItem Text="My Tasks">
                                                </telerik:RadPanelItem>
                                                <telerik:RadPanelItem Text="Shared Tasks">
                                                </telerik:RadPanelItem>
                                                <telerik:RadPanelItem Text="Active Tasks">
                                                </telerik:RadPanelItem>
                                                <telerik:RadPanelItem Text="Completed Tasks">
                                                </telerik:RadPanelItem>
                                            </Items>
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem Text="Notes">
                                            <Items>
                                                <telerik:RadPanelItem Text="My Notes">
                                                </telerik:RadPanelItem>
                                                <telerik:RadPanelItem Text="Notes List">
                                                </telerik:RadPanelItem>
                                                <telerik:RadPanelItem Text="Shared Notes">
                                                </telerik:RadPanelItem>
                                                <telerik:RadPanelItem Text="Archive">
                                                </telerik:RadPanelItem>
                                            </Items>
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem Text="Folders List">
                                            <Items>
                                                <telerik:RadPanelItem Text="My Client.Net">
                                                </telerik:RadPanelItem>
                                                <telerik:RadPanelItem Text="My Profile">
                                                </telerik:RadPanelItem>
                                                <telerik:RadPanelItem Text="My Support Tickets">
                                                </telerik:RadPanelItem>
                                                <telerik:RadPanelItem Text="My Licenses">
                                                </telerik:RadPanelItem>
                                            </Items>
                                        </telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelBar>
                                <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" AccessKey="T" Visible="false"
                                    OnNodeClick="RadTreeView1_NodeClicked">
                                    <Nodes>
                                        <telerik:RadTreeNode Text="Books" Expanded="true">
                                            <Nodes>
                                                <telerik:RadTreeNode Text="Arts">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Biographies">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Cooking">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="History">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Mystery">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Romance">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Science Fiction ">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode Text="Music">
                                            <Nodes>
                                                <telerik:RadTreeNode Text="Alternative">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Classical">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Dance">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Folk ">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Hard Rock">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Jazz">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode Text="Movies">
                                            <Nodes>
                                                <telerik:RadTreeNode Text="Action">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Animation">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Classics">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Comedy">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Documentary">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Drama">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Horror">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Mystery">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>
                                        <telerik:RadTreeNode Text="Software">
                                            <Nodes>
                                                <telerik:RadTreeNode Text="Database">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Networking">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Presentation">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Project Management">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Reports">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Spreadsheet">
                                                </telerik:RadTreeNode>
                                                <telerik:RadTreeNode Text="Word Processing">
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeView>
                            </td>
                        </tr>

                    </table>
                    <br />
                    <br />
                </asp:Panel>

            </div>

            <div class="controlsContainer">
                <h2>Form controls</h2>

                <asp:RadioButtonList ID="rbListFormControls" runat="server" AutoPostBack="True" OnSelectedIndexChanged="rbListFormControls_SelectedIndexChanged" RepeatDirection="Horizontal" CssClass="controlsList">
                    <asp:ListItem Value="Button">Button</asp:ListItem>
                    <asp:ListItem Value="CheckBoxList">CheckBoxList</asp:ListItem>
                    <asp:ListItem Value="DropDownList">DropDownList</asp:ListItem>
                </asp:RadioButtonList>

                <asp:Panel ID="Panel2" runat="server">
                    <table>

                        <tr>
                            <td style="height: 50%">
                                <asp:Button ID="btnPostback" runat="server" Visible="False" Text="Submit" OnClick="btnPostback_Click"></asp:Button>
                                <asp:CheckBoxList ID="chkBoxListCountries" runat="server" AutoPostBack="True" Height="31px"
                                    Width="90px" Visible="False" OnSelectedIndexChanged="chkBoxListCountries_SelectedIndexChanged">
                                    <asp:ListItem Value="item 1">England</asp:ListItem>
                                    <asp:ListItem Value="item 2">USA</asp:ListItem>
                                    <asp:ListItem Value="item 3">Holland</asp:ListItem>
                                </asp:CheckBoxList>

                                <asp:DropDownList ID="ddlContinents" runat="server" AutoPostBack="True" Width="84px"
                                    Visible="False" OnSelectedIndexChanged="ddlContinents_SelectedIndexChanged">
                                    <asp:ListItem Value="Asia">Asia</asp:ListItem>
                                    <asp:ListItem Value="America">America</asp:ListItem>
                                    <asp:ListItem Value="Europe">Europe</asp:ListItem>
                                    <asp:ListItem Value="Africa">Africa</asp:ListItem>
                                </asp:DropDownList>
                            </td>
                        </tr>
                    </table>
                    <br />
                    <br />
                </asp:Panel>
            </div>

            <asp:Label ID="lblMessage" runat="server"></asp:Label>
        </div>
    </div>
    </form>
</body>
</html>
Support & Learning Resources

Find Assistance

Submit a support ticket if you have an active license or trial
Post in the forum if you don't have access to support
Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Show/Hide Web Controls

Telerik controls

Form controls

Support & Learning Resources

Find Assistance
