Use Telerik AJAX and WebUserControls
Environment
| Product | Progress® Telerik® UI for ASP.NET AJAX |
Description
How can I use Telerik UI for ASP.NET AJAX and WebUserControls?
Solution
The AjaxManager for ASP.NET AJAX allows only a single instance of the control on the same page. You cannot place the manager in the main page and a second manager instance inside a user control. The AjaxManager designer on the other hand, cannot locate the WebUserControl as well as controls inside it.
The solution is to use the RadAjaxManagerProxy control, which can be added inside a WebUserControl and configured in the same way as the manager to AJAX-enable the user control completely codelessly.
You can use the
RadAjaxManagerProxyfor design-time configuration only. It does not have a client-side object, methods, or events. For more information, refer to the following sections on handling them through the AjaxManager instance.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="DropDownList1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="DetailsView1" />
<telerik:AjaxUpdatedControl ControlID="GridView1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="GridView1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="GridView1" />
<telerik:AjaxUpdatedControl ControlID="DetailsView1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>Getting Reference to the RadAjaxManager Instance
If you need the server or client-side AjaxManager functionality, like the ResponseScripts collection or the ajaxRequest function, get the "master" manager instance with the server-side GetCurrent(Page) method from the user control code-behind:
RadAjaxManager ram = RadAjaxManager.GetCurrent(Page);Triggering AJAX Requests from the Client
If you need the manager instance at the code of a WebUserControl to explicitly trigger an AJAX request, for example, get the manager by using the RadAjaxManager.GetCurrent(Page) method. The method will return null if no manager is located on the page similar to the ASP:ScriptManager implementation.
With this approach, the initiator of the request is the AjaxManager. It will update only controls according to the
AjaxSettingswhere the AjaxManager is the initiator.
The following example demonstrates how to use a server-side code block in a JavaScript function inside your WebUserControl to call the master manager ajaxRequest() function.
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function myUserControlClickHandler() {
$find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("FromUserControl");
}
</script>
</telerik:RadCodeBlock>Handling the AjaxRequest Server-Side Event
If you invoked an AJAX request from the client from inside a user control, you may also want to handle that event in the code-behind of the user control. You can do that by attaching an event handler to the RadAjaxManager instance, whose reference you can obtain through its GetCurrent() method.
The following example demonstrates how to handle an AjaxRequest server event in a user control.
protected void Page_Load(object sender, EventArgs e)
{
RadAjaxManager ram = RadAjaxManager.GetCurrent(Page);
if (ram != null)
{
ram.AjaxRequest += Ram_AjaxRequest;
}
}
private void Ram_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
//check for the argument passed to the ajaxRequest() client-side method
if (e.Argument.Equals("FromUserControl"))
{
Label1.Text = DateTime.Now.ToString();
}
}Adding AJAX Settings to the Manager
As to the AJAX settings, if the markup settings within the user control do not suffice, you can always add AJAX settings programmatically. For example, you may want to have something from the user control to update another part of the page.
The following example demonstrates how to add AjaxSettings to the AjaxManager.
On the main form:
<form id="Form1" method="post" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<uc1:webusercontrol1 id="WebUserControl1" runat="server"></uc1:webusercontrol1>
</form>On the user control markup:
<asp:Button ID="Button1" Text="Button" runat="server"></asp:Button>
<asp:Label ID="Label1" runat="server">Label</asp:Label>In the page code-behind:
protected void Page_Load(object sender, EventArgs e)
{
//Get the WebUserControl
UserControl MyControl = (UserControl)Page.FindControl("WebUserControl1");
//Get user control's button and label
Button MyButton = (Button)MyControl.FindControl("Button1");
Label MyLabel = (Label)MyControl.FindControl("Label1");
//Add the necessary AJAX setting programmatically
RadAjaxManager1.AjaxSettings.AddAjaxSetting(MyButton, MyLabel);
}You can use the RadAjaxManager.GetCurrent(Page) method to reference the AjaxManager in the Page_Load of the user control and add the AjaxSettings there as well.
The following example demonstrates how to achieve this on the user control code-behind.
protected void Button1_Click(object sender, System.EventArgs e)
{
Label1.Text = DateTime.Now.ToLongTimeString();
}