This is a migrated thread and some comments may be shown as answers.

RadAjax Issue When Setting TabContainer Visbility

5 Answers 122 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Brad asked on 22 Mar 2016, 04:08 PM

ajax-tab-bug.png

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;

}

5 Answers, 1 is accepted

answered on 25 Mar 2016, 09:52 AM

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

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.

answered on 29 Mar 2016, 05:53 PM

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.