HighlightCssClass of AJAX ValidatorCalloutExtender, for radtimepicker

[Joe]

Hello, i have the following css class that has worked for almost every ASP.NET control i have worked with.  it is used with the HighlighCssClass of validatorcalloutextender (see below).  All it does is outline the field in red that are not valid, it does not work with the radtimepicker, and thoughts on how to get this to work??  I tried putting the same style on just the endTimeInput part, that does what i want, but when i point the requiredfieldvalidator to the DateInput of endTimeInput it errors and cant find the control, but this is the part of the control i want outlined in red.  thanks

.ValidatorCallout
{
    border:solid;
    border-color:#FF0000;
    border-width:2px;
}

<telerik:RadTimePicker ID="rad_TimeEnds" runat="server" Width="85px">
            <TimeView ID="TimeView2" runat="server" StartTime="9:0:0" EndTime="22:31:00" Interval="0:30:0" Columns="5" TimeFormat="HH:mm" Culture="en-US"></TimeView>
            <DateInput ID="endTimeInput" runat="server" DateFormat="HH:mm" Culture="en-US"></DateInput>
            <DatePopupButton Visible="False"></DatePopupButton>
        </telerik:RadTimePicker>

<asp:RequiredFieldValidator ID="req_TimeEnds" runat="server" ControlToValidate="rad_TimeEnds" Display="None" ErrorMessage="<B>End Time is required.</B>"></asp:RequiredFieldValidator>
   <ajx:validatorCalloutExtender id="vce_TimeEnds" runat="server" HighlightCssClass="ValidatorCallout" TargetControlID="req_TimeEnds"></ajx:validatorCalloutExtender>

[Dimo]

Hello Joe,

Your CSS class implementation is not working with RadInput-based controls (including RadTimePicker) due to the following reason:

The ASP.NET validation mechanism in general works against the input field with an ID equal to the ClientID of the control (for the simple textbox the validation field and the visible input field are the same). However, our RadInput controls provide rich client-side functionality and we need the validation field and the visible field to render as separate elements and that is the reason we cannot use the ClientID as the identifier for the visible input field (the id of our visible field is ClientID + "_text" and the id of our validation field is ClientID only).

So the recommended approach in this case is to use an asp:CustomValidator instead of asp:RequiredFieldValidator, and set the CSS class to the correct visible textbox.


Here is an example:


ASPX

<telerik:RadTimePicker ID="rad_TimeEnds" runat="server" Width="85px">
            <TimeView ID="TimeView2" runat="server" StartTime="9:0:0" EndTime="22:31:00" Interval="0:30:0" Columns="5" TimeFormat="HH:mm" Culture="en-US"></TimeView>
            <DateInput ID="endTimeInput" runat="server" DateFormat="HH:mm" Culture="en-US"></DateInput>
            <DatePopupButton Visible="False"></DatePopupButton>
            <ClientEvents OnDateSelected="" />
        </telerik:RadTimePicker>

<ajx:validatorCalloutExtender id="vce_TimeEnds" runat="server" HighlightCssClass="ValidatorCallout" TargetControlID="CustomValidator1" />

<asp:CustomValidator
    ID="CustomValidator1"
    runat="server"
    Text=" "
    ControlToValidate="rad_TimeEnds"
    ClientValidationFunction="rad_TimeEnds_Validate"
    ValidateEmptyText="true" />

Javascript

function rad_TimeEnds_Validate(sender, args)
{
    var picker = $find("<%= rad_TimeEnds.ClientID %>").get_dateInput();
    var textbox = $find("<%= rad_TimeEnds.ClientID %>").get_textBox();
    if (picker.get_value().length == 0)
    {
        textbox.className += " ValidatorCallout";
        args.IsValid = false;
    }
    else
    {
        args.IsValid = true;
    }
}

Here is another way to update the picker's appearance, using the control's native "Invalid" state:

Javascript

function rad_TimeEnds_Validate(sender, args)
{
    var picker = $find("<%= rad_TimeEnds.ClientID %>").get_dateInput();
    if (picker.get_value().length == 0)
    {
        picker._invalid = true;
        picker.updateCssClass();
        args.IsValid = false;
    }
    else
    {
        args.IsValid = true;
    }
}

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Joe]

Your 2nd javascript function seems to work (the first one seemed to fire validation, but no red border).  Again the 2nd worked, but with the following change (need to get rid of border if something is entered/is valid).


            if (_picker.get_value().length == 0)
            {
                _picker._invalid = true; 
                args.IsValid = false;
            }
            else
            {  
                _picker._invalid = false;   //need this if something entered
                args.IsValid = true;
            }
            _picker.updateCssClass();

- AND:  with this implementation, i've lost the validator callout extender functionality, there is no pop up associated with the control, just red outline.  Almost there!  And thank you for the quick replies, you guys at telerik have excellent customer service.

Joe

[Joe]

There is a little exclamation  point [!] that shows up in the input box, so it looks like there is some built in validation that is wiping out the callout extender maybe??

[Dimo]

Hi Joe,

First of all, thank you for the kind words.

The callout works on my side, please make sure you have set the correct IDs, as in the provided code snippet.

As for the red border - the second javascript function causes the textbox to switch to "invalid state" and a red border to appear - this is because the red color is defined in the textbox skin (it is red for some of our skins only). The purpose of the first javascript function is to append the "ValidatorCallout" CSS class and afterwards, you should make sure that this CSS class is used in a CSS rule, which has enough weight to override the textbox' skin styles. ( How To Override Styles in a RadControl for ASP.NET AJAX' Embedded Skin )

Let us know if you need further advice.

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center