Passing arguments to client events

[Cory Benjamin]

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.

[Nikolay Rusev]

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.

[Cory Benjamin]

A thousand thank-you's!

I recommend adding this to your "Client Side Basics" documentation!

[Gaurab]

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!

[Eyup]

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

[Modi]

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.

[Princy]

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.

[Modi]

Hi Princy,

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

Thanks in advance.

[Princy]

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.