Passing arguments to client events

9 posts, 0 answers
  1. Cory Benjamin
    Cory Benjamin avatar
    18 posts
    Member since:
    Jul 2006

    Posted 03 Jun 2010 Link to this post

    With a "plain" ASP control, I could write something like <asp:TextBox ... onChange="Test('Hello World')" />
    With a Telerik RadInput control, I cannot pass parameters to my events <Telerik:RadTextBox ... ClientEvents-OnValueChanged="Test(<Cannot send parameters>)" />

    In the above simple example, one could get around this limitation any number of ways.  However, in a more complex application, this causes a real problem.

    I have a user control which has, among other things, a dynamically created TextBox or RadInput control (the exact flavour of input control varies depending on properties passed to the user control).  Think of my user control as my own Input control, containing common input funcionality that we use in our application.

    One of the things this user control does is handle database lookups that occur when focus is lost on a field.  The OnChange event is called, passing a number of parameters (input IDs, lookup options, etc) to a JavaScript function, which ultimately calls other JavaScript functions, web methods, callback functions, and possibly AJAX postbacks.  When the input control is a TextBox, everything works fine.  But since Telerik RadInput controls use their own client events, and because those events do not allow me to pass parameters to the JavaScript, it does not work.

    A typical page on our application might contain 20-100+ of these controls, each control requires different parameters to be sent to the JavaScript function handling the OnChange event, and the input controls inside the user control are created dynamically, all of which makes it very impractical to try and "work around" this issue by using hidden fields or global variables, etc.

    Please consider either making the "built in" OnChange handlers work in RadInput, or expanding upon your own client events to allow us to send parameters to the method.

    Thanks.
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 04 Jun 2010 Link to this post

    Hello Cory,

    You cannot pass custom parameters that easy as on regular TextBox control because RadInput controls are build on top of ASP.NET AJAX framework. Thus you must provided handler(="handler") instead of calling it("someHandler(...)"). You can find more information on the link bellow:
    http://msdn.microsoft.com/en-us/library/bb386450%28v=VS.100%29.aspx

    However you can trick this requirement if you use Currying. For example in the common handler of two RadTextBox controls might be passed extra parameters as an array while the original first two params still exists.

    <telerik:RadTextBox runat="server" ID="RadTextBox1">
      <ClientEvents OnValueChanged="changedHandler.curry('test')" />
    </telerik:RadTextBox>
              
    <telerik:RadTextBox runat="server" ID="RadTextBox2">
      <ClientEvents OnValueChanged="changedHandler.curry('test',1,2,3)" />
    </telerik:RadTextBox>

    <script type="text/javascript">
    function changedHandler(sender,eventArgs,params/*optional parameters*/)
    {
      //your code goes here
      alert(params.length);
    }
      
    Function.prototype.curry = function()
    {
      var method = this, args = Array.prototype.slice.call(arguments);
      return function()
      {                    
        return method.apply(this, Array.prototype.slice.call(arguments).concat([args]));
       };
     }; 
     </script>


    Regards,
    Nikolay
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Cory Benjamin
    Cory Benjamin avatar
    18 posts
    Member since:
    Jul 2006

    Posted 08 Jun 2010 Link to this post

    A thousand thank-you's!

    I recommend adding this to your "Client Side Basics" documentation!
  5. Jon
    Jon avatar
    35 posts
    Member since:
    Sep 2013

    Posted 19 Feb 2014 Link to this post

    Nikolay,

    This is awesome.  If this was stackoverflow I'd definitely give you a vote up!

    I'm calling OnValueChanging from a RadNumericTextBox inside a form in a RadGrid.  I need to do one thing if it's an insert and another thing if it's an update.  I also need to pass it the ClientID of a Label inside the form to use the value of the Label.  So I pass these two arguments along as well.

    Works great!



  6. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 24 Feb 2014 Link to this post

    Hi Guys,

    You could also try the following approach:
    <telerik:RadTextBox ... ClientEvents-OnValueChanged='<%# "function (s,a){myFunctionName(s,a,"+Container.ItemIndex+");}" %>'>
    And now inside the javascript function we know which is the GridDataItem which the element is placed in:
    function myFunctionName(sender, args, index) {
         // execute custom logic using the index parameter
    }

    Hope this helps.

    Regards,
    Eyup
    Telerik
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  7. Modi
    Modi avatar
    2 posts
    Member since:
    Mar 2012

    Posted 19 Jul 2014 in reply to Nikolay Rusev Link to this post

    Hi Nikolay,

    I am using rad numeric text box in rad grid.
    In rad grid i have four columns two is label and two is rad numeric text box.

    I have a requirements where on changing events of rad-numeric text box i need the label value. From your above mentioned code i am able to pass the any static value as a parameter, but my question is how can i pass dynamic value like '<%# Eval("EmployeeId")%>'.

    Thnaks in advance.
  8. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Jul 2014 in reply to Modi Link to this post

    Hi Modi,

    In order to access the label value in OnValueChanging event of RadNumericTextBox please try the below JavaScript code snippet.

    JavaScript:
    function myFunctionName(sender, args, index) {
        var grid = $find("<%=rgrdOrders.ClientID%>");
        var dataItems = grid.get_masterTableView().get_dataItems();
        var dataItem = dataItems[index];
        var labelItem = dataItem.findElement("lblEmployeeID").textContent; // here you will get the EmployeeId of the particular row
    }

    Thanks,
    Princy.
  9. Modi
    Modi avatar
    2 posts
    Member since:
    Mar 2012

    Posted 21 Jul 2014 in reply to Princy Link to this post

    Hi Princy,

    Thanks for your reply, but i dont know how to pass index of current row.
    Kindly help.

    Thanks in advance.
  10. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Jul 2014 in reply to Modi Link to this post

    Hi Modi,

    Try to access the Container.ItemIndex in OnValueChanging  event of RadNumericTextBox as follows.

    ASPX:
    ...
    <
    telerik:GridTemplateColumn>
        <ItemTemplate>
            <telerik:RadNumericTextBox ID="rntxtboxOrderID" runat="server" DbValue='<%#Eval("OrderID")%>' ClientEvents-OnValueChanging='<%# "function (s,a){myFunctionName(s,a,"+Container.ItemIndex+");}" %>'>
            </telerik:RadNumericTextBox>
        </ItemTemplate>
    </telerik:GridTemplateColumn>
    ...

    Thanks,
    Princy.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017