Compare two date picker values in RadGrid

[rock]

Hi, I have a rad grid that contains two columns for StartDate and EndDate with RadDatePickers.
I am using compare validator to validate selected date in both controls with parameters according to my project needs.
At last i want to compare that the date selected in "EndDate" should not be less than the date selected in "StartDate".
How can i supply value of "StartDate" column's control to the CompareValidator's ValueToCompare property of "EndDate" column ?
P.S. My column type is GridTemplateCoulmn and both the Start and End date pickers are in EditItemTemplate.
Help is needed asap.
Thanks in Advance.

[Princy]

Hello,

Check out the following sample code to achieve this.

ASPX:

<telerik:GridTemplateColumn>
    <EditItemTemplate>
        StartDate:
        <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
        </telerik:RadDatePicker>
    </EditItemTemplate>
</telerik:GridTemplateColumn>
 <telerik:GridTemplateColumn>
    <EditItemTemplate>
        EndDate
        <telerik:RadDatePicker ID="RadDatePicker2" runat="server">
        </telerik:RadDatePicker>
        <asp:CompareValidator ID="CompareValidator1" runat="server"></asp:CompareValidator>
    </EditItemTemplate>
</telerik:GridTemplateColumn>

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
       {
           GridEditFormItem editItem = (GridEditFormItem)e.Item;
           RadDatePicker picker1 = (RadDatePicker)editItem.FindControl("RadDatePicker1");
           DateTime startDate =Convert.ToDateTime(picker1.SelectedDate);
           RadDatePicker picker2 = (RadDatePicker)editItem.FindControl("RadDatePicker2");
           CompareValidator compValidate = (CompareValidator)editItem.FindControl("CompareValidator1");
           compValidate.ControlToValidate = picker2.ID;
           compValidate.ControlToCompare = picker1.ID;
           compValidate.Operator = ValidationCompareOperator.GreaterThan;
           compValidate.ErrorMessage = "EndDate should not be less than StartDate";
       }
   }

Thanks,
Princy.

[rock]

thank i will appy in my form

[Miguel]

Hi Princy,

How can I get the same functionality if I am using GridDateTimeColumns instead of Template columns, but I want the validation to happen in the Client Side. I mean, as soon as the client picks the Second date in the insert form, it needs to validate against the First Date and displays the message error if less.
It can not wait until the client hits the insert command to display the result of this validation. It has to happen right away the second date is selected.

Thanks!
Miguel

[Princy]

Hello Miguel,

Check out the following code snippet which shows how to achieve the desired functionality.
ASPX:

<telerik:GridDateTimeColumn UniqueName="GridDateTimeColumn1" DataField="StartDate">
</telerik:GridDateTimeColumn>
<telerik:GridDateTimeColumn UniqueName="GridDateTimeColumn2" DataField="EndDate">
</telerik:GridDateTimeColumn>

<asp:HiddenField ID="HiddenField1" runat="server" />

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridEditFormInsertItem && e.Item.OwnerTableView.IsItemInserted)
       {
           GridEditFormInsertItem insertItem = (GridEditFormInsertItem)e.Item;
           RadDatePicker datepick1 = (RadDatePicker)insertItem["GridDateTimeColumn1"].Controls[0];
           RadDatePicker datepick2 = (RadDatePicker)insertItem["GridDateTimeColumn2"].Controls[0];
           HiddenField1.Value = datepick1.ClientID;
           datepick2.ClientEvents.OnDateSelected = "DateSelected";
        }
   }

Java Script:

<script type="text/javascript">
    function DateSelected(sender, args) {
        var EndDate = new Date(args.get_newValue());
        var datePicker1 = $find(document.getElementById('HiddenField1').value);
        var StartDate = new Date(datePicker1.get_dateInput().get_value());
        if (StartDate  > EndDate) {
            alert("in valid date");
            sender.clear();
         }
    }
</script>

Thanks,
Princy.

[Miguel]

Hi Princy, thanks for your response...

I get this exception at execution time when I hit the Add New Record Command:

Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerServerErrorException: Specified argument was out of the range of valid values.
Parameter name: index

The execption is raised in this line  ----->

if(e.Item is GridEditFormItem && e.Item.OwnerTableView.IsItemInserted)
      {
          GridEditFormItem insertItem = (GridEditFormItem)e.Item;
  ------>    RadDatePicker datepick1 = (RadDatePicker)insertItem["GridDateTimeColumn1"].Controls[0];
          RadDatePicker datepick2 = (RadDatePicker)insertItem["GridDateTimeColumn2"].Controls[0];
          HiddenField1.Value = datepick1.ClientID;
          datepick2.ClientEvents.OnDateSelected = "DateSelected";
       }

I am not sure if the Controls[0] is not returning what it should. 

I appreciate your help.

Regards-
Miguel 

[Princy]

Hello Miguel,

Since you are accessing the RadDatePicker control in insert form, the grid item is of type GridEditFormInsertItem. Try to access the RadDatePicker like below.

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridEditFormInsertItem && e.Item.OwnerTableView.IsItemInserted)
       {
           GridEditFormInsertItem insertItem = (GridEditFormInsertItem)e.Item;
           RadDatePicker datepick1 = (RadDatePicker)insertItem["GridDateTimeColumn1"].Controls[0];
           . . . . . . . . .
       }
   }

Thanks,
Princy.

[Miguel]

Hi Princy, the GridEditFormInsertItem worked. but now I am getting a JavaScript error:

Microsoft JScript runtime error: Object required

At line:

function DateSelected(sender, args) {
       var EndDate = new Date(args.get_newValue());
  ----> var datePicker1 = $find(document.getElementById('HiddenField1').value);

I was doing a little of research and found that this could happen because of the ajax postback.

Do you have any idea why this is happening?

Thanks a lot!
Miguel

[Miguel]

Hi Princy, I tried this but I got a new error in the folling line:

Microsoft JScript runtime error: 'null' is null or not an object

function DateSelected(sender, args) {

             var EndDate = new Date(args.get_newValue());        

              //var datePicker1 = $find(document.getElementById('HiddenField1').value);

              var datePicker1 = $find( "<%= HiddenField1.UniqueID %>")

          ----->    var StartDate = new Date(datePicker1.get_dateInput().get_value());


[Princy]

Hello Miguel,

Try to include HiddenField1 into UpdatedControls of RadAjaxManager and check whether it resolves the error.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="HiddenField1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Thanks,
Princy.

[Miguel]

Great!!! It is working now.

Thanks Princy!

[Nimisha]

hello,

         I tried your above code but its not work for me. i am using rad grid in batch edit mode. i have two date start date and End date.
i want to validate that start date should be lesser than end date.
        Thanks in advance

[Nimisha]

hello,

         I tried your above code but its not work for me. i am using rad grid in batch edit mode. i have two date start date and End date.
i want to validate that start date should be lesser than end date.
        Thanks in advance 

[Eyup]

Hi Nimisha,

Please note that Batch editing mode is different than other modes. You can find a detailed explanation in the following section:
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/rows/accessing-cells-and-rows#accessing-controls-in-batch-edit-mode

Regards,
Eyup
Telerik