Radgrid raddatepickers javascript validation

[Janaki]

Hi,

I have two raddatepicker columns as follows:
<telerik:GridTemplateColumn DataField="ItinDate" HeaderText="FromDate"  UniqueName="Date">
                                                <EditItemTemplate>
                                                    <telerik:RadDatePicker ID="ItinDateRadDatePicker" runat="server" Skin="Outlook"
                                                        DatePopupButton-TabIndex="-1" DbSelectedDate='<%# Bind("ItinDate") %>'  >
                                                     <ClientEvents OnDateSelected="CheckFromDate"  />
                                                    </telerik:RadDatePicker>
                                                   <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ForeColor="Red"
                                                        ControlToValidate="ItinDateRadDatePicker" ErrorMessage="Invalid Date"
                                                        ValidationGroup="ItineraryGrid"></asp:RequiredFieldValidator>
                                                     
                                                </EditItemTemplate>
                                                
                                                <ItemTemplate>
                                                    <asp:Label ID="ItinDateLabel" runat="server"
                                                        Text='<%# Eval("ItinDate", "{0:MM/dd/yyyy}") %>'></asp:Label>
                                                    &nbsp;
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                             <telerik:GridTemplateColumn DataField="ItinToDate" HeaderText="ToDate"  UniqueName="ToDate">
                                                <EditItemTemplate>
                                                    <telerik:RadDatePicker ID="ItinToDateRadDatePicker" runat="server" Skin="Outlook"
                                                        DatePopupButton-TabIndex="-1" DbSelectedDate='<%# Bind("ItinToDate") %>' >
                                                         <ClientEvents OnDateSelected="CheckToDate"  />
                                                         
                                                    </telerik:RadDatePicker>
                                                   <asp:RequiredFieldValidator ID="RequiredFieldValidator40" runat="server" ForeColor="Red"
                                                        ControlToValidate="ItinToDateRadDatePicker" ErrorMessage="Invalid Date"
                                                        ValidationGroup="ItineraryGrid"></asp:RequiredFieldValidator>
                                                  
                                                </EditItemTemplate>
                                                <ItemTemplate>
                                                    <asp:Label ID="ItinDateToLabel" runat="server"
                                                        Text='<%# Eval("ItinToDate", "{0:MM/dd/yyyy}") %>'></asp:Label>
                                                    &nbsp;
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>

I have CheckFromDate and CheckToDate javascript functions to validate these dates against the trip begin and end dates on my form.
My javascript code is as follows:

 function CheckFromDate(sender, args) {
        try {
            var itinStartDtInput = $("#ctl00_MainContent_ItineraryGrid_ctl00_ctl02_ctl03_ItinDateRadDatePicker_dateInput_text");
            var tripStartDt = $("#ctl00_MainContent_TripStartDate_dateInput_text").val();
            var parsedStartDate = Date.parse(tripStartDt);
            //StartDt = parsedStartDate.getMonth() + 1 + "/" + parsedStartDate.getDate() + "/" + parsedStartDate.getYear();
            //alert("Start Date " + StartDt);

            var tripEndDt = $("#ctl00_MainContent_TripEndDate_dateInput_text").val();
            var parsedEndDate = Date.parse(tripEndDt);

            var ItinFromDt = args.get_newValue();
            var parsedItinFromDate = Date.parse(ItinFromDt);
            // alert("ItinFromDate " + ItinFromDt);

            if (parsedItinFromDate < parsedStartDate || parsedItinFromDate > parsedEndDate) {
                alert("Itinerary from date has to be between trip begin and end dates");
                args.IsValid = false;
                //return false;
                //args.set_cancel(true);
                window.setTimeout(function () { itinStartDtInput.select(); }, 20);
 
            }
            
        }
        catch (ex) {
            alert(ex);

        }
       
    }

    //// Check for Itinerary to date to be between trip begin and end dates
    function CheckToDate(sender, args) {
        try {
            var itinEndDtInput = $("#ctl00_MainContent_ItineraryGrid_ctl00_ctl02_ctl03_ItinToDateRadDatePicker_dateInput_text");
            var tripStartDt = $("#ctl00_MainContent_TripStartDate_dateInput_text").val();
            var parsedStartDate = Date.parse(tripStartDt);
            //StartDt = parsedStartDate.getMonth() + 1 + "/" + parsedStartDate.getDate() + "/" + parsedStartDate.getYear();
            //alert("Start Date " + StartDt);

            var tripEndDt = $("#ctl00_MainContent_TripEndDate_dateInput_text").val();
            var parsedEndDate = Date.parse(tripEndDt);

            var ItinToDt = args.get_newValue();
            var parsedItinToDate = Date.parse(ItinToDt);
            // alert("ItinFromDate " + ItinFromDt);

            if (parsedItinToDate < parsedStartDate || parsedItinToDate > parsedEndDate) {
                alert("Itinerary to date has to be between trip begin and end dates");
                //args.IsValid = false;
                //return false;
                //args.set_cancel(true);
                window.setTimeout(function () { itinEndDtInput.select(); }, 20);
            }

        }
        catch (ex) {
            alert(ex);
        }
    }

My problem is when user input the ItinDate, it runs the CheckFromDate validation and then the hits ok on the popup alert message, and can tab through to the next field, even if the date entered is not between the trip begin and end dates. How do I ensure that the user enters a valid date (which is between the tripbegin and end dates) before they tab to the next field on the grid?

Thanks, Janaki

[Galin]

Hello Janaki,

I can suggest you to make the validation functions with a return a Boolean value and to attach a onKeyPress handler on the input, e.g.

function onKeyPress(sender, args) {
    if (args.get_keyCode() == 9 && !validateInputFunction())
    {
        args.set_cancel(true);
    }
}

I hope this helps.

Greetings,
Galin
the Telerik team