Passing Custom Arguments to Client-Side Events

4 posts, 0 answers
  1. Glenn Boothe
    Glenn Boothe avatar
    21 posts
    Member since:
    Jul 2008

    Posted 05 Jun 2009 Link to this post

    Hello,

    I am writing a simple ASP.net user control that utilizes the RadTimePicker in order to calculate punch-in and punch-out times for a timesheet.  I'm trying to use the <ClientEvents-OnBlur /> to fire some javascript that will sum the values of my 4 inputs and place the total in the textbox 'txtTimeTotal'.  The problem I have is when using the <ClientEvents-OnBlur /> tag you must use an event handler function and I don't have anywhere that I can pass it arguments.  I need the function that is called to know the client ID's of each one of the controls in the .ascx in order to properly make the calculation.  I will also be using this same control multiple times on the same page so I wouldn't be able to just put the JS in <script></script> tags at the top of the page and use <%= rtpPunchInTime.ClientID %> to get the client ID's for the controls, I'll have to pass it into the function when it's called.  Here is the code for my .ascx file:
     

    1 <%@ Control Language="VB" AutoEventWireup="false" CodeFile="TimesheetCell.ascx.vb" Inherits="admin_controls_TimesheetCell" %> 
    2 <asp:Panel ID="FieldContainer" runat="server" > 
    3  
    4     <telerik:RadTimePicker ID="rtpPunchInTime" runat="server"   
    5         TimePopupButton-Visible="false"   
    6         Width="100%" > 
    7         <DateInput ClientEvents-OnValueChanged="SumTimeFields" />          
    8     </telerik:RadTimePicker> 
    9     <telerik:RadTimePicker ID="rtpPunchOutTime" runat="server" 
    10         TimePopupButton-Visible="false"   
    11         Width="100%" > 
    12         <DateInput ClientEvents-OnBlur="SumTimeFields" />    
    13     </telerik:RadTimePicker> 
    14     <asp:DropDownList ID="ddlLunchTime" runat="server" Width="100%">  
    15         <asp:ListItem Text="" Value="0" /> 
    16         <asp:ListItem Text="30 mins" Value=".5" /> 
    17         <asp:ListItem Text="45 mins" Value=".75" /> 
    18         <asp:ListItem Text="1 hour" Value="1" /> 
    19     </asp:DropDownList><br /> 
    20     <asp:DropDownList ID="ddlDinnerTime" runat="server" Width="100%">  
    21         <asp:ListItem Text="" Value="0" /> 
    22         <asp:ListItem Text="30 mins" Value=".5" /> 
    23         <asp:ListItem Text="45 mins" Value=".75" /> 
    24         <asp:ListItem Text="1 hour" Value="1" /> 
    25     </asp:DropDownList><br />      
    26     <telerik:RadTextBox ID="txtTimeTotal" runat="server" Width="100%" Enabled="false" Text="0:00" /><br /> 
    27       
    28 </asp:Panel> 

    Here is the signature for my event handler (pretty simple):

    1 function SumTimeFields(sender, e) {  
    2     //Do some code to sum the fields  
    3

    So knowing all this, is it possible at all to somehow pass the relevant client ID's to e so that I can sum the fields via the client side?  Any help is greatly appreciated.

    Thanks

  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 08 Jun 2009 Link to this post

    Hi Glenn Boothe,

    I am afraid that you cannot pass custom parameters to event handlers of ASP.NET AJAX controls. The convention is that the parameters are always 2 - the sender object instance and the event-related arguments.

    The easiest thing to do in your case is to create a Javascript variable (e.g. an Array) with a global scope in the user control and fill it with the IDs that you need. You can then get the IDs from any Javascript function.

    Kind regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Glenn Boothe
    Glenn Boothe avatar
    21 posts
    Member since:
    Jul 2008

    Posted 08 Jun 2009 Link to this post

    Dimo,

    Thanks for the reply.  I'm not sure how if I understand how declaring a global array will be able to help me if I'm using multiple instances of the user control on the same page.  If I was to have each control declare a global variable or array with the ClientID's, then each variable would have to have a unique name within each instance correct?  Also, if I just had one global array like controlClientIds[] then I wouldn't necessarily be able to let each control know what indexes they would have to access to get the ClientID's of their child controls. 

    I suppose I could just add the script in the code-behind using Attributes.Add but the RadTimePicker appends "_text" on to all of the textboxes that actually contain the user input.  I can manually add the extension in the code, but I'm looking for a more elegant solution if possible.  Also, the value of the textbox in RadTimePicker at the time an event like onblur or onchange is called is whatever is in the textbox BEFORE it gets automatically formatted to a usable time string by the control.  This means that if someone types "9PM" into the textbox, then when I use '.value' in my JS code I get "9PM" and not "9:00 PM" or another value that JS can easily parse into a date object.

    Perhaps there is another way I can use these RTP's in the client-side that will better fit my requirements?

    Thanks


  5. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 09 Jun 2009 Link to this post

    Hello Glenn Boothe,

    In order to retrieve the correct datetime value from the RadTimePicker, you should use the control's API, not just ".value". Using the API will also spare you the necessity to tackle with the "_text" extension that is used for the user-input textbox.

    http://www.telerik.com/help/aspnet-ajax/calendar_clientsideradtimepicker.html

    As for your other question about the global Javascript arrays, indeed, using several such global variables with different names is an option. For example you can include the user control ID in the variable name. All in all, this is a matter of your preference, since the attributes which are passed to the client event handlers cannot be changed.

    Greetings,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top