New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Components Visibility

  • Demo Configurator

This example demonstrates how to show/hide some of the RadWizard components such like: navigation bar, progress bar or cancel button. You can manage the visibility of those components by using one of the following RadWizard properties: DisplayNavigationBar, DisplayProgressBar or DisplayCancelButton. Each of those properties expects a boolean value in order to show or hide the component.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Wizard_Functionality_ComponentsVisibility_DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="styles.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="ConfiguratorPanel">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadWizard1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
    <div class="demo-container size-medium">
        <telerik:RadWizard RenderMode="Lightweight" ID="RadWizard1" runat="server"  Height="360px">
            <WizardSteps>
                <telerik:RadWizardStep Title="Project file" CssClass="projectFile">
                    <div class="inputWrapper">
                        <asp:Label ID="ClassNameLabel" runat="server" AssociatedControlID="ClassNameTextBox" Text="Class:"></asp:Label>
                        <telerik:RadTextBox RenderMode="Lightweight" ID="ClassNameTextBox" runat="server" ></telerik:RadTextBox>
                    </div>
                    <div class="inputWrapper">
                        <asp:Label ID="AssemblyLabel" runat="server" AssociatedControlID="AssemblyTextBox" Text="Assembly:"></asp:Label>
                        <telerik:RadTextBox RenderMode="Lightweight" ID="AssemblyTextBox" runat="server" ></telerik:RadTextBox>
                    </div>
                    <div class="inputWrapper">
                        <asp:Label ID="NameSpaceLabel" runat="server" AssociatedControlID="NameSpaceTextBox" Text="Namespace:"></asp:Label>
                        <telerik:RadTextBox RenderMode="Lightweight" ID="NameSpaceTextBox" runat="server" ></telerik:RadTextBox>
                    </div>
                </telerik:RadWizardStep>

                <telerik:RadWizardStep Title="Version">
                    <label>Select a version:</label>
                    <telerik:RadComboBox RenderMode="Lightweight" ID="VersionDropDownList" runat="server"  Width="200px">
                        <Items>
                            <telerik:RadComboBoxItem Text="Q1 2014" Value="2014.1.225" />
                            <telerik:RadComboBoxItem Text="Q1 2014 SP1" Value="2014.1.403" />
                            <telerik:RadComboBoxItem Text="Q2 2014" Value="2014.2.618" />
                            <telerik:RadComboBoxItem Text="Q2 2014 SP1" Value="2014.2.724" />
                        </Items>
                    </telerik:RadComboBox>
                </telerik:RadWizardStep>

                <telerik:RadWizardStep Title="Confirmation" CssClass="confirmation">
                    <div class="inputWrapper">
                        <asp:CheckBox ID="ScriptFolder" runat="server" Checked="true" />
                        <asp:Label ID="ScriptFolderLabel" runat="server" AssociatedControlID="ScriptFolder" Text="Add a script folder:"></asp:Label>
                    </div>
                    <div class="inputWrapper">
                        <asp:CheckBox ID="StyleFolder" runat="server" Checked="false" />
                        <asp:Label ID="StyleFolderLabel" runat="server" AssociatedControlID="StyleFolder" Text="Add a style folder:"></asp:Label>
                    </div>
                </telerik:RadWizardStep>
            </WizardSteps>
        </telerik:RadWizard>
    </div>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel" runat="server">
        <Views>
            <qsf:View Title="" runat="server">
                <span class="checkbox">
                    <asp:CheckBox ID="NavigationBarVisibility" runat="server" Text="Navigation bar visibility" AutoPostBack="true" Checked="true" />
                </span>
                <span class="checkbox">
                    <asp:CheckBox ID="ProgressBarVisibility" runat="server" Text="Progress bar visibility" AutoPostBack="true" Checked="true" />
                </span>
                <span class="checkbox">
                    <asp:CheckBox ID="CancelButtonVisibility" runat="server" Text="Cancel button visibility" AutoPostBack="true" Checked="true" />
                </span>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance