Thursday, November 13, 2014

Radajaxloadingpanel not showing with Custom / Composite User Control

There are times when code does not work as expected and everything looks great in HTML and code behind. This is example of such case where Telerik RadAjaxLoadingPanel and RadAjaxManager are set as expected but still loading panel is not visible. The behaviour is strange where loading panel is working for some control on page but not working for others. One control performing Ajax operation and functionality is working as expected but no loading panel. 

Problem can be described as
RadAjaxLoadingPanel is not showing for but Ajax request is firing
RadAjaxLoadingPanel is not showing for some control on page

Situation:
We have Custom / Composite ASP.NET control which renders HTML as multiple controls

For example,
CustomUserControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" 
CodeFile="WebUserControl.ascx.cs" 
Inherits="WebUserControl" %>

<asp:HyperLink ID="HyperLink1" runat="server">
    <asp:Image ID="Image1" ImageUrl="test.jpg" runat="server" />
</asp:HyperLink>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">
    LinkButton
</asp:LinkButton>



Renders HTML as
<div class="RadAjaxPanel" id="WebUserControl1Panel" style="display: block;">
                <a id="WebUserControl1_HyperLink1"><img id="WebUserControl1_Image1" src="test.jpg"></a>
               <a id="WebUserControl1_LinkButton1" href="javascript:__doPostBack('WebUserControl1$LinkButton1','')">
               LinkButton
             </a>
</div>


This control is used on Test.aspx page
<%@ Page Language="C#" AutoEventWireup="true"
 CodeFile="test.aspx.cs" Inherits="test" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" 
TagPrefix="telerik" %>
<%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" 
TagPrefix="uc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title></head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel">
            This is Loading Panel
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" 
               LoadingPanelID="RadAjaxLoadingPanel">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="WebUserControl1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="WebUserControl1"
                       LoadingPanelID="RadAjaxLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <uc1:WebUserControl ID="WebUserControl1" runat="server" />
    </form>
</body>
</html>



Problem:
On clicking Link button Ajax request is fired but Loading Panel now showing. This can be confirmed by debugging or update link test on server side

Cause:
This is composite control rendering multiple control in HTML. In AJAX setting, AjaxControlID is the name of container control not the actual control doing Ajax.

Solution:
Update Ajax setting to the actual control ID as follows
<AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="LinkButton1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="LinkButton1" 
                        LoadingPanelID="RadAjaxLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
 

That is it!
Enjoy!

Post a Comment