Masked Textbox MouseOver

[Coty]

I have a radmaskedtextbox and a numerictextbox on my form as follows

 

<rad:RadMaskedTextBox ID="txtZip" Mask="#####-####" Width="60px" runat="server"

 

BackColor="#CCCCCC" Enabled="False">

 

</rad:RadMaskedTextBox>

<rad:RadNumericTextBox ID="txtLocationCode" MaxLength="2" Width="19px"

 

 

runat="server" BackColor="#CCCCCC" Enabled="False" Skin="Vista">

 

<NumberFormat AllowRounding="True"></NumberFormat>

 

</rad:RadNumericTextBox>

I want them to be disabled and grey background by default.

I have a checkbox on the form that when click I want to enable a group of controls and set their background back to white.

When I enable them I also set there background color to white.
However during mouseover the background goes back to the #CCCCCC color, Here is the javascript for the checkbox onclick event:

 

function

 

FormControls()

{

 

    if (document.getElementById("ctl00_ContentPlaceHolder1_chkNewOffice").checked == true)

    {

        document.getElementById(

"ctl00_ContentPlaceHolder1_chkUseOnWebsite").disabled = false;

 

 

        document.getElementById(

"ctl00_ContentPlaceHolder1_chkUseOnWebsite").parentElement.disabled=false;

 

 

        document.getElementById(

"ctl00_ContentPlaceHolder1_txtLocationCode_text").disabled = false;

 

 

        document.getElementById(

"ctl00_ContentPlaceHolder1_txtLocationCode_text").style.backgroundColor = '#FFFFFF';

 

 

    }

else{

 

 

        document.getElementById(

"ctl00_ContentPlaceHolder1_chkUseOnWebsite").disabled = true;

 

 

        document.getElementById(

"ctl00_ContentPlaceHolder1_chkUseOnWebsite").parentElement.disabled = true;

 

 

        document.getElementById(

"ctl00_ContentPlaceHolder1_txtLocationCode_text").disabled = true;

 

 

        document.getElementById(

"ctl00_ContentPlaceHolder1_txtLocationCode_text").style.backgroundColor = '#CCCCCC';

 

 

    }

}

 

 

What else do I need to enable to get rid of the #CCCCC background on mouseover?

Thank You,

Coty

 

 

 

[Coty]

Sorry about the formatting it didn't look like that when I posted, and then I edited my post and fixed the spacing and updated and it added the spaces again......

[Dimo]

Hi Coty,

When you want to paste some code, you can use the Format Code Block tool in the RadEditor in which you write the forum post.

Now to your question:

The problem is that you are setting a grey BackColor for all states of the textbox. Please use the following properties instead:

DisabledStyle-BackColor="Grey"
EnabledStyle-BackColor="White"
etc

For more information, please refer to:

RadInput Styles


Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Coty]

thanks for the response...I am still having problems however.

I am using RadControls for ASP.NET Q2 2008 if that changes anything...

I've tried these, all of which create an error in javascript.

document.getElementById("ctl00_ContentPlaceHolder1_txtLocationCode").DisabledStyle-BackColor = '#CCCCCC';

Or

document.getElementById("ctl00_ContentPlaceHolder1_txtLocationCode").style.DisabledStyle-BackColor = '#CCCCCC';

Or

document.getElementById("ctl00_ContentPlaceHolder1_txtLocationCode_text").DisabledStyle-BackColor = '#CCCCCC';

Or

document.getElementById("ctl00_ContentPlaceHolder1_txtLocationCode_text").DisabledStyle-BackColor = '#CCCCCC';

Or

var location = $find("<%= txtLocation.ClientID %>");
location.DisabledStyle-BackColor = '#CCCCCC';

I've also went to the CSS class and tried updating these classes:

.radDisabledCss_Vista
{
        font:11px "segoe ui",arial,sans-serif;
    padding:2px 0 2px 1px;
*   background-color: #CCCCCC;
}
.radEnabledCss_Vista
{
    color:#000;
    border:solid 1px;
*   background-color: #FFFFFF;
    border-color:#abadb3 #dbdfe6 #e3e9ef #e2e3ea;
}

I added the lines with the *, but this did nothing.

Am I referencing the textbox incorrectly?

Thanks,

Coty

[Dimo]

Hello Coty,

The correct ways to customize RadInput styles are:

1) declarative setting:

<telerik:RadTextbox DisabledStyle-BackColor="#cccccc" />

2) javascript - take a look at the bottom of:

RadInput Client-side Basics


In addition, we changed the names of the CSS classes for Q3 2008, so if you are using custom CSS rules, you will need to modify those as well. Please refer to the following article for more information:

http://www.telerik.com/help/aspnet-ajax/radinput_changes_and_backwards_compatibility2.html


Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.