ProgressBar - Custom Label

Reset password
New password
Password strength
0
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates how to customize the label in RadProgressBar via its set_label client-side method used in its ValueChanged event handler.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#"  CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ProgressBar.CustomLabel.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js" type="text/javascript"></script>
</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 no-bg">
        <div class="registrationForm">
            <div class="titleBar">
                <span>Reset password</span>
            </div>
            <div class="container">
                <div class="row">
                    <div class="cell">
                        <span class="rfdAspLabel">New password</span>
                    </div>
                    <div class="cell">
                        <telerik:RadTextBox RenderMode="Lightweight" ID="PasswordInput" Width="260px" runat="server" TextMode="Password" EnableSingleInputRendering="false" Skin="Silk">
                            <ClientEvents OnLoad="passwordTextBox_load" />
                        </telerik:RadTextBox>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <span class="rfdAspLabel">Password strength</span>
                    </div>
                    <div class="cell">
                        <telerik:RadProgressBar RenderMode="Lightweight" runat="server" Width="264px" ID="PasswordStrengtProgress" MaxValue="10" Skin="Silk">
                            <ClientEvents OnValueChanged="progressValueChanged" OnLoad="progressBar_load" />
                            <AnimationSettings Duration="0" />
                        </telerik:RadProgressBar>
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                    </div>
                    <div class="cell">
                        <div class="line"></div>
                    </div>
                </div>
                <div class="row rowButton">
                    <div class="cell">
                    </div>
                    <div class="cell">
                        <telerik:RadButton RenderMode="Lightweight" ID="rbSubmit" OnClientClicked="rbSubmitClicked" runat="server" Text="SUBMIT" AutoPostBack="false" CssClass="rbPrimaryButton" Skin="Silk"></telerik:RadButton>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?