HighlightCssClass of AJAX ValidatorCalloutExtender, for radtimepicker

5 posts, 0 answers
  1. Joe
    Joe avatar
    49 posts
    Member since:
    May 2008

    Posted 24 Jun 2008 Link to this post

    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>
  2. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 25 Jun 2008 Link to this post

    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
  3. Joe
    Joe avatar
    49 posts
    Member since:
    May 2008

    Posted 25 Jun 2008 Link to this post

    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

  4. Joe
    Joe avatar
    49 posts
    Member since:
    May 2008

    Posted 25 Jun 2008 Link to this post

    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??
  5. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 26 Jun 2008 Link to this post

    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
Back to Top