Just a quick example of the scenario above - the following declaration
<asp:UpdatePanel runat="server" ID="UpdatePanel1" RenderMode="Inline"> |
<ContentTemplate> |
<asp:Button runat="server" ID="Button1" Text="CallBack" /> |
</ContentTemplate> |
</asp:UpdatePanel> |
|
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" > |
<AjaxSettings> |
<telerik:AjaxSetting AjaxControlID="Button2"> |
<UpdatedControls> |
<telerik:AjaxUpdatedControl ControlID="Button2" /> |
</UpdatedControls> |
</telerik:AjaxSetting> |
</AjaxSettings> |
</telerik:RadAjaxManager> |
|
<asp:Button runat="server" ID="Button2" Text="CallBack" /> |
Renders the following markup:
|
|
|
|
<span id="UpdatePanel1"> |
<input type="submit" name="Button1" value="CallBack" id="Button1" /> |
</span> |
|
<div id="RadAjaxManager1SU"> |
<span id="RadAjaxManager1" style="display:none;"></span> |
</div> |
|
<div id="Button2Panel"> |
<input type="button" name="Button2" value="CallBack" onclick="javascript:__doPostBack('Button2','')" id="Button2" /> |
</div> |
In the built-in UpdatePanel ajaxification, the button is wrapped inside a <span> which preserves the layout (because of the RenderMode = "Inline" setting).
With RadAjaxManager, this becomes <div> (per the default RenderMode = "Block") and since this is a block element, it can screw up design.