Scroll buttons do not appear until new tab loaded

[Tracy Dryden]

I have a radTabStrip inside a radWindow. Scrolling on the tabstrip is set to true. When I resize the radWindow the scroll buttons do not appear or disappear when the window is resized, only when I click a tab and load a new multipage.

Additionally, if you have the tab strip scrolled all the way to the right and click on one of the tabs, the scroller loses track of where things are. It will subsequently scroll too far to the right, but not far enough to the left.

[Kamen Bundev]

Hello Tracy,

We did several improvements to RadTabStrip scrolling in the latest Q3 2010 SP2 of RadControls for ASP.NET AJAX which should help with the problems you're having. Please upgrade and see if that helps.

Greetings,
Kamen Bundev
the Telerik team

[Tracy Dryden]

Since we are using the trial version and still testing, I always stay updated to the latest version. However, there was a new version notice this morning, so I updated again and tried it again. Still the same problems. Attached is an image to show what I mean about scrolling too far to the right.

[Kamen Bundev]

Hi Tracy,

Then I will need a sample project or a live URL in order to determine what is causing this and help you work around it. Can you send one of those?

Regards,
Kamen Bundev
the Telerik team

[Tracy Dryden]

(I found an existing sample project that I could modify to replicate the problem. Just don't tell my boss that I just spent an hour or so modifying a sample project to replicate bugs and then writing this post, or he's going to wonder why I'm spending HIS time helping you debug YOUR code, and why I'm asking him to spend $799 for it.)

The application allows you to replicate the first problem. I can no longer replicate the second problem myself, even in the original application. However I also discovered another bug which can also be replicated with this application. I would attach the application here, but zip files are not allowed. How am I supposed to get it to you? I would open a support ticket, but my 60 days of support on the trial expired yesterday, and I'm leery of asking my boss to spend $799 on something I can't get to work right.

Bug #1: Scroll buttons do not appear or disappear when window (and contained tab strip) are resized until you click on a new tab.

1. Double-click on a row of the table to open the window.
2. Resize the window narrower. The tabs on the right will completely DISAPPEAR! No scroll buttons are shown.
3. Click on one of the remaining tabs. The missing tabs will reappear, and scroll buttons are now shown.
4. Resize the window wider until there is room for all the tabs. The scroll buttons will not go away.
5. Click any one of the tabs and the scroll buttons will disappear. Note however that space for the buttons (most notably the left) is still reserved and will not go away! This is even though the buttons actually appear ON TOP of the tabs.

Bug #2: Mysterious disappearing tabs.

1. Refresh the page and double-click again.
2. Narrow the window until one or two tabs disappear, and click a tab to show the scroll buttons.
3. Scroll until the last tab is visible.
4. Widen the window again. Note that the tabs hidden on the left do not reappear while you are doing this.
5. Click one of the visible tabs. The scroll buttons will disappear, but the tab strip will not redraw! The tabs that were scrolled off the left side of the window have mysteriously DISAPPEARED! Depending on window size, there may even be a partial tab on the left that can be clicked, but that will not show completely.
6. You can get the lost tabs to reappear by again narrowing the window, clicking a tab to make the scroll buttons appear again and scrolling to the left (see, the tabs were still there, you just couldn't see them).

I've also run into times when the left scroll button would not work when it should, but I can't find the steps to replicate that bug.

[Helen]

Hello Tracy,

We tried to reproduce the problems you reported locally - please find our test project attached.
Are you using ContentTemplate together with the RadWindow? If yes please review the "TabStripScrollWindowContentTemplate.aspx" and "TabStripScrollWindowContentTemplateFixed.aspx" pages and try to apply the same in your project - clientResize() javascript function.
If you aren't using ContentTemplate please review the "TabStripScrollWindow.aspx" page. It works at our side.
If your configuration is different could you please modify our test files so we can observe the problem locally?

Regards,
Helen
the Telerik team

[Tracy Dryden]

I'm not using a ContentTemplate, but I am using a radAjaxManager. Would that make a difference? As I said, I have a relatively simple project that clearly exhibits all of the above bugs, but I cannot attach a zip file to this thread. I hate to do this, but I'll do it the hard way:

App_Code/ICountryInfo.vb:

Imports Microsoft.VisualBasic

Public Interface ICountryInfo
    Property Name() As String
End Interface

App_Data/Countries.xml:

<?xml version="1.0" encoding="utf-8" ?>
<countries>
    <country name="United States of America" continent="North America" language="English" capital="Washington D.C." />
    <country name="United Kingdom" continent="Europe" language="English" capital="London" />
    <country name="Canada" continent="North America" language="English/French" capital="Ottawa" />
    <country name="Australia" continent="Australia" language="English" capital="Canberra" />
    <country name="Brazil" continent="South America" language="Portuguese" capital="Brasilia" />
</countries>

Controls/CountryCulture.ascx:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="CountryCulture.ascx.vb" Inherits="Controls_CountryCulture" %>
<br />
<asp:Label ID="Label1" runat="server" Text="DateTime"></asp:Label>
<br />
<asp:Label ID="Label2" runat="server" Text="Culture"></asp:Label>

Controls/CountryCulture.ascx.vb:

Partial Class Controls_CountryCulture
    Inherits System.Web.UI.UserControl
    Implements ICountryInfo

    Private _sName As String = Nothing

    Public Property Name() As String Implements ICountryInfo.Name
        Get
            Return _sName
        End Get
        Set(ByVal value As String)
            _sName = value
        End Set
    End Property

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Label1.Text = "Content dynamically loaded at " & Date.Now.ToString()
        Label2.Text = "This page contains cultural information for " & Name
    End Sub

End Class

CountryGeography.ascx, CountryIndustry.ascx, CountryPolitics.ascx and CountryReligion.ascx and their codebehind files are essentially identical to CountryCulture.ascx and it's codebehind, except for the file/class names.

default.aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" LoadingPanelID="RadLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="WebBlue">
    </telerik:RadSkinManager>
    <div>
        <asp:XmlDataSource ID="XmlDataSource1" runat="server"
            DataFile="~/App_Data/Countries.xml"></asp:XmlDataSource>
        <telerik:RadGrid ID="RadGrid1" runat="server"
            DataSourceID="XmlDataSource1" GridLines="None" Skin="WebBlue">
            <ClientSettings EnableRowHoverStyle="True" EnablePostBackOnRowClick="False">
                <Selecting AllowRowSelect="True" />
                <ClientEvents OnRowClick="onRowClick" />
            </ClientSettings>
            <MasterTableView AutoGenerateColumns="False" DataSourceID="XmlDataSource1" ClientDataKeyNames="name">
                <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
                <RowIndicatorColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>
                <ExpandCollapseColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridBoundColumn DataField="name" HeaderText="name"
                        SortExpression="name" UniqueName="name">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="continent" HeaderText="continent"
                        SortExpression="continent" UniqueName="continent">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="language" HeaderText="language"
                        SortExpression="language" UniqueName="language">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="capital" HeaderText="capital"
                        SortExpression="capital" UniqueName="capital">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </div>
    <telerik:RadWindow ID="RadWindow1" runat="server" Height="500px" Modal="True"
            Skin="WebBlue" Title="Detailed Country Information" VisibleStatusbar="False"
            Width="500px" Behaviors="Resize, Close, Pin, Maximize, Move, Reload" >
        <ContentTemplate>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="WebBlue"
                MinDisplayTime="200" IsSticky="true" Style="position: absolute; top: 0; left: 0;
                height: 100%; width: 100%; z-index: 99999;">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server"
                MultiPageID="RadMultiPage1" SelectedIndex="-1" ClickSelectedTab="True"
                PerTabScrolling="true" ScrollChildren="true" ScrollButtonsPosition="Middle">
            </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="-1" RenderSelectedPageOnly="false">
            </telerik:RadMultiPage>
            <asp:HiddenField ID="hfCountryName" runat="server" Value="" />
        </ContentTemplate>
    </telerik:RadWindow>
    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">

            function onRowClick(sender, args) {
                OpenPopup(args.getDataKeyValue("name"));
            }

            function OpenPopup(sName) {
                // save passed values in form vars so they can be accessed on server side
                $('#<%=hfCountryName.ClientID %>').val(sName);

                // find the window, set the title, open it
                var oRadWin = $find("<%= RadWindow1.ClientID %>");
                oRadWin.set_title("Detailed Information for " + sName);
                oRadWin.show();

                // click the first tab to select it and force it to load
                var oRadTabStrip = $find("<%= RadTabStrip1.ClientID %>");
                oRadTabStrip.get_tabs().getTab(0).click();
            }

        </script>
    </telerik:RadCodeBlock>
    </form>
</body>
</html>

default.aspx.vb:

Imports Telerik.Web.UI

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            AddTab("Geography", "CountryGeography")
            AddTab("Culture", "CountryCulture")
            AddTab("Politics", "CountryPolitics")
            AddTab("Industry", "CountryIndustry")
            AddTab("Religion", "CountryReligion")
        End If
    End Sub

    Private Sub AddTab(ByVal sTabName As String, ByVal sTabControl As String)
        Dim oRadTab As RadTab = New RadTab
        oRadTab.Text = sTabName
        oRadTab.Value = sTabControl
        oRadTab.PageViewID = "rpv" & sTabName
        RadTabStrip1.Tabs.Add(oRadTab)
        Dim oRadPageView As RadPageView = New RadPageView
        oRadPageView.ID = "rpv" & sTabName
        RadMultiPage1.PageViews.Add(oRadPageView)
    End Sub

    Protected Sub RadTabStrip1_TabClick(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTabStripEventArgs) Handles RadTabStrip1.TabClick
        Dim oRadPageView As RadPageView = e.Tab.PageView
        If oRadPageView Is Nothing Then
            oRadPageView = New RadPageView
            oRadPageView.ID = "rpv" & e.Tab.Text
            RadMultiPage1.PageViews.Add(oRadPageView)
            e.Tab.PageViewID = oRadPageView.ID
        Else
            oRadPageView.Controls.Clear()
        End If

        Dim sUserControlName As String = ""
        sUserControlName = "~/Controls/" & e.Tab.Value & ".ascx"
        Dim oUserControl As ICountryInfo = Page.LoadControl(sUserControlName)
        CType(oUserControl, Control).ID = oRadPageView.ID & "_uc" & e.Tab.Value
        oUserControl.Name = hfCountryName.Value
        oRadPageView.Controls.Add(oUserControl)
    End Sub
End Class

This code CLEARLY exhibits all of the bugs indicated above. In fact, it's the project I used to enumerate the steps listed above to reproduce the bugs.

[Helen]

Hello Tracy,

Thank you for the provided code. We examined it locally and actually you are using a ContentTemplate:

<telerik:RadWindow ID="RadWindow1"

    runat="server"

    Height="500px"

    Modal="True"

    Skin="WebBlue"

    Title="Detailed Country Information"

    VisibleStatusbar="False"

    Width="500px"

    Behaviors="Resize, Close, Pin, Maximize, Move, Reload">

    <ContentTemplate>

  ......................


    </ContentTemplate>

</telerik:RadWindow>

Could you please subscribe to the window's OnClientResizeEnd client-side event and execute the following code:

function onResizeEnd()

{
    $find("<%= RadTabStrip1.ClientID %>").repaint();
}

Please find attached the modified project. Does it work at your side?

Kind regards,
Helen
the Telerik team

[Tracy Dryden]

Thanks, that solves MOST of the problems, but there is still a minor bug:

1. Double-click to open the window
2. Narrow the window (the scrollbar buttons now appear properly).
3. Widen the window until there is room for all the tabs (the scrollbar buttons now disappear properly)
4. Click on any one of the tabs - the tab strip jumps to the right to show the space reserved for the left scrollbar button when it is not on top of a tab. Depending on the width of the window, this can result in part of the rightmost tab being cut off. Either way it’s a little disconcerting to have the tab strip jump like that, and it looks bad with the space on the left.

[Helen]

Hi Tracy,

Thank you for the report. I verified the problem and forwarded it to our development team for further investigation.

Your points have been updated for the bug report.

All the best,
Helen
the Telerik team