Retrieving RadTimePicker Client-Objects with jQuery

[Glenn Boothe]

Hello,

I have an application that uses multiple instances of the RadTimePicker control and I am attempting to find a way to group time pickers together so that I can sum the values of the group when the time is selected on a particular control.  I arrange these groups as 'cells' on the page that have the following structure:

<asp:Panel ID="CellContainer" runat="server" CssClass="TimesheetCell">

    <asp:Label ID="lblCellDate" runat="server" Visible="false" />

    <telerik:RadTimePicker ID="rtpPunchInTime" runat="server" MinDate="1/1/1900"
        TimePopupButton-Visible="false" ClientEvents-OnDateSelected="OnDateSelected"
        Width="100%" CssClass="TimeField">
    </telerik:RadTimePicker>
    <telerik:RadTimePicker ID="rtpPunchOutTime" runat="server" MinDate="1/1/1900"
        TimePopupButton-Visible="false" ClientEvents-OnDateSelected="OnDateSelected"
        Width="100%" CssClass="TimeField">
    </telerik:RadTimePicker>
    <asp:DropDownList ID="ddlLunchTime" runat="server" Width="100%" CssClass="TimeField">
        <asp:ListItem Text="0 mins" Value="0" />
        <asp:ListItem Text="30 mins" Value="0.5" />
        <asp:ListItem Text="45 mins" Value="0.75" />
        <asp:ListItem Text="1 hour" Value="1" />
    </asp:DropDownList><br />
    <asp:DropDownList ID="ddlDinnerTime" runat="server" Width="100%" CssClass="TimeField">
        <asp:ListItem Text="0 mins" Value="0" />
        <asp:ListItem Text="30 mins" Value="0.5" />
        <asp:ListItem Text="45 mins" Value="0.75" />
        <asp:ListItem Text="1 hour" Value="1" />
    </asp:DropDownList><br />
    <telerik:RadTextBox ID="txtTimeTotal" runat="server" Width="100%" Enabled="false" Text="0:00" CssClass="CellTotal" /><br />

</asp:Panel>

Since the ClientEvents-OnDateSelected event requires an event handler function I am only able to use (sender, args) as my parameters for my OnDateSelected.  Within this function I am able to access the id and the client-object of the control that called it, however I'm a bit stuck on figuring out the best way to access the remaining control values in order to sum these values and populate the txtTimeTotal control at the bottom of the cell.  I'm using jQuery as a possible solution, and here is what my OnDateSelected function looks like so far:

function OnDateSelected(sender, args) {

    // Get a collection of all the Time Fields in the active cell
    var TimeFields = $("#" + sender.get_id()).parent().parent().children('.TimeField');

    // Loop through the collection and get the values from each field.
    for (var i = 0; i < TimeFields.length; i++) {
        alert($(TimeFields.get(i)).attr('id'));
    }

}

Right now all I'm doing is pumping out the id's of the selected controls, but the ClientId's returned from the timepicker are that of the outside wrapper div.  The dropdown lists return the expected ClientID's, and I have the client object for the active control in args, so all that's really left for me to figure out is how to properly access the client object for the other TimePicker control (e.g, If a user selects rtpPunchInTime then I need to get rtpPunchOutTime and vice-versia). 

Can you suggest a method that will allow me to access the other TimePicker's object without having to use some funky workaround?

Thanks

[Sebastian]

Hello Glenn,

You can access each of the time pickers from within the OnDateSelected client handler in the following manner:

function OnDateSelected(sender, args)
{
  var punchInTimePicker = $find("<%=rtpPunchInTime.ClientID %>");
  var punchOutTimePicker = $find("<%=rtpPunchOutTime.ClientID %>");
  //access other time pickers client objects here if necessary and extract/sum their time values using the client side API methods
{

Further information about the client API exposed for RadTimePicker you can gather from this documentation article.

Kind regards,
Sebastian
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.

[Glenn Boothe]

Sebastian,

Unfortunately your solution won't work because I have a variable number of those cells on a page at the time, so I'm not able to really call <%= rtpPunchInTime.ClientID %> in the script head.  I was able to find a semi-cheap solution that allows me to select all the controls in the cell and then remove "_wrapper" on the TimePicker element that is included in the collection.  Then I have the client ID of the time pickers and can get a reference to the client-objects using the $find() method.

Thanks,

Mike