To Hide Empty Message when RadTextBox is disabled

[Zubair]

My problem is very simple. Please help me.

I want to hide the empty message when the textbox is disabled.

I tried the css and put opacity to zero but no success. whole textbox become invisible. Please help. 

<telerik:RadTextBox ID="RadTextBox1" runat="server" CssClass="TextBoxLong" Enabled="false" EmptyMessage="Speciality" EmptyMessageStyle-Font-Italic="true">

 

.TextBoxLong {
    height: 22px;
    background: #fff !important;
    color: black !important;
    width: 294px !important;
    border: 1px solid #61a5a5 !important;
    padding: 2px 2px 1px !important;
}

.TextBoxLong:disabled, .TextBoxLong[disabled] {
   background: #EBEBE4 !important;
}

 

[Vessy]

Hi Zubair,

The Empty message of the ComboBox is set as a value to the control's input element and cannot be removed only via CSS. The only possible option I can suggest you is to set the same color as to the background and the font color of the disabled input element:

        .TextBoxLong {
            height: 22px;
            background: #fff !important;
            color: black !important;
            width: 294px !important;
            border: 1px solid #61a5a5 !important;
            padding: 2px 2px 1px !important;
        }

            .TextBoxLong:disabled, .TextBoxLong[disabled] {
                background: #EBEBE4 !important;
                color:#EBEBE4  !important;
            }

Regards,
Vessy
Progress Telerik

[Zubair]

Hello Vessy.

Thanks for the suggestion.

It is fine when there is no text in textbox. 
but if there is, then it will not only hide the empty message but as well as actual text.  

[Vessy]

Hi Zubair,

Yes, you are right - RadTexBox sets both the values of the EmptyMessage and the actual text as a value of the same input element.

A possible approach I can think of is to attach a handler to the client-side Load event of the control and add a custom CSS class to it in case the control is disabled and empty at the same time.

For example:

    <style>
        .TextBoxLong {
            height: 22px;
            background: #fff !important;
            color: black !important;
            width: 294px !important;
            border: 1px solid #61a5a5 !important;
            padding: 2px 2px 1px !important;
        }

            .TextBoxLong.emptyMessageDisabled {
                background: #EBEBE4 !important;
                color: #EBEBE4 !important;
            }
    </style>

        <script>
            function onLoad(textbox, args) {
                textbox.removeCssClass("emptyMessageDisabled");

                if (!textbox.get_enabled() && textbox.isEmpty()) {
                    textbox.addCssClass("emptyMessageDisabled")
                }
            }
        </script>
        <telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
        <telerik:RadTextBox ID="RadTextBox1" runat="server" CssClass="TextBoxLong"
            Enabled="false" EmptyMessage="Speciality" EmptyMessageStyle-Font-Italic="true">
            <ClientEvents OnLoad="onLoad" />
        </telerik:RadTextBox><br />
        <br />

        <telerik:RadTextBox ID="RadTextBox2" runat="server" CssClass="TextBoxLong"
            Enabled="false" Text="Some Text" EmptyMessage="Speciality" EmptyMessageStyle-Font-Italic="true">
            <ClientEvents OnLoad="onLoad" />
        </telerik:RadTextBox>

Regards,
Vessy
Progress Telerik