Albert Shenker
Top achievements
Rank 1
Veteran
Iron
Rank 1
Veteran
Iron
Albert Shenker
asked on 22 Mar 2010, 08:27 PM
I typically validate my forms server side due to the incompatibility of the traditional ASP.NET validators with certain ajax scenarios. If a form field is invalid, I notify the user through some sort of message, However it would be nice to give some visual cue as well. I use rad comboboxes and rad input controls primarily. I usually use a built-in Telerik skin for these. Is there a way to change the appearance of these controls after an ajax update by setting control properties server-side? I can obviously change individual properties, or even styles, however, ideally I would like to create an "Invalid" skin which would be applied if the control's value is improper. The client-side invalid prompt is an example of this. In fact, I would love to be able to use the exact same appeaance but set it server-side, and be able to set it back to the normal skin if the field is valid.
What would be ideal is if Telerik added a property to certain data entry controls (such as RadInput, Combobox) called "IsInvalid" or something to that effect. If this property is true, the control is rendered with this invalid skin appearance. Further enhancement to this functionality would allow users to specify an "InvalidMessage" which allows users to specify what is wrong with the data in the control . an additional property might be InvalidMessagePosition, which can be set to display the message to the left/right/top/bottom of the control, or as a hover tooltip.
What would be ideal is if Telerik added a property to certain data entry controls (such as RadInput, Combobox) called "IsInvalid" or something to that effect. If this property is true, the control is rendered with this invalid skin appearance. Further enhancement to this functionality would allow users to specify an "InvalidMessage" which allows users to specify what is wrong with the data in the control . an additional property might be InvalidMessagePosition, which can be set to display the message to the left/right/top/bottom of the control, or as a hover tooltip.
1 Answer, 1 is accepted
0
Hi Albert,
Here is a demo how to achieve the desired behavior with a RadInput textbox:
RadComboBox on the other hand doesn't have such functionality by default. However you can easily achieve it by assigning a custom CssClass to it:
.RadComboBox_Error .rcbInputCell input.rcbInput
{
color: red;
background: transparent url('images/error.png') no-repeat 100% 50%;
}
Use the attached image as the background and set the class from code-behind like this:
RadComboBox1.CssClass = "RadComboBox_Error";
Let me know if this helps.
Kind regards,
Kamen Bundev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Here is a demo how to achieve the desired behavior with a RadInput textbox:
<%@ Page Language="C#" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> <script runat="server"> protected void Page_PreRender(object sender, EventArgs e) { if (IsPostBack) { if (String.IsNullOrEmpty(RadTextBox1.Text)) { RadTextBox1.EnabledStyle.CssClass = "riError"; RadTextBox1.HoveredStyle.CssClass = "riError"; RadTextBox1.FocusedStyle.CssClass = "riError"; } else { RadTextBox1.EnabledStyle.CssClass = ""; RadTextBox1.HoveredStyle.CssClass = ""; RadTextBox1.FocusedStyle.CssClass = ""; } } } </script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"><meta http-equiv="content-type" content="text/html;charset=utf-8" /><title>RadControls</title></head><body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server" /> <telerik:RadTextBox ID="RadTextBox1" runat="server"> <ClientEvents OnValueChanged="validateTextBox" /></telerik:RadTextBox> <asp:CustomValidator ID="CustomValidator1" runat="server" EnableClientScript="false" ValidateEmptyText="true" ControlToValidate="RadTextBox1" /> <asp:Button ID="Button1" runat="server" Text="PostBack" /> <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"><script type="text/javascript"> function validateTextBox(sender, args){ var tbStyles = sender.get_styles(); if (args.get_newValue() == "") { sender._invalid = true; if (tbStyles.EnabledStyle[1].indexOf("riError") == -1) { tbStyles.EnabledStyle[1] += " riError"; tbStyles.HoveredStyle[1] += " riError"; tbStyles.FocusedStyle[1] += " riError"; } sender.updateCssClass(); //args.IsValid = false; // required if EnableClientScript="true" } else { sender._invalid = false; if (tbStyles.EnabledStyle[1].indexOf("riError") != -1) { tbStyles.EnabledStyle[1] = tbStyles.EnabledStyle[1].replace(/riError/gi, ""); tbStyles.HoveredStyle[1] = tbStyles.HoveredStyle[1].replace(/riError/gi, ""); tbStyles.FocusedStyle[1] = tbStyles.FocusedStyle[1].replace(/riError/gi, ""); } sender.updateCssClass(); //args.IsValid = true; // required if EnableClientScript="true" }} </script></telerik:RadCodeBlock> </form></body></html>RadComboBox on the other hand doesn't have such functionality by default. However you can easily achieve it by assigning a custom CssClass to it:
.RadComboBox_Error .rcbInputCell input.rcbInput
{
color: red;
background: transparent url('images/error.png') no-repeat 100% 50%;
}
Use the attached image as the background and set the class from code-behind like this:
RadComboBox1.CssClass = "RadComboBox_Error";
Let me know if this helps.
Kind regards,
Kamen Bundev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.