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

Make the RadDatePicker behave like a Required RegEx text box through the Input Manager?

4 Answers 209 Views
Input
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 04 Mar 2010, 05:49 PM
I really like how the RegEx Text Boxes behave when their validation is required.  If I load my page and just click submit right away every RegEx box I have on the form that is required pops up the little exclaimation point, displays my error message, and won't let them use submit until they put something into each required field that satisfies the Regular Expression.

I would like my various date boxes to do the same... right now the user can fill in all required RegEx text boxes and click submit and the page will let them, despite having blank required date fields.  I know I could write some little Javascript function, or use the ASP.Net field validators, but I'd rather keep everything consistent and use the Telerik-style validations if possible.

So is there a way I can make the DatePicker require some input and if the user leaves the filed blank and clicks away, or tries to submit the form with nothing in the required Date Picker field, then have it display the exclaimation icon inside the DatePicker field and stop the submission?

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 05 Mar 2010, 10:18 AM
Hello Kevin,

RadInputManager cannot work with RadInput textboxes or RadDateTimePickers, because they use a hidden textbox to store their real (unformatted) value and RadInputManager can't "know" that. However, you can use the following approach:

<%@ 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 (RadDatePicker1.SelectedDate == null)
            {
                RadDatePicker1.DateInput.EnabledStyle.CssClass = "riError";
                RadDatePicker1.DateInput.HoveredStyle.CssClass = "riError";
                RadDatePicker1.DateInput.FocusedStyle.CssClass = "riError";
            }
            else
            {
                RadDatePicker1.DateInput.EnabledStyle.CssClass = "";
                RadDatePicker1.DateInput.HoveredStyle.CssClass = "";
                RadDatePicker1.DateInput.FocusedStyle.CssClass = "";
            }
        }
    }
      
</script>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  
<head 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:RadDatePicker ID="RadDatePicker1" runat="server" />
  
<asp:CustomValidator ID="CustomValidator1" runat="server" EnableClientScript="true" ValidateEmptyText="true"
    ControlToValidate="RadDatePicker1" ClientValidationFunction="validatePicker" />
  
<asp:Button ID="Button1" runat="server" Text="PostBack" />
 
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
  
function validatePicker(sender, args)
{
    var picker = $find("<%= RadDatePicker1.ClientID %>");
    if (!picker.get_selectedDate())
    {
        picker.get_dateInput()._invalid = true;
        picker.get_dateInput().updateCssClass();
        args.IsValid = false;
    }
    else
    {
        picker.get_dateInput()._invalid = false;
        picker.get_dateInput().updateCssClass();
        args.IsValid = true;
    }
}
 
</script>
</telerik:RadCodeBlock>
  
</form>
</body>
</html>


Kind regards,
Dimo
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.
0
Kevin
Top achievements
Rank 1
answered on 08 Mar 2010, 04:22 PM
That worked great.  Thank you for your example.
0
Kevin
Top achievements
Rank 1
answered on 19 Mar 2010, 07:31 PM
I am trying to do the same thing now with a RadComboBox and I am not having much luck. 

Do you have an example snippet of code that will make the RadComboBox display the riError class if a blank dropdown option is selected?
0
T. Tsonev
Telerik team
answered on 24 Mar 2010, 03:19 PM
Hello Kevin,

The RadComboBox has no integrated validation and hence no equivalent to the "riError" style. You can create your custom CSS style for it and apply it with jQuery.

$telerik.$($get("RadComboBox1")).addClass("rcError");

I hope this helps.

Kind regards,
Tsvetomir Tsonev
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
Input
Asked by
Kevin
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Kevin
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or