Masked Textbox MouseOver

5 posts, 0 answers
  1. Coty
    Coty avatar
    90 posts
    Member since:
    Aug 2006

    Posted 18 Nov 2008 Link to this post

    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

     

     

     

  2. Coty
    Coty avatar
    90 posts
    Member since:
    Aug 2006

    Posted 18 Nov 2008 Link to this post

    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......
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 19 Nov 2008 Link to this post

    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.
  5. Coty
    Coty avatar
    90 posts
    Member since:
    Aug 2006

    Posted 19 Nov 2008 Link to this post

    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
  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 19 Nov 2008 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017