This is a migrated thread and some comments may be shown as answers.

Showing Invalid Status for certain data entry controls

1 Answer 68 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Albert Shenker
Top achievements
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.

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 26 Mar 2010, 09:36 AM
Hi Albert,

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"
   
<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.
Tags
General Discussions
Asked by
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
Answers by
Kamen Bundev
Telerik team
Share this question
or