This is a migrated thread and some comments may be shown as answers.

OnClientClicked with parameters?

9 Answers 2565 Views
Button
This is a migrated thread and some comments may be shown as answers.
James Daresta
Top achievements
Rank 1
James Daresta asked on 14 Feb 2011, 08:00 PM
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.






9 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 15 Feb 2011, 10:54 AM
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.
0
Raymond
Top achievements
Rank 1
answered on 11 Feb 2014, 09:43 PM
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?
0
Shinu
Top achievements
Rank 2
answered on 12 Feb 2014, 04:10 AM
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.
0
Raymond
Top achievements
Rank 1
answered on 12 Feb 2014, 04:18 PM
Hi,

Thanks...that is exactly what I needed.
0
Paul
Top achievements
Rank 1
answered on 29 Feb 2016, 02:17 PM
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?
0
Eyup
Telerik team
answered on 03 Mar 2016, 07:16 AM
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
0
Paul
Top achievements
Rank 1
answered on 03 Mar 2016, 05:56 PM

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>

0
Eyup
Telerik team
answered on 08 Mar 2016, 11:51 AM
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
0
Keith
Top achievements
Rank 1
answered on 16 Dec 2016, 08:10 PM

Thanks Shinu!  That worked perfectly for what I needed to do now.

Sincerely,

Keith Jackson

Tags
Button
Asked by
James Daresta
Top achievements
Rank 1
Answers by
Pero
Telerik team
Raymond
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Paul
Top achievements
Rank 1
Eyup
Telerik team
Keith
Top achievements
Rank 1
Share this question
or