OnClientClicked with parameters?

9 posts, 0 answers
  1. James Daresta
    James Daresta avatar
    59 posts
    Member since:
    Sep 2009

    Posted 14 Feb 2011 Link to this post

    I am trying to figure out the best way to do replicate with the RadButton something I do with regular ASP.NET buttons. Basically I have a client script in my master page like this where a function takes a parameter to do some validation dynamically based on conditions. Its in the master page so I can have it centralized to one location for all my pages.

    function Master_PerformFullPostBackWaitScreen(ValidationGroup) {
        var valid = true;
          
        if (Master_ByPassPostBackWaitScreen) {
            Master_ByPassPostBackWaitScreen = false;
            return;
        }
        var rwMasterPage_FullScreenWaitWindow = $find('<%=rwMasterPage_FullScreenWaitWindow.ClientID %>');
        if (ValidationGroup != null) {
            Page_ClientValidate(ValidationGroup);
            valid = Page_IsValid;
        }
          
        if ((rwMasterPage_FullScreenWaitWindow != null) && (valid)) rwMasterPage_FullScreenWaitWindow.show();
    }

    Here is my normal button code.

    <telerik:Button ID="btnCustomerProfile_AccountInformationSave" runat="server" 
        Text="Save" 
        onclick="btnCustomerProfile_AccountInformationSave_Click"
        ValidationGroup="vgAccountInformation"  Visible="false"
        OnClientClick="Master_PerformFullPostBackWaitScreen('vgAccountInformation')" />

    So the button passes to my function the validation group it should run before it tries to show a Rad Window that covers the entire screen modally to prevent users from clicking anything while the page process. The problem I have with the RadButton is that the OnClientClicked does not allow me to put the call in with parameters. So I thought well my solution might be that on the client side I read the source button's validation group. However, there is not clientside function for this. This best I have is to use the command argument like this.

    <telerik:RadButton ID="btnCustomerProfile_AccountInformationSave" runat="server" 
        Text="Save" 
        onclick="btnCustomerProfile_AccountInformationSave_Click"
        ValidationGroup="vgAccountInformation"  
        Visible="false"
        OnClientClicked="Master_PerformFullPostBackWaitScreen_RadButton"
        CommandName="Save"
        CommandArgument="vgAccountInformation"
        Icon-PrimaryIconUrl="../images/icons/save16x16.gif"  />

    Then to do a client side script like this.

    function Master_PerformFullPostBackWaitScreen_RadButton(sender, eventArgs) {
        Master_PerformFullPostBackWaitScreen(sender.get_commandArgument())
    }

    Of course now if I run into a situation where I actually need to use the command argument on the server side I am in trouble. I ran into a similar problem where I needed a rad button to pass several parameters to a script, but again I had to use the command argument with a delimited string. It seems either the OnClientClicked needs to work more like the normal button OnClick or there needs to be some property to read parameters for the script or even expose things like the validation group property or so on.






  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 15 Feb 2011 Link to this post

    Hello James,

    The easiest way to pass predefined parameters to a function executed on the client click of the button, is to assign anonymous function to the OnClientClicked property:

    <script type="text/javascript">
        function alertText(text, title)
        {
            alert(text + " " + title);
        }
    </script>
    <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton1" OnClientClicked="function (button,args){alertText('Alerted Text','Alerted Title');}">
    </telerik:RadButton>

    Please note that the clicked (OnClientClicked) client-side event of the RadButton control is fired after the client-side validation has been performed, so there is no need to explicitly perform the client-validation. Here is a demonstration:
    <script type="text/javascript">
        function btnClick(button, args)
        {
            var valid = Page_IsValid;
            if (valid)
                alert("Page Valid");
        }
    </script>
    <div>
        <asp:TextBox runat="server" ID="txt1" />
        <asp:RequiredFieldValidator ErrorMessage="Error" ControlToValidate="txt1" ValidationGroup="group"
            runat="server" />
        <telerik:RadButton ID="RadButton3" runat="server" Text="Validate" ValidationGroup="group"
            OnClientClicked="btnClick">
        </telerik:RadButton>
    </div>


    Greetings,
    Pero
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Raymond
    Raymond avatar
    18 posts
    Member since:
    Dec 2012

    Posted 11 Feb 2014 in reply to Pero Link to this post

    Pero, your example passes predefined parameters into a separate function...but that function does not have access to the args parameter that would be necessary to cancel the action.  Is there a way to get both the args parameters and custom parameters into a function?
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Feb 2014 in reply to Raymond Link to this post

    Hi Raymond,

    Please have a look into the following code snippet to pass the predefined parameters and custom parameters to OnClientClicked event of RadButton.

    ASPX:
    <telerik:RadButton ID="RadButton3" runat="server" AutoPostBack="false" Text="Anonymous function"
        OnClientClicked="function(button, args){Click(button, args, 'Value1', 'Value2');}">
    </telerik:RadButton>

    JavaScript:
    <script type="text/javascript">
        function Click(sender, args, value1, value2) {
            alert(value1);
            alert(value2);
        }
    </script>

    Thanks,
    Shinu.
  6. Raymond
    Raymond avatar
    18 posts
    Member since:
    Dec 2012

    Posted 12 Feb 2014 in reply to Shinu Link to this post

    Hi,

    Thanks...that is exactly what I needed.
  7. Paul
    Paul avatar
    16 posts
    Member since:
    Feb 2016

    Posted 29 Feb in reply to Shinu Link to this post

    Yes, this works, but what if I need to pass a databound value to the "Click" function, not just a hard coded string. Like this:
    OnClientClicked="function(button, args){Click(button, args, '<%# Bind("CourseUID") %>', 'value2');}">
    But that doesn't work. How can I accomplish this?
  8. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 03 Mar Link to this post

    Hi Paul,

    I am sending a sample RadGrid web site to demonstrate a similar implementation. Please run the attached application and instruct us any further steps to achieve your desired functionality.

    Regards,
    Eyup
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  9. Paul
    Paul avatar
    16 posts
    Member since:
    Feb 2016

    Posted 03 Mar Link to this post

    Hi Eyup,

    Thanks for the response, and the help. Your example code does work. I did find another approach that also works (see code block below), by setting the CommandArgument and passing that value to the JavaScript function. In the JS function "CourseUID = button.get_commandArgument();" retrieved the value I needed.

    -Paul

    <telerik:RadButton ID="btnValidate2" ButtonType="LinkButton"
        runat="server"
        AutoPostBack="false"
        Text='<%# Convert.ToBoolean(Eval("validated")) == true ? "Yes" : "No" %>'
        CommandArgument='<%# Bind("CourseUID") %>'
        OnClientClicked="function(button, args){OpenValidationWindow(button, args);}">
    </telerik:RadButton>

  10. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 08 Mar Link to this post

    Hello Paul,

    In this case you can directly use:
    <telerik:RadButton ... OnClientClicked="OpenValidationWindow">

    The args collection is passed automatically. You can see the second code sample here for a reference:
    http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/events/clientevents-class-members

    Regards,
    Eyup
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017