Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / FormDecorator / Decorating ASP.NET Wizard's steps

Decorating ASP.NET Wizard's steps

Article Info

Rating: 5

Article information

Article relates to

 RadFormDecorator for ASP.NET AJAX Q2 2009 +

Created by

 Georgi Tunev

Last modified

 2011/05/31

Last modified by

 Marin Bratanov

RadFormDecorator can be used for styling the steps in an asp:wizard control. You can enhance the visual presentation of the wizard by adding custom style to the selected step. In the example below we will use the settings for the selected buttons in the corresponding RadFormDecorator's skin.

  1. Start by adding an asp:wizard control to your page. Declare its SelectedItemTemplate.
  2. Add the RadFormDecorator control in the form - it is best to to add it in the beginning of the form - right after the script manager's declaration.
  3. Wrap the button in a DIV element and apply a custom class to it.
  4. Modify the custom class according to your requirements.
Example:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="FormDecorator_KB_Wizard_Default" %>
 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>
    <style type="text/css">
        .current a.rfdSkinnedButton
        {
            background-position: right -44px !important;
        }
         
        .current a.rfdSkinnedButton .rfdDecorated
        {
            background-position: left -66px !important;
        }
 
         .current a.rfdSkinnedButton:active,
         .current a.rfdSkinnedButton:focus
        {
            background-position: right -88px !important;
        }
         
        .current a.rfdSkinnedButton:active .rfdDecorated,
        .current a.rfdSkinnedButton:focus .rfdDecorated
        {
            background-position: left -110px !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadFormDecorator ID="RadFormDecorator1" Skin="Office2007" runat="server" />
    <asp:Wizard ID="paramWizard" runat="server" Width="500px" Height="350px">
        <SideBarTemplate>
            <asp:DataList runat="Server" ID="SideBarList" ItemStyle-HorizontalAlign="Left">
                <ItemTemplate>
                    <asp:Button runat="server" ID="SideBarButton" Width="160px" />
                </ItemTemplate>
                <SelectedItemTemplate>
                    <div class="current">
                        <asp:Button ID="SideBarButton" runat="server" Width="160px" />
                    </div>
                </SelectedItemTemplate>
            </asp:DataList>
        </SideBarTemplate>
        <WizardSteps>
            <asp:WizardStep ID="WizardStep1" runat="server">
                Step1</asp:WizardStep>
            <asp:WizardStep ID="WizardStep2" runat="server">
                Step2</asp:WizardStep>
            <asp:WizardStep ID="WizardStep3" runat="server">
                Step3</asp:WizardStep>
            <asp:WizardStep ID="WizardStep4" runat="server">
                Step4</asp:WizardStep>
        </WizardSteps>
    </asp:Wizard>
    </form>
</body>
</html>

Here is the final result in the browser:

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.