replacing asp UpdatePanel with Telerik

2 posts, 1 answers
  1. xeon
    xeon avatar
    2 posts
    Member since:
    Jun 2015

    Posted 08 Jun 2015 Link to this post

    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?
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 10 Jun 2015 Link to this post

    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:

    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top