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

RadDatePicker + Repeater + Javascript

4 Answers 232 Views

Calendar

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

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

Accepted

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.

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

<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

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.