RadTabStrip Multi-Row reorders tab rows wrong

9 posts, 0 answers
  1. Randall
    Randall avatar
    54 posts
    Member since:
    Jun 2008

    Posted 16 Jun 2011 Link to this post

    Hello,

    Using RadControls for ASP.NET AJAX 2011.1.413.35

    I have a RadWindow that contains a RadToolBar followed by a RadTabStrip followed by a RadMultiPage.

    The RadToolBar has "OK" and "Cancel" buttons. This works fine.

    The RadTabStrip contains 15 tabs broken up into 3 rows of 5 each, and has the ReorderTabsOnSelect="true", and the IsBreak="true" set in the appropriate places. Let's call these rows from top down as rows 3, 2, and then 1 on the bottom. This works fine.

    The RadMultiPage contains one RadMultiPageView for each tab and contains various labels, textboxes, and other editing controls. This works fine.

    When I click row 1 / tab 3 (bottom row of tabs), the RadMultiPageView associated with that tab has a series of Buttons, each with an OnClick event that performs some server stuff and then opens another RadWindow with editing controls for the selected button (see screenshot 1). This new RadWindow is Modal and data can be entered and returned back to the calling RadWindow. All this works just fine.

    However, as soon as I click the Button, and before the new RadWindow "grays" out the background, the RadTabStrips reorders the tab rows and now row 1 (bottom row) is now moved to the top row (see screenshot 2).

    If I close the new RadWindow using the "x" close button in the top right (or using my Cancel button on the new RadWindow edit form), the new RadWindow closes and the RadTabStrip rows are now in the wrong order. If I close the new RadWindow using my OK button (which fires a server-side event and PostBack), the RadTabStrip reorders the rows back to where they were (I can see the row 1 that was moved to the top move back down to the bottom where it belongs.

    Here is the RadTabStrip declaration:

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server"
    Align="Justify"
    AutoPostBack="true"
    CausesValidation="false"
    MultiPageID="RadMultiPage1"
    OnClientTabSelecting="NeedToShowValidationSummary"
    ReorderTabsOnSelect="true"
    SelectedIndex="0"
    ShowBaseLine="false"
    ValidationGroup="valGroup"
    Width="100%">
    <Tabs>
    <telerik:RadTab Text="General" />
    <telerik:RadTab Text="Address" />
    <telerik:RadTab Text="Telephones" />
    <telerik:RadTab Text="Organization" />
    <telerik:RadTab Text="Member Of" />
    <telerik:RadTab Text="Object" IsBreak="true" />
    <telerik:RadTab Text="Account" />
    <telerik:RadTab Text="Profile" />
    <telerik:RadTab Text="Dial-in" />
    <telerik:RadTab Text="Environment" />
    <telerik:RadTab Text="Sessions" IsBreak="true" />
    <telerik:RadTab Text="Terminal Services Profile" />
    <telerik:RadTab Text="COM+" />
    <telerik:RadTab Text="Remote Control" />
    <telerik:RadTab Text="Additional Info" />
    </Tabs>
    </telerik:RadTabStrip>


    My question is: How do I prevent this behavior or somehow set the order of the RadTabStrip rows?

    Thanks,

    Randall Price
    Senior Developer
    Virginia Tech

  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 22 Jun 2011 Link to this post

    Hello Randall,

    The code that you provided is not enough to reproduce the issue that you encounter. We need more information on how you open the RadWindow for example. Can you please open a support ticket and send us a runnable simple project where we inspect the issue thoroughly and help you out with a suitable solution? 

    Best wishes,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Randall
    Randall avatar
    54 posts
    Member since:
    Jun 2008

    Posted 22 Jun 2011 Link to this post

    Hello Kate,

    Thanks for you response to my issue.

    I was able to resolve this issue by removing the AutoPostBack="true" from the RadTabStrip declaration.

    Thanks,

    Randall Price
    Senior Developer
    Virginia Tech
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 28 Jun 2011 Link to this post

    Hello Randall,

    I am glad you could solve the issue. Please do not hesitate to contact us if you need any assistance with our controls.

    Kind regards,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Clifton
    Clifton avatar
    4 posts
    Member since:
    Nov 2011

    Posted 11 Nov 2011 Link to this post

    Hi,

    I am having the same problem but the cause of the issue is when using ajax and having more than 3? Can you check what could be the problem.

        <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
    </telerik:RadScriptManager>
       <telerik:radtabstrip id="RadTabStrip1" runat="server" Width="801px"
        MultiPageID="RadMultiPage1" Align="Justify" Skin="Vista"
        ReorderTabsOnSelect="True">
            <Tabs>
                <telerik:RadTab Text="One" Selected="True"></telerik:RadTab>
                <telerik:RadTab Text="Two" IsBreak="true" ></telerik:RadTab>
                <telerik:RadTab Text="Three"></telerik:RadTab>
                <telerik:RadTab Text="Four"></telerik:RadTab>
            </Tabs>
        </telerik:radtabstrip>
        <telerik:radmultipage id="RadMultiPage1" Width="599px" Runat="server" CssClass="TabStripLabelsStyle">
             <telerik:RadPageView id="Pageview6" Width="100%" Runat="server">
                <p>Six some more info</p>
            </telerik:RadPageView>
             <telerik:RadPageView id="Pageview3" Width="100%" Runat="server">
                tab brake
                <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
                <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
                <uc1:TestControl ID="TestControl1" runat="server" />
            </telerik:RadPageView>
            <telerik:RadPageView id="Pageview4" Width="100%" Runat="server">
               <p>Four</p>
            </telerik:RadPageView>
            <telerik:RadPageView id="Pageview5" Width="100%" Runat="server">
               <p>Four</p>
            </telerik:RadPageView>
        </telerik:radmultipage>
        <telerik:RadAjaxManager ID="radAjaxManager" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Button1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ListBox1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>


    The page is using a master page.
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 16 Nov 2011 Link to this post

    Hello Clifton,

    I tried to reproduce the issue but I am not quite sure that I fully get your scenario since in your code I do not see where you use RadWindow control. Can you please clarify the issue and the exact moment when the tabs of the RadTabStrip get disordered?  

    Best wishes,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  8. Clifton
    Clifton avatar
    4 posts
    Member since:
    Nov 2011

    Posted 16 Nov 2011 Link to this post

    when I click on button1  The method adds the current datetime to to listbox1. When that happens if the select row is at the bottom than it goes to the top.
  9. Randall
    Randall avatar
    54 posts
    Member since:
    Jun 2008

    Posted 16 Nov 2011 Link to this post

    Hello Clifton,

    In my case, I had to set the AutoPostBack="false" to prevent the RadTabStrip from reordering the tabs.  I do not see that in your code so give that a try.

    I also have the RadTabStrip and RadMultiPage controls defined in RadAjaxManager as so:

    <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
            <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
        </UpdatedControls>
    </telerik:AjaxSetting>

    Thanks,

    Randall Price
    Senior Developer
    Virginia Tech

  10. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 Nov 2011 Link to this post

    Hello Clifton,

    I tested the described scenario with the markup below but still can not get the behavior. Can you please clarify the version of the controls that you are using (I used the 2011.3.1115.35)? Please try to upgrade to the latest version of the controls and see if you still encounter the problematic behavior.
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
            Align="Justify" Skin="Vista" ReorderTabsOnSelect="True">
            <Tabs>
                <telerik:RadTab Text="One" Selected="True">
                </telerik:RadTab>
                <telerik:RadTab Text="Two" IsBreak="true">
                </telerik:RadTab>
                <telerik:RadTab Text="Three">
                </telerik:RadTab>
                <telerik:RadTab Text="Four">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" Width="599px" runat="server" CssClass="TabStripLabelsStyle">
            <telerik:RadPageView ID="Pageview6" Width="100%" runat="server">
                <p>
                    Six some more info</p>
            </telerik:RadPageView>
            <telerik:RadPageView ID="Pageview3" Width="100%" runat="server">
                tab brake
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
            </telerik:RadPageView>
            <telerik:RadPageView ID="Pageview4" Width="100%" runat="server">
                <p>
                    Four</p>
            </telerik:RadPageView>
            <telerik:RadPageView ID="Pageview5" Width="100%" runat="server">
                <p>
                    Four</p>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
        <telerik:RadAjaxManager ID="radAjaxManager" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Button1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ListBox1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

    Greetings,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017