Force Controls in an AJAX-Enabled Container to Perform a Postback

Environment

Product

Progress® Telerik® UI for ASP.NET AJAX

Description

How can I force controls in an AJAX-enabled container to perform a postback?

Solution

If you use the AjaxManager to AJAX-enable a container control but you need to conditionally do a full postback with some of its inner controls, you need to apply the following settings.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Button1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Panel ID="Panel1" runat="server">
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <asp:Button ID="Button2" runat="server" Text="Button" />
</asp:Panel>

However, once the container control is added to the UpdatedControls collection, all postback controls in it will start performing callbacks instead of regular postbacks. To force these controls to perform postbacks, use either of the following approaches:

• Disable AJAX in the OnRequestStart client-side event handler of the AjaxManager control for the particular postback. Note that you need to add an AJAX setting where the container control updates itself.

  <div class='tabbedCode'><pre lang="JavaScript"><code>        &lt;telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"&gt;
      &lt;script type="text/javascript"&gt;
          function RequestStart(sender, eventArgs) {
               var eventTarget = eventArgs.get_eventTarget();
              if (eventTarget.indexOf("Button2") != -1) {
                  eventArgs.set_enableAjax(false);
              }
          }
      &lt;/script&gt;
  &lt;/telerik:RadCodeBlock&gt;
  ````
  

  <div class='tabbedCode'><pre lang="ASP.NET"><code>        &lt;telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"&gt;
      &lt;ClientEvents OnRequestStart="RequestStart" /&gt;
      &lt;AjaxSettings&gt;
          &lt;telerik:AjaxSetting AjaxControlID="Button1"&gt;
              &lt;UpdatedControls&gt;
                  &lt;telerik:AjaxUpdatedControl ControlID="Panel1" /&gt;
              &lt;/UpdatedControls&gt;
          &lt;/telerik:AjaxSetting&gt;
          &lt;telerik:AjaxSetting AjaxControlID="Panel1"&gt;
              &lt;UpdatedControls&gt;
                  &lt;telerik:AjaxUpdatedControl ControlID="Panel1" /&gt;
              &lt;/UpdatedControls&gt;
          &lt;/telerik:AjaxSetting&gt;
      &lt;/AjaxSettings&gt;
  &lt;/telerik:RadAjaxManager&gt;
  &lt;asp:Button ID="Button1" runat="server" Text="Button" /&gt;
  &lt;asp:Panel ID="Panel1" runat="server"&gt;
      &lt;asp:Label ID="Label1" runat="server" Text="Label"&gt;&lt;/asp:Label&gt;
      &lt;asp:Button ID="Button2" runat="server" Text="Button" /&gt;
  &lt;/asp:Panel&gt;
  ````
  

• (This approach is not longer supported. Use the previous suggestion.) Set the ChildrenAsTriggers property of the update panel that is added dynamically around the container control to false. For that purpose, you need to handle the OnAjaxSettingCreated server-side event of the AjaxManager control.

  <div class='tabbedCode'><pre lang="ASP.NET"><code>        &lt;telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxSettingCreated="RadAjaxManager1_AjaxSettingCreated"&gt;
      &lt;AjaxSettings&gt;
          &lt;telerik:AjaxSetting AjaxControlID="Button1"&gt;
              &lt;UpdatedControls&gt;
                  &lt;telerik:AjaxUpdatedControl ControlID="Panel1" /&gt;
              &lt;/UpdatedControls&gt;
          &lt;/telerik:AjaxSetting&gt;
      &lt;/AjaxSettings&gt;
  &lt;/telerik:RadAjaxManager&gt;
  &lt;asp:Button ID="Button1" runat="server" Text="Button" /&gt;
  &lt;asp:Panel ID="Panel1" runat="server"&gt;
      &lt;asp:Label ID="Label1" runat="server" Text="Label"&gt;&lt;/asp:Label&gt;
      &lt;asp:Button ID="Button2" runat="server" Text="Button" /&gt;
  &lt;/asp:Panel&gt;
  ````
  

  
      protected void RadAjaxManager1_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e)
      {
  
                  if (e.Updated.ClientID == Panel1.ClientID)
  
                  {
  
                      e.UpdatePanel.ChildrenAsTriggers = false;
  
                  }
      }
  
  ````
  
  
  

          Protected Sub RadAjaxManager1_AjaxSettingCreated(ByVal sender As Object, ByVal e As AjaxSettingCreatedEventArgs)
                  If e.Updated.ClientID = Panel1.ClientID Then
                      e.UpdatePanel.ChildrenAsTriggers = False
                  End If
      End Sub
  
  ````
  
  
  

See Also

• Cancel AJAX Requests

• OnRequestStart