Ajax on embedded user controls

3 posts, 0 answers
  1. Helen
    Helen avatar
    42 posts
    Member since:
    Nov 2013

    Posted 11 Jun 2014 Link to this post

    Hi,

    I need some guidance on using/setting up Ajax in my application. My application is a single page aspx with many user controls on it. When the page loads initially, there's a RadTabStrip with RadMultiPage which dynamically loads a user control containing RadListView. When the user clicks a button on an item, the application dynamically creates a tab that has the detail info of the item.  At this point, everything is currently working fine.

    The problem starts here:

    The new detail tab contains a user control that is used as a layout page to host other 5 user controls.  When I click on a button on any of the 5 controls, they all do a post-back instead of callback.  I only want let's say user control 3 to trigger an update on user control 5.

    I've set up RadAjaxManager on the Main page which hosts the RadTabStrip like this :
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadFilterButton">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
     
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" />

    Listview user control has RadAjaxManagerProxy:
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadListView1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadListView1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

    When user clicks a button on the list view, the application creates another tab that has a user control hosting other 5 user controls.
    This is the code of the detail page:
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="DetailLocationContact">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DetailProvider" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
     
     
    <div class="detailpane">
        <!-- LeadId -->
        <div class="leadidarea">
            <asp:Label ID="Label1" runat="server" Text="Lead ID:" /><asp:TextBox ID="LeadIDTextBox" runat="server" Text="LeadID"></asp:TextBox>
            Detail Main Controls here!
        </div>
     
        <!-- Forecast -->
        <div class="forecastarea">
            <uc1:DetailForecast runat="server" ID="DetailForecast" />
        </div>
     
        <!-- Company -->
        <div class="companyarea">
            <uc2:DetailCompany runat="server" ID="DetailCompany" />
        </div>
     
        <!-- Provider -->
        <div class="providerarea">
            <uc3:DetailProvider runat="server" ID="DetailProvider" />
        </div>
     
        <!-- Location and Contact -->
        <div class="locationarea">
            <uc4:DetailLocationContact runat="server" ID="DetailLocationContact" />
        </div>
     
        <!-- Additional Info -->
        <div class="additionalarea">
            <uc5:DetailAdditionalInfo runat="server" ID="DetailAdditionalInfo" />
        </div>
    </div>

    Sorry for the long description and complex UI as it has so many layers.  Is it possible for the Ajax manager to accomplish what I need?
    That is, to have Location user control to refresh only the Provider user control when a row has been clicked? 
    I have attached a screen shot to help in visualizing the process.

    Thank you,

    Helen
















  2. Helen
    Helen avatar
    42 posts
    Member since:
    Nov 2013

    Posted 12 Jun 2014 in reply to Helen Link to this post

    I should elaborate a little bit more on what I observed that confused me.  When I click the refresh button on the grid, I was expecting to see only the ascx page containing the grid going through the page life cycle.  However, when I put a breakpoint on the page_load event of all my ascx pages, they all get triggered to run through the life cycle by the refresh of a single user control.  Is there a way to stop that from happening and only update the relevant user control?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 16 Jun 2014 Link to this post

    Hi Helen,

    Note that a  Single PageView or a control nested in a PageView could not be added as AJAX initiator or updated control in the AJAX settings.
    The only possible approach is to add the whole MultiPage in the RadAjaxManager settings or wrap the whole control into RadAjaxPanel. When we set the MultiPage as an updated control, you should also include the TabStrip associated with it in the Ajax settings.

    For example:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
        SelectedIndex="0" AutoPostBack="True">
        <Tabs>
            <telerik:RadTab runat="server" Text="Tab # 1" PageViewID="Tab1" Selected="True">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Tab # 2" PageViewID="Tab2">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Height="800px"
        EnableEmbeddedScripts="true" Width="402px">
        <telerik:RadPageView ID="Tab1" runat="server" ContentUrl="~/MultiTab1.aspx" Height="800px"
            Width="948px">
        </telerik:RadPageView>
        <telerik:RadPageView ID="Tab2" runat="server" ContentUrl="~/MultiTab2.aspx">
        </telerik:RadPageView>
    </telerik:RadMultiPage>

    I hope this helps.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top