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

Radgrid raddatepickers javascript validation

1 Answer 82 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Janaki
Top achievements
Rank 1
Janaki asked on 09 Aug 2012, 08:14 PM
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

1 Answer, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 15 Aug 2012, 06:22 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Janaki
Top achievements
Rank 1
Answers by
Galin
Telerik team
Share this question
or