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
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!
No comments:
Post a Comment