Wednesday, December 22, 2010

Display RadAjaxLoadingPanel when there are several UserControls in a web page.

Suppose you have a web page(aspx) with three UserControls.When there is a change in UserControl1 you want to do an asynchronous load for UserControl2 by displaying RadAjaxLoadingPanel on top of that.
We can use the AddAjaxSetting method in Page_Load event to implement the above task.
Sample:
RadAjaxManager.GetCurrent(this.Page).AjaxSettings.AddAjaxSetting(UserControl1, UserControl2, RadAjaxLoadingPanel)

In this case, you can see that asynchronous load of UserControl2 happening successfully, but RadAjaxLoadingPanel is not displaying.
According to Telerik supporting team, “UserControls does not render any HTML element and that is why the loading panel is not shown!”
Alternative solution is,  
  • First we have to identify an event which is occurring inside the UserControl1. Suppose in this scenario we have a click event of a asp:Button inside the UserControl1. 
  • In the web page, place the UserControl2 inside a asp:Panel control.
  • Use theAddAjaxSetting method, in web page Page_Load event by passing Button Id and Panel Id as parameters.

Sample Code 
Web Page(aspx) 
<uc1:UserControl1 ID="uc1" runat="server"/>
<asp:Panel ID="Panel" runat="server"> 

  <uc1:UserControl2 ID="uc2" runat="server"/>
</asp:Panel>

<uc1:UserControl3 ID="uc3" runat="server"/>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" >
</telerik:RadAjaxLoadingPanel>
Web Page(cs)
protected void Page_Load(object sender, EventArgs e)
{
  Button btnConfirm = (Button)uc1.FindControl("Button1");    
  RadAjaxManager.GetCurrent(this.Page).AjaxSettings.AddAjaxSetting(btnConfirm, Panel1, RadAjaxLoadingPanel1);

}