Server side button click does not fire when I use it in RadAjaxManager

Question

I am using several settings in RadAjaxManager. I have a server control asp button which re-loads the whole page when clicked. To revent that I put this setting in RadAjaxManager

<telerik:AjaxSetting AjaxControlID="btnPrint">
    <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="btnPrint" LoadingPanelID="RadAjaxPanel"/>
    </UpdatedControls>
</telerik:AjaxSetting>

but for some reason my code behind click event does not fire. Any ideas please

 <telerik:RadAjaxPanel ID="RadAjaxPanel"  PostBackControls="btnPrint" runat="server">
     <div class="grid-wrapper" id="subcodeDiv" style="padding: 0px; margin-top: 20px; margin-left: 0; margin-right: 0px; width: 1160px; float: left; overflow: hidden">
         <table class="subcodesdata">
            <tr>
              <td>
                <asp:Button ID="btnPrint" runat="server" Text="Print" CssClass="button" OnClick="btnPrint_Click" ></asp:Button>
              </td>
            </tr>
         </table>
    </div>
</telerik:RadAjaxPanel>

Answer 1

The problem is that you applied both RadAjaxManager and RadAjaxPanel to the same button, which is wrong and unnecessary. You just need to pick one of those methods here.

Please try the following working code samples. When you click the Print button 1, the text will be loaded into the span tag and displayed on the screen without the page being refreshed. It works the same for Print button 2 as well.

RadAjaxPanel method

    <telerik:RadAjaxPanel runat="server" ID="rap" PostBackControls="btnPrint2">
            <div class="grid-wrapper">
            <table class="subcodesdata">
                <tr>
                    <td>
                        <asp:Button ID="btnPrint2" runat="server" Text="Print 2" CssClass="button" OnClick="btnPrint2_Click"></asp:Button>
                        <br />
                        <span runat="server" id="span2"></span>
                    </td>
                </tr>
            </table>
        </div>
    </telerik:RadAjaxPanel>

    protected void btnPrint2_Click(object sender, EventArgs e)
    {
        span2.InnerHtml = "Print button 2 clicked...";
    }

RadAjaxManager method

<telerik:RadAjaxManager ID="ram" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btnPrint1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="subcodeDiv" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
</telerik:RadAjaxManager>
<div class="grid-wrapper" id="subcodeDiv" runat="server">
        <table class="subcodesdata">
            <tr>
                <td>
                    <asp:Button ID="btnPrint1" runat="server" Text="Print 1" CssClass="button" OnClick="btnPrint1_Click"></asp:Button>
                    <br />
                    <span runat="server" id="span1"></span>
                </td>
            </tr>
        </table>
    </div>
    protected void btnPrint1_Click(object sender, EventArgs e)
    {
        span1.InnerHtml = "Print button 1 clicked...";
    }

Answer 2

Although this is an old thread here it goes the solution if someone else is still struggling with it. The problem here is that you cannot have a button updating itself. Well, you CAN but then your page won't work as expected. Instead the button should update secondary controls. When you make your button to update itself every time you click it will just reset itself and therefore will never fire the server side function.

So this is the correct way of doing it:

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadAjaxManager ID="ajaxmanager1" runat="server" EnableAJAX="true">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="btnPrint">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="subcodeDiv" />
           </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

HOWEVER, I am not sure that Telerik controls will update a div. I know that they will work fine with controls but not divs.

Even so I think that the button shouldn't be inside the div you are trying to update.

Anyway, if the example above does NOT work try the following one below. It will for sure work -- notice that I replaced the div by a label control:

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
 
<telerik:RadAjaxManager ID="ajaxmanager1" runat="server" EnableAJAX="true">
 <AjaxSettings>
  <telerik:AjaxSetting AjaxControlID="btnPrint">
   <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="label1" />
   </UpdatedControls>
  </telerik:AjaxSetting>
 </AjaxSettings>
</telerik:RadAjaxManager>

<asp:Button ID="btnPrint" runat="server" Text="Print" CssClass="button" OnClick="btnPrint_Click" ></asp:Button>
<asp:label autopostback="true" id="label1" runat="server" visible="true"></asp:label>