RadDatePicker + Repeater + Javascript

[Jason Potter]

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">
            <HeaderTemplate>
                <table>
                <tr>
                <th>Bursts</th>
                <th>Value</th>
                <th>Start Date</th>
                <th>End Date</th>
                </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                <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>
                </td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                <tr>
                <td></td>
                <td>
                <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" />
                </telerik:RadNumericTextBox></td>
                <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>
                </tr>
                </table>
            </FooterTemplate>
            </asp:Repeater>

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
Jason

[Dimo]

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.

control_client_instance.get_id()


Sincerely yours,
Dimo
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.

[Steve]

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">
<ItemTemplate>

      <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>

               <td>

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

               </td>

           </tr>

          </table>

       </asp:Panel>

 </ItemTemplate>

 </asp:Repeater>

Thanks in advance

Steve
 

[Vasil]

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();

  picker.set_selectedDate(currentDate);
}
</script>
<asp:CheckBox ID="chkReviewComplete" CssClass="CheckBox" runat="server" onclick="javascript:chkReviewComplete_OnClick(this)" />
<telerik:RadDatePicker ID="txtReviewComplete" CssClass="TextBox" runat="server">
</telerik:RadDatePicker>

For more information see this help topic:
http://www.telerik.com/help/aspnet-ajax/input-client-side-raddateinput.html

Kind regards,
Vasil
the Telerik team

[Mahtab]

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.