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

Dim ram as RadAjaxManager = 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 AjaxSettings where 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();
    }
}

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim ram As RadAjaxManager = RadAjaxManager.GetCurrent(Page)
    If ram IsNot Nothing Then
        AddHandler ram.AjaxRequest, AddressOf Ram_AjaxRequest
    End If
End Sub

Private Sub Ram_AjaxRequest(ByVal sender As Object, ByVal e As AjaxRequestEventArgs)
    'check for the argument passed to the ajaxRequest() client-side method'
    If e.Argument.Equals("FromUserControl") Then
        Label1.Text = DateTime.Now.ToString()
    End If
End Sub

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:

  <div class='tabbedCode'><pre lang="ASP.NET"><code>        &lt;form id="Form1" method="post" runat="server"&gt;
      &lt;telerik:RadScriptManager ID="RadScriptManager1" runat="server"&gt;
      &lt;/telerik:RadScriptManager&gt;
      &lt;telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"&gt;
      &lt;/telerik:RadAjaxManager&gt;
      &lt;uc1:webusercontrol1 id="WebUserControl1" runat="server"&gt;&lt;/uc1:webusercontrol1&gt;
  &lt;/form&gt;
  ````
  

• On the user control markup:

  <div class='tabbedCode'><pre lang="ASP.NET"><code>        &lt;asp:Button ID="Button1" Text="Button" runat="server"&gt;&lt;/asp:Button&gt;
  &lt;asp:Label ID="Label1" runat="server"&gt;Label&lt;/asp:Label&gt;
  ````
  

• In the page code-behind:

  <div class='tabbedCode'><pre lang="C#"><code>        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);
  }
  
  ````
  

          Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
          'Get the WebUserControl
          Dim MyControl As UserControl = CType(Page.FindControl("WebUserControl1"), UserControl)
  
      'Get user control's button and label
      Dim MyButton As Button = CType(MyControl.FindControl("Button1"), Button)
      Dim MyLabel As Label = CType(MyControl.FindControl("Label1"), Label)
  
      'Add the necessary AJAX setting programmatically
      RadAjaxManager1.AjaxSettings.AddAjaxSetting(MyButton, MyLabel)
  End Sub 
  ````
  
  
  

  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.

    <div class='tabbedCode'><pre lang="C#"><code>        protected void Button1_Click(object sender, System.EventArgs e)
    {
        Label1.Text = DateTime.Now.ToLongTimeString();
    }
    ````

        Protected Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
            Label1.Text = DateTime.Now
        End Sub
        ````

See Also

• Load User Controls

• Add AjaxSettings Programmatically

• User Controls