replacing asp UpdatePanel with Telerik

[xeon]

How to replace UpdatePanel with telerik, what to use RadAjaxManager or RadAjaxPanel. The UpdatePanel contains ListBox control where the items are retrieved from the database. Is there any replacement for ContentTemplate in telerik too?

<td class="td_populate">
<asp:UpdatePanel ID="updp1" runat="server">
<ContentTemplate>                                       
<asp:ListBox ID="countryCode" runat="server" Rows="1"></asp:ListBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="countryCode"
Display="Dynamic" ErrorMessage="* Please select the Country Code" SetFocusOnError="True" />
</ContentTemplate>
</asp:UpdatePanel>
</td>

<td class="td_populate">
<asp:UpdatePanel ID="updp2" runat="server">
<ContentTemplate>
<asp:ListBox ID="region" runat="server" Rows="1">
<asp:ListItem Value="">--- SELECT ---</asp:ListItem>
</asp:ListBox>                            
<asp:RequiredFieldValidator ID="RFV2" runat="server" ControlToValidate="region"
Display="Dynamic" ErrorMessage="* Please select the region code" SetFocusOnError="True" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="region" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</td>

How to migrate this controls using telerik?

[Marin Bratanov]

Hi,

There are different ways to do that, here are two examples:

• using RadAjaxManager/RadAjaxManagerProxy can provide greater flexibility but it "hides" the AJAX setup a bit, because the AJAX settings are not defined next to the affected controls themselves:
  
  

  <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
      <AjaxSettings>
          <telerik:AjaxSetting AjaxControlID="paymentSystem">
              <UpdatedControls>
                  <telerik:AjaxUpdatedControl ControlID="paymentSystem" />
              </UpdatedControls>
          </telerik:AjaxSetting>
          <telerik:AjaxSetting AjaxControlID="currency">
              <UpdatedControls>
                  <telerik:AjaxUpdatedControl ControlID="currency" />
              </UpdatedControls>
          </telerik:AjaxSetting>
      </AjaxSettings>
  </telerik:RadAjaxManager>
  <td class="tbl_input">
      <asp:ListBox ID="paymentSystem" runat="server" Rows="1"></asp:ListBox>
      <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="paymentSystem"
                                  Display="Dynamic" ErrorMessage="* Please select the Payment system" SetFocusOnError="True" />
  </td>
  
  <td>
      <asp:ListBox ID="currency" runat="server" Rows="1">
          <asp:ListItem Value="">--- SELECT ---</asp:ListItem>
      </asp:ListBox>
      <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="currency"
                                  Display="Dynamic" ErrorMessage="* Please select the currency code for cash payment" SetFocusOnError="True" />
  </td>

• using RadAjaxPanels is simpler and closer to the asp:UpdatePanels but does not offer the same level of flexibility (e.g., you cannot add additional panels/controls to be updated by one RadAjaxPanel):
  
  

  <td class="tbl_input">
      <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
          <asp:ListBox ID="paymentSystem" runat="server" Rows="1"></asp:ListBox>
      </telerik:RadAjaxPanel>
      <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="paymentSystem"
                                  Display="Dynamic" ErrorMessage="* Please select the Payment system" SetFocusOnError="True" />
  </td>
  
  <td>
      <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">
          <asp:ListBox ID="currency" runat="server" Rows="1">
              <asp:ListItem Value="">--- SELECT ---</asp:ListItem>
          </asp:ListBox>
      </telerik:RadAjaxPanel>
      <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="currency"
                                  Display="Dynamic" ErrorMessage="* Please select the currency code for cash payment" SetFocusOnError="True" />
  </td>

Two points of interest:

• you should not mix RadAjaxPanel with AjaxSettings: http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/radajaxmanager/troubleshooting/controls-wrapped-in-ajaxpanel-and-added-to-ajaxmanager-settings.
• you can also add RadAjaxLoadingPanel controls through the LoadingPanelID of RadAjaxPanel and AjaxSetting, and the DefaultLoadingPanelID property of the RadAjaxManager. They are a better version of the UpdateProgress standard control

Regards,

Marin Bratanov
Telerik