Ajax on embedded user controls

[Helen]

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

[Helen]

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?

[Maria Ilieva]

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