Extending Password Strength Checker with RadRating

Thread is closed for posting
2 posts, 0 answers
  1. Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 14 Jul 2011 Link to this post


    RadControls version 2011 Q2
    .NET version 3.5 and 4.0
    Visual Studio version 2010
    programming language JavaScript
    browser support

    all browsers supported by RadControls

    When I first see Password Strength Checker functionality I decide to add some visual richness. Here is how I implement this with help of RadRating.
    <script type="text/javascript">
        function updateRating(sender, args) {
            var calculatedScore = args.get_strengthScore();
            var radRating = $find("<%=RadRating1.ClientID %>");
            if (radRating != null) {
                var ratingItemCount = radRating._itemCount;
                var theValue = calculatedScore / (100 / ratingItemCount);
    <telerik:RadTextBox ID="PasswordInput1" Width="250px" runat="server" Label="Enter password:"
        <PasswordStrengthSettings ShowIndicator="true" OnClientPasswordStrengthCalculating="updateRating"
            IndicatorElementID="dummySpan" />
    <span id="dummySpan" style="visibility: hidden;"></span>
    <telerik:RadRating ID="RadRating1" runat="server" Precision="Exact" ItemCount="5"
        ReadOnly="True" />

    Some notes

    1. If you do not set ShowIndicator to true updateRating is not fired.
    2. When setting ShowIndicator to true but not setting IndicatorElementID property, default IndicatorElement is shown as well, which is not our goal. So I had to set IndicatorElementID to a dummy, invisible span object.
    3. null checking of radRating is required because, updateRating is fired for the initial load of page and radRating is null for the first time.

    Any improvements are welcome.

  2. Tsvetina
    Tsvetina avatar
    1862 posts

    Posted 14 Jul 2011 Link to this post

    Hi Barbaros,

    Thanks for your submission. Indeed this is an interesting approach.

    If I could suggest a tip, it is to not use a span but to directly set IndicatorElementID to some dummy ID. This way would be a little more optimized since otherwise, the password strength checker would change the span's style each time it makes a calculation. At the same time, it performs a check on the existence of the element, so no errors would occur if it does not find the <span> on the page.

    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top