Why is making a textbox read only in javascript so difficult

2 posts, 0 answers
  1. Tim
    Tim avatar
    57 posts
    Member since:
    Apr 2011

    Posted 06 Mar 2012 Link to this post

    Hi

    I am simply trying to set a textbox to readonly on a client side button click.

    I have seen examples that mention getting the _textBoxElement, but that doesn't work.
    Or I should say attempting to use that mechanism says _textBoxElement isn't supported
    on the client side object I have.

    Here is my script:

    var

     

     

    tbConnectionName = document.getElementById( "ConnectionNameTextBox" );

     

     

     

    var cbInitiate = document.getElementById( "InitiateConnectionCheckBox" );

     

     

     

    var tb = $telerik.toTextBox( tbConnectionName );

     

     

     

    //tb._textBoxElement.readOnly = true;

     

     

     


    var
    e = tb.get_element;

     

     

    tbConnectionName.readonly =

     

    true;

     

    cbInitiate.disabled = bDisabled;

    Disabling the cbInitiate object works fine, but none of my attempts to set readonly
    on the tbConnectionName object have been successful.

    BTW here is the corresponding HTML:

     

     

     

    <div style="width:85%; float:right;">

     

     

     

     

    <telerik:RadTextBox

     

     

     

    ID="ConnectionNameTextBox"

     

     

     

    ClientIDMode="Static"

     

     

     

    MaxLength="80"

     

     

     

    runat="server"

     

     

     

    Width="300px" TabIndex="4" />

     

     

     

    </div>

     

     

     

    <div style="width:85%; float:right;">

     

     

     

     

    <asp:CheckBox ID="InitiateConnectionCheckBox" runat="server"

     

     

     

    AutoPostBack="True"

     

     

     

    AccessKey="I"

     

     

     

    ClientIDMode="Static"

     

     

     

    OnCheckedChanged="InitiateConnectionCheckBoxClicked"

     

     

     

    TabIndex="5" Text="Initiate a connection if not already connected" />

     

     

     

    </div>

     


    Right now I am considering maing an Ajax request in my onclick event and setting
    the property in server side code. We can set ReadOnly quite successfully all over the place in server side code. Doing this seems excessive though.

    Any help greatly appreaciated.

  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 09 Mar 2012 Link to this post

    Hi Tim,

    The RadInput with EnableSingleInputRendering set to true uses the same ID for the input element as the control's ClientID.
    <telerik:RadTextBox runat="server" ID="RadTextBox1">
    </telerik:RadTextBox>
    <script type="text/javascript">
      function makeReadonly()
      {
        $get("<%=RadTextBox1.ClientID %>").readOnly = true;
      }
    </script>
    <input type="button" value="make the input readonly" onclick="makeReadonly(); return false;"" />
    Note that changing the readonly of a input ClientSide will not change it's server read-only property. So if you want the server control to be really read only you need to do it from the code-behind.

    All the best,
    Vasil
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top