RadTextBox changing color on MouseOver for no reason...

11 posts, 1 answers
  1. Eric Neason
    Eric Neason avatar
    5 posts
    Member since:
    Aug 2009

    Posted 11 Jul 2011 Link to this post

    Howdy!

    In the course of developing the validation for user input in the website I am working on, I believe I have found a bug in the behavior of RadTextBoxes.  My website's design calls for the user to be notified of invalid inputs by changing the color of the RadTextBox to red when the input is invalid.  When the user corrects the input, the RadTextBox is supposed to turn white.  However, after the second validation, the RadTextBox seems to retain a memory of the previous color and change to that color when the user mouses over the RadTextBox, despite no mouse-over behavior being defined.

    For example, let us say that the RadTextBox is first loaded onto the page with white BackColor and no text.  The user then enters some valid text, so the color stays white.  If the user enters invalid text, the RadTextBox turns red (like it is supposed to).  However, when the user mouses over the red RadTextBox, it turns white. 

    Now let us say that the RadTextBox is first loaded onto the page with white BackColor and some default text.  The user then enters invalid text and the RadTextBox turns red (like it is supposed to).  If the user then changes the text to something valid, the RadTextBox turns white, but when the user mouses over it, it turns red. 

    By playing around with how many valid inputs/invalid inputs are entered, it is possible to get the mouse over color to flash either the valid or invalid color.  Note that this behavior DOES NOT occur with regular TextBoxes

    I have included some sample HTML and C# below that demonstrates the issue.  I would greatly appreciate some assistance in getting my RadTextBoxes to stay the proper color.

    Thanks!

    -----------------------------------------------------------------------------------------------------------------------------------------------------
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadTextboxExample.aspx.cs"
        Inherits="RadTextboxExample" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <asp:Label ID="Label1" runat="server" Text="RadTextBox - Start Empty"></asp:Label>
            <telerik:RadTextBox ID="RadTextBox1" runat="server" AutoPostBack="True" CausesValidation="True"
                OnTextChanged="RadTextBox1_TextChanged">
            </telerik:RadTextBox>
            <br />
            <br />
            <asp:Label ID="Label2" runat="server" Text="RadTextBox - Start Full"></asp:Label>
            <telerik:RadTextBox ID="RadTextBox2" runat="server" AutoPostBack="True" CausesValidation="True"
                OnTextChanged="RadTextBox2_TextChanged" Text="Default Input">
            </telerik:RadTextBox>
            <br />
            <br />
            <asp:Label ID="Label3" runat="server" Text="TextBox"></asp:Label>
            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" CausesValidation="True"
                OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
        </div>
        </form>
    </body>
    </html>
    -----------------------------------------------------------------------------------------------------------------------------------------------------

    -----------------------------------------------------------------------------------------------------------------------------------------------------
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;

    public partial class RadTextboxExample : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void RadTextBox1_TextChanged(object sender, EventArgs e) {
            if (RadTextBox1.Text == "" || RadTextBox1.Text == null) {
                RadTextBox1.BackColor = System.Drawing.Color.Red;
            } else {
                RadTextBox1.BackColor = System.Drawing.Color.White;
            }
        }

        protected void RadTextBox2_TextChanged(object sender, EventArgs e) {
            if (RadTextBox2.Text == "" || RadTextBox2.Text == null) {
                RadTextBox2.BackColor = System.Drawing.Color.Red;
            } else {
                RadTextBox2.BackColor = System.Drawing.Color.White;
            }
        }

        protected void TextBox1_TextChanged(object sender, EventArgs e) {
            if (TextBox1.Text == "" || TextBox1.Text == null) {
                TextBox1.BackColor = System.Drawing.Color.Red;
            } else {
                TextBox1.BackColor = System.Drawing.Color.White;
            }
        }
    }
    -----------------------------------------------------------------------------------------------------------------------------------------------------
  2. Answer
    Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 14 Jul 2011 Link to this post

    Hi Dan,

    This is rather feature that has to be configured than a bug. It happens because RadTextBox applies hovered style when it is hovered. It is designed such a way to give more control when using skins and custom styling.
    So the control has properties for EnabledStyle, FocusedStyle, HoveredStyle, etc. (see this help topic.)

    The control also has property called BackColor. It can be used for setting colors for the styles that still don't have BackColor set. The styles are merged on PreRender event.
    This means, that if you write:
    RadTextBox1.HoveredStyle.BackColor = System.Drawing.Color.Red;
    RadTextBox1.BackColor = System.Drawing.Color.Blue;

    Blue will be applied for rest of the styles that are not set. But Blue will not override the Red for HoveredStyle. So when you hover the input you will still see Red background.

    Here is what exactly happens in your sample:

    1) By default your RadTextBox1 is white, because no back color is set.
    2) When you first set BackColor to White on the first TextChanged event it will be merged on PreRender for all styles. So the BackColor for all styles will be set to White.
    3) When you delete the text, and TextChanged is executed again, you will set the BackColor to Red. But the styles are already set, and they won't be overwritten. However in this case only EnabledStyle is changed because it is the "main" style, and  all styles added for the control itself are directly set for EnabledStyle of the control.
    4) In the end, when you hover the textBox, you will see only the first merged style, and it will be the White one.

    You have two options to change this behavior.
    First one is to set color for all styles:
    protected void RadTextBox1_TextChanged(object sender, EventArgs e)
    {
        if (RadTextBox1.Text == "" || RadTextBox1.Text == null)
        {
            RadTextBox1.EnabledStyle.BackColor = System.Drawing.Color.Red;
            RadTextBox1.HoveredStyle.BackColor = System.Drawing.Color.Red;
            RadTextBox1.FocusedStyle.BackColor = System.Drawing.Color.Red;
        }
        else
        {
            RadTextBox1.EnabledStyle.BackColor = System.Drawing.Color.White;
            RadTextBox1.HoveredStyle.BackColor = System.Drawing.Color.White;
            RadTextBox1.FocusedStyle.BackColor = System.Drawing.Color.White;
        }
    }


    Another way to solve this is to clear the BackColor of the control, which will clear the BackColor for all styles. Note that clearing overrides the styles and it is not like merging which only add attributes where they are missing.
    protected void RadTextBox1_TextChanged(object sender, EventArgs e)
    {
        if (RadTextBox1.Text == "" || RadTextBox1.Text == null)
        {
            RadTextBox1.BackColor = System.Drawing.Color.Empty;
            RadTextBox1.BackColor = System.Drawing.Color.Red;
        }
        else
        {
            RadTextBox1.BackColor = System.Drawing.Color.Empty;
            RadTextBox1.BackColor = System.Drawing.Color.White;
        }
    }

    I hope this helps.

    All the best,
    Vasil
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Eric Neason
    Eric Neason avatar
    5 posts
    Member since:
    Aug 2009

    Posted 14 Jul 2011 Link to this post

    This solved the problem completely!  Thank you very much!
  5. Rakesh
    Rakesh avatar
    13 posts
    Member since:
    Mar 2011

    Posted 04 Jan 2012 Link to this post

    I do have the same problem whenever mouse id hovered over radtextbox color is changing to white backgroundcolor.
    How can we set it back to color that i want when mouse is hovered over radtextbox

    I have condition to set

    If X
    i should set backgroundcolor to Red and forecolor to black
    If Y
    i should set backgroundcolor to Yellow and forecolor to black

    else

    i should set backgroundcolor to white and forecolor to black

    Thanks in advance
  6. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 05 Jan 2012 Link to this post

    Hi Rakesh,

    See the example below. Additionally you don't need to change the ForeColor if it is always Black. You could declare it in the markup.

    protected void Page_Load(object sender, EventArgs e)
    {
        RadTextBox1.BackColor = System.Drawing.Color.Empty;
        RadTextBox1.ForeColor = System.Drawing.Color.Empty;
     
        if (X)
        {
            RadTextBox1.BackColor = System.Drawing.Color.Red;
            RadTextBox1.ForeColor = System.Drawing.Color.Black;
        }
        else if (Y)
        {
            RadTextBox1.BackColor = System.Drawing.Color.Yellow;
            RadTextBox1.ForeColor = System.Drawing.Color.Black;
        }
        else
        {
            RadTextBox1.BackColor = System.Drawing.Color.White;
            RadTextBox1.ForeColor = System.Drawing.Color.Black;
        }
    }

    Greetings,
    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
  7. Alvaro
    Alvaro avatar
    7 posts
    Member since:
    Jul 2010

    Posted 29 Sep 2013 Link to this post

    Althought this is an old thread, i have a question. I'm changing the background color of an RadTextBox, via javascript, obviously when the mouse is over the control again, the style dissapears. I hope someone could help me, thanks.
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Sep 2013 Link to this post

    Hi Alvaro,

    You need to set the HoveredStyle and the FocusedStyle of the RadTextBox in order to retain the applied style on mouse hovering as well focussing the control. Please check the following sample code.

    ASPX:
    <telerik:RadTextBox ID="RadTextBox1" runat="server">
        <ClientEvents OnLoad="OnLoad" />
    </telerik:RadTextBox>

    JavaScript:
    <script type="text/javascript">
        function OnLoad(sender, args) {
            sender.get_styles().EnabledStyle[0] += "background-color: Yellow";
            sender.get_styles().HoveredStyle[0] += "background-color: Yellow";
            sender.get_styles().FocusedStyle[0] += "background-color: Yellow";
            sender.updateCssClass();
        }
    </script>

    Thanks,
    Shinu.
  9. Ayush
    Ayush avatar
    3 posts
    Member since:
    Dec 2013

    Posted 09 Jan 2014 Link to this post

    Hello,

       Am using RadNumeric Textbox and validating using javascript.When I click on save button the textbox color changes to red if it is empty and if I mouse hover on that textbox the color automatically dissappear.
    It only happens in RadNumeric Textbox.
    Any Help ? 
         
    telerik:RadNumericTextBox ID="txtParameterB" runat="server" 
                                Style="text-align: right" TabIndex="10">

                                <NumberFormat AllowRounding="False" DecimalDigits="4" />

                            </telerik:RadNumericTextBox><span class="mandatory">*</span>
    javascript code:

    var inputCalibB = document.getElementById(('<%=txtParameterB.ClientID %>'));
                if (inputCalibB.value == "") {
                    inputCalibB.style.borderColor = "red";
                    isTrue = false;
                }
                else {
                    inputCalibB.style.borderColor = "";
                }
  10. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 09 Jan 2014 Link to this post

    Hi Ayush,

    When you hover the RadNumericTextBox it's scripts apply the mouse hover styles and change the CSS class of the visible input element. In step any classes set to the input element of the control will be overridden.

    If you want to show it as invalid, you could force the control to go in invalid state, this way it will be red until focused, similar to how it's internal min-max value validation works.

    var numericTextBox = $find("<%=txtParameterB.ClientID %>");
    numericTextBox._invalidate();
    numericTextBox.updateCssClass()

    Regards,
    Vasil
    Telerik
    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 the blog feed now.
  11. Jeremy
    Jeremy avatar
    29 posts
    Member since:
    Apr 2014

    Posted 09 Dec 2014 in reply to Vasil Link to this post

    If this really is a feature, I think it's a poorly conceived feature.  I'm having this trouble with the enabled property.  I set the RadTextBox enabled property to false on pageload.  Then on an event, I set it to true but when I mouseover, it gets set to false again by default?  Who thinks this is good default behavior?  Why not have it behave the way any developer would expect it to behave and let me change it if I want it to behave differently.  I've lost a lot of time trying to figure out why the RadTextBox disables itself on mouseover without me specifically telling to behave that way and I still can't get it to work.  RadTextBox1.HoveredStyle doesn't have an enabled property so this solution doesn't work for me.  

    What a waste of time this control has been.

  12. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 10 Dec 2014 Link to this post

    Hi Jeremy,

    Could you confirm that you use the enable() and disable() methods as per our documentation and not the set_enabled(true/false) property? The set_enabled was obsoleted, but it remained in the API only not to brake old code.

    Regards,
    Vasil
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017