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

RadDatePicker + Repeater + Javascript

4 Answers 164 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Jason Potter
Top achievements
Rank 1
Jason Potter asked on 25 Nov 2009, 02:32 PM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 25 Nov 2009, 04:16 PM
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.
0
Steve
Top achievements
Rank 1
answered on 28 Feb 2012, 05:54 AM
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
 

0
Vasil
Telerik team
answered on 28 Feb 2012, 10:17 AM
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
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.
0
Mahtab
Top achievements
Rank 1
answered on 07 Nov 2012, 02:54 PM
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.

Tags
Calendar
Asked by
Jason Potter
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Steve
Top achievements
Rank 1
Vasil
Telerik team
Mahtab
Top achievements
Rank 1
Share this question
or