How to Use an EmptyMessage with Password RadTextBoxes

Thread is closed for posting
1 posts, 1 answers
  1. Answer
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 02 Dec 2009 Link to this post

    Requirements
    RadControls for ASP .NET AJAX version 2008.1.415 and later
    .NET version 2.0 and later
    Visual Studio version 2005 and later
    Programming language Javascript, C#
    Browser support

    all browsers supported by RadControls for ASP .NET AJAX

    PROJECT DESCRIPTION
    Sometimes you may want to have a textbox' label inside the textbox itself, which is accomplished by the RadTextBox' EmptyMessage. However, this does not work for password texboxes, as they are unable to display non-masked content. The workaround is to have a separate label positioned over the RadTextBox. It can be hidden and shown depending on the RadTextBox value and with the help of the control's API. Here is how to do it:

    <%@ Page Language="C#" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <script runat="server"> 
     
        protected void Page_Load(object sender, EventArgs e) 
        { 
           //if you use Q3 2011 or earlier:
           //myLabel.Attributes.Add("for", RadTextBox1.ClientID + "_text");
           //if you use Q1 2012 or later:       
           myLabel.Attributes.Add("for", RadTextBox1.ClientID);
        } 
         
    </script> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
    <title>RadControls for ASP.NET AJAX</title> 
    <style type="text/css"> 
     
    .myWrapper 
    { 
        position:relative; 
        width:120px; 
    } 
     
    .myLabel 
    { 
        position:absolute; 
        top:0; 
        left:0; 
        z-index:3; 
        width:100%; 
        padding-left:2px; 
        font:12px/22px 'segoe ui',arial,sans-serif; 
        color:#666; 
    } 
     
    </style> 
    </head> 
    <body> 
    <form id="form1" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <div class="myWrapper"> 
        <label class="myLabel" id="myLabel" runat="server">Password</label> 
        <telerik:RadTextBox ID="RadTextBox1" runat="server" TextMode="Password" Width="100%"> 
            <ClientEvents OnFocus="myFocus" OnBlur="myBlur" OnValueChanged="myValueChanged" />  
        </telerik:RadTextBox> 
    </div> 
     
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
    <script type="text/javascript"> 
     
    function myFocus(sender, args) 
    { 
        $get("<%= myLabel.ClientID %>").style.display = "none"; 
    } 
     
    function myBlur(sender, args) 
    { 
        if (sender.get_value() == "") 
            $get("<%= myLabel.ClientID %>").style.display = ""; 
    } 
     
    function myValueChanged(sender, args) 
    { 
        if (args.get_newValue() == "") 
            $get("<%= myLabel.ClientID %>").style.display = ""; 
        else 
            $get("<%= myLabel.ClientID %>").style.display = "none"; 
    } 
     
    </script> 
    </telerik:RadCodeBlock> 
     
    </form> 
    </body> 
    </html> 


    Note that positioned elements trigger a layout bug in Internet Explorer, if they are placed inside a scrollable container. In this case you should set a position:relative CSS style to the scrollable container as well.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.