OnClientClicked with parameters?

[James Daresta]

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.

[Pero]

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

[Raymond]

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?

[Shinu]

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.

[Raymond]

Hi,

Thanks...that is exactly what I needed.

[Paul]

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?

[Eyup]

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

[Paul]

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>

[Eyup]

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

[Keith]

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

Sincerely,

Keith Jackson