Wednesday 7 November 2012

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.




No comments:

Post a Comment