Compare two date picker values in RadGrid

14 posts, 0 answers
  1. rock
    rock avatar
    13 posts
    Member since:
    Jun 2010

    Posted 10 Aug 2010 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 Aug 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. rock
    rock avatar
    13 posts
    Member since:
    Jun 2010

    Posted 14 Aug 2010 Link to this post

    thank i will appy in my form
  5. Miguel
    Miguel avatar
    25 posts
    Member since:
    Dec 2010

    Posted 08 Dec 2010 Link to this post

    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
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Dec 2010 Link to this post

    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.
  7. Miguel
    Miguel avatar
    25 posts
    Member since:
    Dec 2010

    Posted 09 Dec 2010 Link to this post

    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 
  8. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 10 Dec 2010 Link to this post

    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.
  9. Miguel
    Miguel avatar
    25 posts
    Member since:
    Dec 2010

    Posted 10 Dec 2010 Link to this post

    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
  10. Miguel
    Miguel avatar
    25 posts
    Member since:
    Dec 2010

    Posted 10 Dec 2010 Link to this post

    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());
  11. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Dec 2010 Link to this post

    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.
  12. Miguel
    Miguel avatar
    25 posts
    Member since:
    Dec 2010

    Posted 14 Dec 2010 Link to this post

    Great!!! It is working now.

    Thanks Princy!
  13. Nimisha
    Nimisha avatar
    2 posts
    Member since:
    Aug 2015

    Posted 24 Aug 2015 Link to this post

    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
  14. Nimisha
    Nimisha avatar
    2 posts
    Member since:
    Aug 2015

    Posted 24 Aug 2015 Link to this post

    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 
  15. Eyup
    Admin
    Eyup avatar
    3012 posts

    Posted 27 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017