RadDatePicker + Repeater + Javascript

5 posts, 1 answers
  1. Jason Potter
    Jason Potter avatar
    10 posts
    Member since:
    Sep 2006

    Posted 25 Nov 2009 Link to this post

    Hi There,

    I have a repeater control that outputs two RadDatePickers per row as shown below.

    <asp:Repeater ID="rep_mediaassetbursts" runat="server" DataSourceID="ods_mediaassetbursts" OnItemDataBound="rep_mediaassetbursts_ItemDataBound"
                    <th>Start Date</th> 
                    <th>End Date</th> 
                    <td><asp:Label ID="burstNumber" runat="server" Visible='true' ></asp:Label></td
                    <td><telerik:RadNumericTextBox ID="MediaAssetBurstValue" runat="server"  DbValue='<%# Bind("investment") %>'  MinValue='0' Width="75px" DataType="System.Int32" Type="Currency"  ><NumberFormat DecimalDigits="0"  /><EnabledStyle HorizontalAlign="Right" /></telerik:RadNumericTextBox></td
                    <td><telerik:RadDatePicker ID="BurstStartDate" runat="server"
                        </telerik:RadDatePicker><asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="BurstStartDate" 
                    ErrorMessage="Enter a date!" Display="Dynamic"></asp:RequiredFieldValidator></td
                    <td><telerik:RadDatePicker ID="BurstEndDate" runat="server"   ></telerik:RadDatePicker><asp:RequiredFieldValidator runat="server" ID="Requiredfieldvalidator2" ControlToValidate="BurstEndDate" 
                    ErrorMessage="Enter a date!" Display="Dynamic"></asp:RequiredFieldValidator><asp:CompareValidator ID="dateCompareValidator" runat="server" ControlToValidate="BurstEndDate" 
                    ControlToCompare="BurstStartDate" Operator="GreaterThanEqual" Type="Date" ErrorMessage="The second date must be after the first one." Display="Dynamic"></asp:CompareValidator> 
                    <asp:Label runat="server" ID="datevalue"></asp:Label> 
                    <telerik:RadNumericTextBox ID="burstTotalValue" Type="Currency" runat="server"  Value='0'  MinValue='0' Width="75px" DataType="System.Int32" ReadOnly="true"  > 
                    <NumberFormat DecimalDigits="0"  /> 
                    <ReadOnlyStyle BorderStyle="none" HorizontalAlign="Right" /> 
                    <td colspan="2"><asp:CompareValidator ID="burstTotalValueCheck" runat="server" 
                        ErrorMessage="Burst Totals must match the total investment for the assset" ControlToValidate="burstTotalValue" Type="Integer"></asp:CompareValidator></td

    I want to associate a javascript function to the OnDateSelected event for each of the RadDatePickers so that i can work out the number of weeks between the dates and display the value in the "datevalue" label. 

    I am aware of the standard paramaters that get passed to the javascript function that you assign to the OnDataSelected property, but my problem is from within that function how can I access the other RadDatePicker and also the label.

    If I was able to make OnDateSelected take extra paramaters i could pass into it the client id for the other RadDatePicker and the label.

    I am looking for any suggested approaches.

    Thanks in advance
  2. Answer
    Dimo avatar
    8406 posts

    Posted 25 Nov 2009 Link to this post

    Hello Jason Potter,

    The repeater's item is a naming container, so all the controls inside one item have the same client IDs, except the end part. In other words, if you know the id of one of the controls on the client, you can easily obtain all other controls' IDs.

    The client ID of a RadDatePicker or a RadNumericTextBox can be retrieved with the get_id() Javascript method, which is part of the MS AJAX framework.


    Sincerely yours,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Steve
    Steve avatar
    6 posts
    Member since:
    Feb 2012

    Posted 27 Feb 2012 Link to this post

    Hi There,

    Can someone provide an example on how to do this?

    I have a RadDatePicker in a repeater and I want to set the date of it in javascript when the user checks off the chkReviewComplete checkbox.

    Here is my code:


    <asp:Repeater ID="rptReviewers" runat="server" DataSourceID="odsReviewFindings">

          <asp:Panel ID="pReviewer" runat="server" CssClass="PanelHeader">

               <table id="tblReviewer" cellspacing="2" cellpadding="2" border="0" width="850px"  runat="server">

               <tr id="tblReviewer_HeaderRow" runat="server" visible="true">

                   <td><asp:CheckBox ID="chkReviewComplete" CssClass="CheckBox" runat="server" onclick="javascript:chkReviewComplete_OnClick(this)" /></td>

                   <td class="Label" style="width:25%;">Complete Date:</td>


                      <telerik:RadDatePicker ID="txtReviewComplete" CssClass="TextBox" runat="server"></telerik:RadDatePicker>







    Thanks in advance


  4. Vasil
    Vasil avatar
    1604 posts

    Posted 28 Feb 2012 Link to this post

    Hi Steve,

    See the following code-snippet:

    <script type="text/javascript">   
    function chkReviewComplete_OnClick(sender)
      var pickerID = sender.id.replace("chkReviewComplete", "txtReviewComplete");
      var picker = $find(pickerID);
      var currentDate = new Date();
    <asp:CheckBox ID="chkReviewComplete" CssClass="CheckBox" runat="server" onclick="javascript:chkReviewComplete_OnClick(this)" />
    <telerik:RadDatePicker ID="txtReviewComplete" CssClass="TextBox" runat="server">

    For more information see this help topic:

    Kind regards,
    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.
  5. Mahtab
    Mahtab avatar
    4 posts
    Member since:
    Oct 2012

    Posted 07 Nov 2012 Link to this post

    Please provide example of same in javascript when two raddatepicker controls are inside a gridview.
    My requirement is:

    1. OnDateSelected event of Start Date
    Set minDate of EndDate >= StartDate selected date 
    2. OnDateSelected event of EndDate

    If StartDate.SelectedDate != null && EndDate.SelectedDate != null
    Check CheckBox.

    Note: There are 12 rows of these controls in a gridview loaded onRowDataBound event of gridview.
    Kindly provide a solution as soon as possible.

Back to Top