C# Tips , .Net Tips : Unable to raise server side click event of button using "onClientClick" in Rad AjaxPanel

There is a situation where you want to put asp button in telerik Rad AjaxPanel and execute some javascript function using "onClientClick" event and base on that javascript function you need to execute server side code, i.e If javascript function return false then do nothing else if return true it will execute server side code. Here is solution for this.
Without do any trick this code do not work If you simply set "onClientClick" with javascript function without update panel this work but under Rad AjaxPanel this is not execute server side code after executing javascript function.

This Do not work :  onClientClick="return ConfirmDeleteMessage();"

This will Work :  OnClientClick="if (!ConfirmDeleteMessage('Are you sure you want to delete ? ')) { return false; }"

Here is example for this.
In this example we take one asp button and put this button inside Rad AjaxPanel.
And also we take on javascript function, in this function we take confirmation window and ask use for allow delete message.
On clicking on the "Ok" server side code is being executed.

ASPX Code : 

   <telerik:radscriptblock id="RadScriptBlock1" runat="server">
       <script type="text/javascript">
           function ConfirmDeleteMessage(strMessage) {
               if (window.confirm(strMessage)) {
                   return true;
               }
               else {
                   return false;
               }
           }
        </script>
    </telerik:radscriptblock>

    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <telerik:radajaxpanel id="pnlMessage" runat="server">
        <div>
            <asp:Label runat="server" ID="lblMessage" ></asp:Label><br />
            <asp:Button runat="server" ID="btnDeleteItem" Text="Delete Item" 
                                     OnClientClick="if (!ConfirmDeleteMessage('Are you sure you want to delete ? ')) { return false; }"
                                     OnClick="btnDeleteItem_Click"  />
            <br /><br />
         </div>
         </telerik:radajaxpanel>
     </form>

C# Examples :

    protected void btnDeleteItem_Click(object sender, EventArgs e)
    {
        lblMessage.Text = "Server side code executed.";
        
    }

VB.net Examples :

    Protected Sub btnDeleteItem_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        lblMessage.Text = "Server side code executed."
    End Sub

Output (After Click on "Delete Item" button confirmation dialog box open) :

Output (After click n "Ok" button of confirmation dialog box server side code of "Delete Item" button  executed.) : 

 

This article is very useful for .Net Beginners.

Note : Give Us your valuable feedback in comments. Give your suggestions in this article so we can update our articles accordingly that.

OnClientClickevent and AJAX is not working for telerik RadControls.

Client Confirmation and AJAX in RadControls for asp.net (telerik).

One may need to provide a confirmation dialog to the users and initiate an AJAX request if accepted. Confirmation using standard post backs often looks like this:

<asp:ImageButton ID="ImageButton1" runat="server" OnClientClick="return confirm('Are you sure?');" />

The OnClientClick should be changed a bit to work with AJAX:

<asp:ImageButton ID="ImageButton2" runat="server" OnClientClick="if (!confirm('Are you sure?')) return false;" />

When the button is placed within RadAjaxPanel control.

Alternatively, the OnRequestStart client-side event could be used to implement more complex logic.
 Here is a sample script:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
    function OnRequestStart(ajaxControl, eventArgs) {
        var eventTarget = eventArgs.get_eventTarget();
        if (eventTarget == "<%= ImageButton1.UniqueID %>") {
            return confirm('Are you sure?');
        }
        else {
            return false;
        }
    }
</script>
</telerik:RadCodeBlock>

I hope you enjoyed this article, and it made your life a little bit easier.

If you have any question then feel free to ask us.