Eric Neason
Top achievements
Rank 1
Rank 1
Eric Neason
asked on 11 Jul 2011, 03:26 PM
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;
}
}
}
-----------------------------------------------------------------------------------------------------------------------------------------------------
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;
}
}
}
-----------------------------------------------------------------------------------------------------------------------------------------------------
10 Answers, 1 is accepted
0
Accepted
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:
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:
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.
I hope this helps.
All the best,
Vasil
the Telerik team
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!
0
Eric Neason
Top achievements
Rank 1
Rank 1
answered on 14 Jul 2011, 02:39 PM
This solved the problem completely! Thank you very much!
0
Rakesh
Top achievements
Rank 1
Rank 1
answered on 04 Jan 2012, 04:19 PM
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
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
0
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.
Greetings,
Vasil
the Telerik team
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
0
Alvaro
Top achievements
Rank 1
Rank 1
answered on 29 Sep 2013, 06:01 AM
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.
0
Shinu
Top achievements
Rank 2
Rank 2
answered on 30 Sep 2013, 04:29 AM
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:
JavaScript:
Thanks,
Shinu.
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.
0
Ayush
Top achievements
Rank 1
Rank 1
answered on 09 Jan 2014, 09:27 AM
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 = "";
}
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 = "";
}
0
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.
Regards,
Vasil
Telerik
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.
0
Jeremy
Top achievements
Rank 1
Rank 1
answered on 09 Dec 2014, 07:02 PM
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.
What a waste of time this control has been.
0
Hi ,
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
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.