how can I set the width with ShowIndicator="true"

9 posts, 1 answers
  1. moegal
    moegal avatar
    276 posts
    Member since:
    Jul 2007

    Posted 19 Nov 2012 Link to this post

    I am trying to use the following:


    <telerik:RadTextBox ID="PasswordInput1" runat="server" ValidationGroup="AccountCreate"
                    Label="Enter password:"
                    TextMode="Password" onkeyup="checkPasswordMatch()" Width="300" LabelWidth="150">
                    <PasswordStrengthSettings ShowIndicator="true" TextStrengthDescriptions="Level1;Level2;Level3;Level4;Level5"
                        IndicatorElementBaseStyle="PasswordBase" TextStrengthDescriptionStyles="L0;L1;L2;L3;L4;L5"
                        IndicatorElementID="CustomIndicator"></PasswordStrengthSettings>
                </telerik:RadTextBox>

    but the field is actually 50px, and not the 150px I am expecting.  I tried to change the overall Width to 400px instead of 300px and the field width is correct but my alignment is fouled up.

    Any ideas?

    Thanks, Marty


  2.
  3. Answer
    Eyup
    Admin
    Eyup avatar
    3644 posts

    Posted 22 Nov 2012 Link to this post

    Hello Marty,

    Thank you for contacting us.

    The default width of the indicator element is 100px as stated in the following article:
    http://www.telerik.com/help/aspnet-ajax/input-textbox-pasword-strength-checker.html

    You could use the following property to modify it as requested:
    <PasswordStrengthSettings ... IndicatorWidth="10px">

    I hope this will prove helpful. Please give it a try and let me know about the result.

    Kind regards,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. moegal
    moegal avatar
    276 posts
    Member since:
    Jul 2007

    Posted 23 Nov 2012 Link to this post

    Thanks, 


    I ended up with:

    <div>
                <telerik:RadTextBox ID="PasswordInput1" runat="server" ValidationGroup="AccountCreate"
                    Label="*Enter Password:"
                    TextMode="Password" onkeyup="checkPasswordMatch()" Width="300" LabelWidth="150">
                    <PasswordStrengthSettings ShowIndicator="true" TextStrengthDescriptions="Level1;Level2;Level3;Level4;Level5"
                        IndicatorElementBaseStyle="PasswordBase" TextStrengthDescriptionStyles="L0;L1;L2;L3;L4;L5"
                        IndicatorElementID="CustomIndicator" IndicatorWidth="0px" PreferredPasswordLength="8"></PasswordStrengthSettings>
                </telerik:RadTextBox>
            </div>
    <div>
                <telerik:RadTextBox ID="PasswordInput2" runat="server" ValidationGroup="AccountCreate"
                    Label="*Repeat Password:"
                    TextMode="Password" onkeyup="checkPasswordMatch()" Width="300" LabelWidth="150">
                    <ClientEvents></ClientEvents>
                </telerik:RadTextBox>
            </div>
            <div style="padding:3px;">
                <span id="CustomIndicator"> </span> <span id="PasswordRepeatedIndicator" class="PasswordBase L0"></span>
            </div>

  7. Keen
    Keen avatar
    101 posts
    Member since:
    Mar 2013

    Posted 15 Oct 2014 Link to this post

    How to get the text of the chose TextStrengthDescriptions ?
  8.
  9. Eyup
    Admin
    Eyup avatar
    3644 posts

    Posted 17 Oct 2014 Link to this post

    Hi Keen,

    You can use the following approach to access the requested text:
    function buttonClick() {
        var textBox = $find('<%= PasswordInput1.ClientID %>');
        var indicatorID = textBox.get_passwordSettings().IndicatorElementID;
        var indicatorEl = $get(indicatorID);
     
        var value = $(indicatorEl).text();
    }

    Hope this helps. Please give it a try and let me know if it works for you.

    Regards,
    Eyup
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. Keen
    Keen avatar
    101 posts
    Member since:
    Mar 2013

    Posted 20 Oct 2014 Link to this post

    Hi Eyup

            I tried the codes you gave but it doesn't work. 
            Thank you for the assistance. Still not yet working


    Regards,
    Keen
  13. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 22 Oct 2014 Link to this post

    Hi Keen,

    Note that the "TextStrengthDescription" is a custom array of values that you could manual set and they affect only the client side.
    I'm not completely sure what thee exact functionality you need to achieve is.
    Please elaborate a bit more on it so that we could further assist.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  14.
  15. Keen
    Keen avatar
    101 posts
    Member since:
    Mar 2013

    Posted 23 Oct 2014 Link to this post

    Hi Maria,

           For Example my input password have the indicator strength "Strong". I can get the string "Strong".
           Is there a function to get the result strength indicator ??
           

    Regards,
    Keen
  17. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 28 Oct 2014 Link to this post

    Hi Keen,

    You can subscribe to the "OnClientPasswordStrengthCalculating"  event and get the required value as shown in the online demo below:

    http://demos.telerik.com/aspnet-ajax/input/examples/common/passwordstrengthchecker/defaultcs.aspx

    If you need the value on the server you can get it on the client, keep it in a hidden filed and pass it to the server when needed.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top