RadAjax Issue When Setting TabContainer Visbility

6 posts, 0 answers
  1. Brad
    Brad avatar
    4 posts
    Member since:
    Nov 2015

    Posted 22 Mar Link to this post

    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;
    }
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 25 Mar Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Brad
    Brad avatar
    4 posts
    Member since:
    Nov 2015

    Posted 29 Mar in reply to Maria Ilieva Link to this post

    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.

  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 01 Apr Link to this post

    Hello,

    Can you please try to wrap the TabContainer and the button into asp UpdatePanel 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.
  6. Brad
    Brad avatar
    4 posts
    Member since:
    Nov 2015

    Posted 01 Apr in reply to Maria Ilieva Link to this post

     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

  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 06 Apr Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017