SelectedTab with TabBar, RadMultiPage and RadAjaxManager

[Ryan]

I have a simple page with a TabBar and RadMultiPage.  I hooked up the ajaxified the TabBar and MultiPage with the AjaxManager but the selected tab (visually) isn't persisting after clicking on a tab.  Code is below.  Anything I am missing?  It works as expected when removing the AjaxManager and having a regular postback.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" />
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
        AutoPostBack="true">
        <Tabs>
            <telerik:RadTab Text="Tab 1">
            </telerik:RadTab>
            <telerik:RadTab Text="Tab 2">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
        <telerik:RadPageView ID="HealthSafetyPage" runat="server">
            <p>
                Tab 1 content
            </p>
        </telerik:RadPageView>
        <telerik:RadPageView ID="ProcessSafetyPage" runat="server">
            <p>
                Tab 2 content
            </p>
        </telerik:RadPageView>
    </telerik:RadMultiPage>

[Princy]

Hi Ryan,

Please modify your code as follows.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
  <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
      <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
      </UpdatedControls>
    </telerik:AjaxSetting>
  </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" />
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" AutoPostBack="true">
  <Tabs>
     <telerik:RadTab Text="Tab 1">
     </telerik:RadTab>
     <telerik:RadTab Text="Tab 2">
     </telerik:RadTab>
  </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
  <telerik:RadPageView ID="HealthSafetyPage" runat="server">
     <p>
       Tab 1 content
     </p>
  </telerik:RadPageView>
  <telerik:RadPageView ID="ProcessSafetyPage" runat="server">
     <p>
       Tab 2 content
     </p>
  </telerik:RadPageView>
</telerik:RadMultiPage>

Hope this helps.

Regards,
Princy.

[Ryan]

Hi Princy,

Thanks for the quick response.  Your example does work, but is there anyway to do it without having the TabStrip reload (showing the loading panel and being inactive)?

Thanks,
Ryan

[Nencho]

Hello Ryan,

This behavior is caused by the fact that the AutoPostBack property is set to "True". In order to prevent the postback, this property should be set to "False".

Regards,
Nencho
the Telerik team