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);

}

Tuesday, December 21, 2010

How to handle TextBox event through AJAX Manager Proxy(RadControl)

To handle the OnClick event of a asp:button, we can easily configure the AJAX Manager Proxy control by setting AjaxControlID property to the ID of the asp:button.
But to handle an event fired from a asp:textbox we need to set an additional property named EventName. We have to set the proper textbox event in order to handle it by AJAX Manager Proxy



Sample
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
 <AjaxSettings>
  <telerik:AjaxSetting AjaxControlID="Button1">
   <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="DetailsView1" />
    <telerik:AjaxUpdatedControl ControlID="GridView1" />
   </UpdatedControls>
  </telerik:AjaxSetting>


  <telerik:AjaxSetting AjaxControlID="TextBox1" EventName="OnTextChanged">
   <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="GridView1" />
    <telerik:AjaxUpdatedControl ControlID="DetailsView1" />
   </UpdatedControls>
  </telerik:AjaxSetting>
 </AjaxSettings>
</telerik:RadAjaxManagerProxy>