Passing user-defined parameters to client-side event handlers

5 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 23 Mar 2011 Link to this post

    Requirements

    RadControls version

    2011.1 315
    .NET version

    NET 3.x/4.x
    Visual Studio version

    2008/2010
    programming language

    C# and VB.NET
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    A very common scenario, that involves RadButton, is passing additional parameters
    to the client-side handler methods. The attached example shows three easy approaches
    to accomplish this scenario.

    1. The first approach uses the CommandName and CommandArgument to pass two parameters to the clicked handler method. The values passed can be accessed through the event argument object, using the get_commandName() and get_commandArgument() methods. This approach is useful when you want to pass a single (or at most two) value to your function.
      <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false"
          Text="Command Name and Command Argument" OnClientClicked="Click1"
          CommandArgument="Value2" CommandName="Value1">
      </telerik:RadButton>
    2. This approach is similar to the first one, except it uses a single property, CommandArgument, to send the desired information. The string is received in the same way, and then split into individual arguments. We have used "|"-character as a separator, but any character can be used. This approach is useful when more than two different values must be handed to the client-side handler.
      <telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false"
          Text="Command Argument" OnClientClicked="Click2"
          CommandArgument="Value1|Value2">
      </telerik:RadButton>
    3. The last option uses anonymous function as a handler method, and in this function another one that receives the parameters is called. Use this approach when you want to define your own custom function, where the arguments can be passed directly from the server and not through a property or method.
      <telerik:RadButton ID="RadButton3" runat="server" AutoPostBack="false"
          Text="Anonymous function"
          OnClientClicked="function(button, args){Click3(button, args, 'Value1', 'Value2');}">
      </telerik:RadButton>
  2. scott
    scott avatar
    2 posts
    Member since:
    Aug 2011

    Posted 27 Oct 2011 Link to this post

    What if you are using the third example but with a variable that is coming from the server.  I have a similar situation where I'm using a RadTreeView (which doesn't have a commandArgument or commandText to populate) and trying to send in a variable created on the server.

    See this example:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var messageArray<%=p_intApplicantID%> = new MessageArray(<%=messageArray %>);
        </script>
    </telerik:RadCodeBlock>
      
    <table>
        <tr>
            <td id="classSpacer" runat="server" width = "150px"></td>
            <td>
                                      
                <telerik:RadTreeView ID="RadTreeView1" Runat="server" DataTextField="Descr" 
                    DataFieldID="ID" DataFieldParentID="ParentID" DataValueField="ID" 
                    MultipleSelect="true" ShowLineImages="false" 
                    OnClientNodeClicked="function(sender, args){onNodeClicking(sender, args, <%=p_intApplicantID %>);}"   >
                </telerik:RadTreeView>
                                                         
                                                      
            </td>
        </tr>
    </table>

    This example has a javascript variable being created with a dynamic name, within the onClientNodeClicked function I want to pass the dynamic portion of the name so that I can reference that variable within my javascript function.  The javascript function is currently receiving the sender, the args, and then the actual string shown here (<%=p_intApplicantID %>) instead of the evaluated applicant ID which would be a number like 561.  The message array variable does evaluate correctly so it looks something like messageArray561 when you view the rendered source.  This entire block of code is wrapped in a repeater and so I need to have unique variables for every instance that is repeated that is why I'm using the dynamic variable name.  I have tried using #Eval, etc, but I haven't found syntax that works.  I have also tried wrapping my radTree in a RadScriptBlock and a RadCodeBlock.

    Thanks,

    Scott
  3. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 28 Oct 2011 Link to this post

    Hi Scott,

    You can set the handler of the client clicked event on the server in order to pass a sever variable as a parameter of the function. This solution is valid for all RadControls for ASP.NET AJAX. The code snippet below demonstrates how to achieve this:
    string p_intApplicantID = "Value";
    RadTreeView1.OnClientNodeClicked = "function(button, args){onNodeClicking(sender, args, '" + p_intApplicantID + "');}";


    Best wishes,
    Slav
    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
  4. rjcup3
    rjcup3 avatar
    3 posts
    Member since:
    Dec 2011

    Posted 23 Dec 2011 Link to this post

    Nevermind I got it.
  5. digiben
    digiben avatar
    3 posts
    Member since:
    Mar 2011

    Posted 15 Mar 2013 Link to this post

    This is old, but I had to do this just now and this post really helped me.  If you want to grab a DataKey for instance within an ItemTemplate of a grid, you can use this to grab the current datakeyname, and then send an ajax response to the server:

    <telerik:GridTemplateColumn UniqueName="UOMColumn" HeaderText="Min UOM">
       <ItemTemplate>
          <telerik:RadComboBox ID="MyList" runat="server" OnClientSelectedIndexChanged='<%# "function(button, args){onCustomChanged(button, args, \"" + DataBinder.Eval(Container.DataItem, "PartNumber") + "\");}" %>' >
          </telerik:RadComboBox>
       </ItemTemplate>
    </telerik:GridTemplateColumn>


    function onCustomChanged(sender, args, partNumber)
    {
       $find("<%=RadAjaxManager1.ClientID %>").ajaxRequest("MyCustomEvent|" + partNumber);
    }
Back to Top