RadAjax Issue When Setting TabContainer Visbility

[Brad]

I'm experiencing an odd formatting issue when using the RadAjaxManager to make a TabContainer visible. Once the TabContainer is visible, the content of the first tab (which is the one specified by the ActiveTabIndex) appears above the content for the second tab. Additionally, the second tab is selected rather than the first one (which, again, is the one specified by the ActiveTabIndex). I've included a screenshot of what this looks like, along with the code below. If I click on the first tab, and then go back to the second tab, everything is displayed correctly and I can move between tabs without any further issues. If I replace the RadAjaxManager with a regular UpdatePanel then the tabs are rendered correctly. Any assistance you can provide will be helpful - thanks!

 

<telerik:RadAjaxManager ID="ram" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="btn">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="tc" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<asp:Button ID="btn" runat="server" Text="Press Me" OnClick="btn_Click" />
<ajax:TabContainer ID="tc" runat="server" ActiveTabIndex="0" Visible="false">
    <ajax:TabPanel ID="tp1" runat="server" HeaderText="Tab 1">
        <ContentTemplate>
            Tab 1 Content
        </ContentTemplate>
    </ajax:TabPanel>
    <ajax:TabPanel ID="tp2" runat="server" HeaderText="Tab 2">
        <ContentTemplate>
            Tab 2 Content
        </ContentTemplate>
    </ajax:TabPanel>
</ajax:TabContainer>

protected void btn_Click(object sender, EventArgs e)
{
    tc.Visible = true;
}

[Maria Ilieva]

Hi,

Try modifying your code like this:

  <telerik:RadAjaxManager ID="ram" runat="server" UpdatePanelsRenderMode="Inline">
            <ajaxsettings>
        <telerik:AjaxSetting AjaxControlID="Container1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Container1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </ajaxsettings>
        </telerik:RadAjaxManager>
        <asp:Panel runat="server" ID="Container1">
            <asp:Button ID="btn" runat="server" Text="Press Me" OnClick="btn_Click" />
            <ajax:tabcontainer id="tc" runat="server" activetabindex="0" visible="false">
    <ajax:TabPanel ID="tp1" runat="server" HeaderText="Tab 1">
        <ContentTemplate>
            Tab 1 Content
        </ContentTemplate>
    </ajax:TabPanel>
    <ajax:TabPanel ID="tp2" runat="server" HeaderText="Tab 2">
        <ContentTemplate>
            Tab 2 Content
        </ContentTemplate>
    </ajax:TabPanel>
</ajax:tabcontainer>
        </asp:Panel>

 and see how it goes.

Regards,
Maria Ilieva
Telerik

[Brad]

Maria,

Unfortunately that does not fix the problem. I did realize, though, that toggling the visibility had nothing to do with the error; it is simply caused by having the TabContainer updated by a RadAjaxManager. This markup, with no visibility settings and no button event handler, produces the same error:

<telerik:RadAjaxManager ID="ram" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="btn">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="tc" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<asp:Button ID="btn" runat="server" Text="Press Me" />
<ajax:TabContainer ID="tc" runat="server" ActiveTabIndex="0">
    <ajax:TabPanel ID="tp1" runat="server" HeaderText="Tab 1">
        <ContentTemplate>
            Tab 1 Content
        </ContentTemplate>
    </ajax:TabPanel>
    <ajax:TabPanel ID="tp2" runat="server" HeaderText="Tab 2">
        <ContentTemplate>
            Tab 2 Content
        </ContentTemplate>
    </ajax:TabPanel>
</ajax:TabContainer>

 

I tried different combinations of Panels and the UpdatePanelsRenderMode property and all of them had the same error. Thanks.

[Maria Ilieva]

Hello,

Can you please try to wrap the TabContainer and the button into asp UpdatePanel and see how it goes?

Regards,
Maria Ilieva
Telerik

[Brad]

 Maria,

If I use regular UpdatePanels then it works correctly, however my real situation is (obviously) more complex than this, and the rest of the page is using the RadAjaxManager / RadAjaxManagerProxy so I would like to use that here as well.

Thanks

[Maria Ilieva]

Hi,

Can you please test the applictaion with different ScriptManager - RadScritpManager, asp ScriptManager and ToolkitScriptManager and see if different behaviors with RadAjaxManager in those tree cases appear?

Regards,
Maria Ilieva
Telerik