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

Icons

RadStepper allows configuring the icons in the Steps indicator elements. All the built-in icons distributed with Telerik UI for ASP.NET AJAX suite can be used in the Stepper. In addition, all the Kendo UI Web Font Icons are also available for using in the component.

To include a desired embedded icon use the exposed icon properties - Icon, SuccessIcon of the RadStepper.

<telerik:RadStepper runat="server" ID="RadStepper1">
    <Steps>
        <telerik:StepperStep Label="Home" Icon="home" SuccessIcon="success" />
        <telerik:StepperStep Label="Settings" Icon="gear" />
        <telerik:StepperStep Label="Attachments" Icon="attachment" />
        <telerik:StepperStep Label="Save" Icon="save" />
    </Steps>
</telerik:RadStepper>

  • DefaultCS.aspx
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container" runat="server">
        <telerik:RadStepper runat="server" ID="RadStepper1">
            <Steps>
                <telerik:StepperStep Label="Home" Icon="home" />
                <telerik:StepperStep Label="Settings" Icon="gear" />
                <telerik:StepperStep Label="Attachments" Icon="attachment" />
                <telerik:StepperStep Label="Save" Icon="save" />
            </Steps>
        </telerik:RadStepper>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance