How to make user entry in RadTextbox as uppercase?

6 posts, 0 answers
  1. Medac
    Medac avatar
    79 posts
    Member since:
    Sep 2008

    Posted 05 May 2010 Link to this post

    Hi,

    I have a radtextbox in my screen. When user enters the characters by default it should display in capital letter.

    I have written like this, but it is not working

    <

     

     

    telerik:RadTextBox ID="radtxtCarrierComments" MaxLength="50" Width="350px" runat="server" onkeypress="return AllowAlphaNumericandSpace(event);" onkeydown="javascript:EnableOk();" AutoPostBack="true" style="text-transform: uppercase;">

     

     

     

    </telerik:RadTextBox>

    In this I have both onkeypress and onkeydown client events + i have set the style property.

    Can anybody help me in this?

     

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 May 2010 Link to this post

    Hello Medac,

    I found its working for me after I added the style that you tried. I even tried with different browsers (IE8, Firefox, Opera) and the found the typed letter in uppercase only. Is it happening for any specific browser, in your case?

    I tried another workaround for setting the typed text to uppercase by attaching the 'OnKeyPress' event to RadTextBox. Here is the code that I tried.

    ASPX:

     
    <telerik:RadTextBox ID="radtxtCarrierComments" MaxLength="50" Width="350px" runat="server"  
        AutoPostBack="true" OnTextChanged="radtxtCarrierComments_TextChanged" Style="text-transform: uppercase;">  
        <ClientEvents OnKeyPress="OnKeyPress" />  
    </telerik:RadTextBox> 

    JavaScript:

     
    <script type="text/javascript">  
        var textBox;  
        var text = new String();  
        function OnKeyPress(sender, args) {  
            textBox = sender;  
            text = args.get_keyCharacter();  
            text = sender.get_textBoxValue() + text.toUpperCase();  
            setTimeout("textBox.set_value(text);", 100);  
        }  
    </script> 

    I hope the suggestion helps,

    Shinu.

  3. Medac
    Medac avatar
    79 posts
    Member since:
    Sep 2008

    Posted 05 May 2010 Link to this post

    No it is woking for me. On enter it takes some tome to diplay in uppercase. Backspace and delete is not working. I think for each entry it is getting postbacked. :(
  4. Medac
    Medac avatar
    79 posts
    Member since:
    Sep 2008

    Posted 05 May 2010 Link to this post

    No it is not working for me. Each time i type it is taking time to diplay th uppercase letter. Delete and backspace are working weirdly. for each entry i think it is getting postbacked....i dnt know y :(
  5. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 10 May 2010 Link to this post

    Hello Medac,

    It is not clear whether you want the textbox value to only appear uppercase or to actually be uppercase. Check out the following example, which demonstrates both. The text-transform CSS style is used to make the textbox value appear uppercase, while the ValueChanging event is used to actually transform the value. No need to use keystroke events for that.

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <script runat="server">
     
        protected void radtxtCarrierComments_TextChanged(object sender, EventArgs e)
        {
            Label1.Text = (sender as RadTextBox).Text;
        }
         
    </script>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    <style type="text/css">
     
    .upper
    {
        text-transform:uppercase;
    }
     
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <telerik:RadTextBox ID="radtxtCarrierComments" runat="server" CssClass="upper" AutoPostBack="true"
        OnTextChanged="radtxtCarrierComments_TextChanged">
        <ClientEvents OnValueChanging="MyValueChanging" />
    </telerik:RadTextBox>
     
    <script type="text/javascript">
     
    function MyValueChanging(sender, args)
    {
        args.set_newValue(args.get_newValue().toUpperCase());
    }
     
    </script>
     
    <br /><br />
     
    textbox value: <asp:Label ID="Label1" runat="server" />
     
    </form>
    </body>
    </html>


    All the best,
    Dimo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Massimo
    Massimo avatar
    2 posts
    Member since:
    Feb 2012

    Posted 28 Mar 2012 Link to this post

    <telerik:RadTextBox ID="text" runat="server" style="text-transform:uppercase"></telerik:RadTextBox>
Back to Top