[Solved] How to make RadMaskedTextBox readonly from client side

[Vasssek]

Good morning,

I'm writing because of problems with making RadMaskedTextBox to be readonly from client side (jQuery). I'm able to set readonly attribute on standard RadTextBox without problems.

function setReadOnly()
           {
               var TextBox1 = $find("<%= RadTextBox1.ClientID %>");
               TextBox1._textBoxElement.readOnly = true;
           }
           function clearReadOnly()
           {
               var TextBox1 = $find("<%= RadTextBox1.ClientID %>");
               TextBox1._textBoxElement.readOnly = false;
           }

or 

TextBox1._element.readOnly = true;

Same steps are not working for RadMaskedTextBox control...

Please help me to solve this issue.

Best regards

Vasssek


​

[Eyup]

Hello Vasssek,

You can use the built-in client-side method of the control to achieve this requirement:

$find('<%= RadMaskedTextBox1.ClientID %>').set_readOnly(true);

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

Regards,
Eyup
Telerik

 

 

[Vasssek]

Hello,

your code worked, user couldn't type into this masked textbox, but another issue is appeared. CSS styles for readonly masked input is not applied. This is what I found through firefox debugger:

<input id="ctl00_MainContentPlaceHolder_txt_dok_IBAN" class="riTextBox riEnabled MyEnabledTextBoxMaskIBAN"


It looks like it is still enabled. I would like have it there css class MyReadOnlyTextBoxMaskIBAN as I have it on standard RadTextBoxes...

Here is my control declaration:

<telerik:RadMaskedTextBox ID="txt_dok_IBAN" runat="server" Width="300px" MaxLength="34"
    SelectionOnFocus="CaretToBeginning" ValidationGroup="txt_dok_IBAN" TabIndex="1"
    CausesValidation="true" Mask="SK## aaaa aaaa aaaa aaaa aaaa" DisplayMask="SK## aaaa aaaa aaaa aaaa aaaa">
    <EnabledStyle CssClass="MyEnabledTextBoxMaskIBAN" />
    <ReadOnlyStyle CssClass="MyReadOnlyTextBoxMaskIBAN" />
    <DisabledStyle CssClass="MyDisabledTextBoxMaskIBAN" />
    <EmptyMessageStyle CssClass="MyEmptyTextBoxMaskIBAN" />
    <FocusedStyle CssClass="MyFocusedTextBoxMaskIBAN" />
    <HoveredStyle CssClass="MyHoveredTextBoxMaskIBAN" />
    <InvalidStyle CssClass="MyInvalidTextBoxMaskIBAN" />
</telerik:RadMaskedTextBox>

Please help me to solve this issue.

Thank you

Vasssek

[Eyup]

Hello Vasssek,

There seems to be a problem with the set_readOnly() method and I've contacted our dev team about it and they replied that they will check the issue.

Until the actual fix, please try using the following logic instead:

var maskedBox = $find('<%= RadMaskedTextBox1.ClientID %>');
maskedBox.get_element().readOnly = true;
maskedBox.updateCssClass();

That should do the trick. I've also updated your Telerik points for bringing this problem to our attention. Please excuse us for any inconvenience this might have caused you.

Regards,
Eyup
Telerik