RadTabStrip Multi-Row reorders tab rows wrong

[Randall]

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

[Kate]

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

[Randall]

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

[Kate]

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

[Clifton]

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.

[Kate]

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

[Clifton]

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.

[Randall]

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

[Kate]

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