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

Scroll buttons do not appear until new tab loaded

9 Answers 161 Views

TabStrip

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

9 Answers, 1 is accepted

answered on 25 Jan 2011, 04:31 PM

WF-Tab-Scrolling-Error.png

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.

answered on 26 Jan 2011, 03:17 PM

(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.

Double-click on a row of the table to open the window.
Resize the window narrower. The tabs on the right will completely DISAPPEAR! No scroll buttons are shown.
Click on one of the remaining tabs. The missing tabs will reappear, and scroll buttons are now shown.
Resize the window wider until there is room for all the tabs. The scroll buttons will not go away.
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.

Refresh the page and double-click again.
Narrow the window until one or two tabs disappear, and click a tab to show the scroll buttons.
Scroll until the last tab is visible.
Widen the window again. Note that the tabs hidden on the left do not reappear while you are doing this.
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.
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.

answered on 31 Jan 2011, 04:55 PM

TabstripWindow.zip

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

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.

answered on 31 Jan 2011, 09:12 PM

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.

Accepted

answered on 01 Feb 2011, 12:18 PM

TabStripScrolling.zip

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

answered on 01 Feb 2011, 03:55 PM

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

Double-click to open the window
Narrow the window (the scrollbar buttons now appear properly).
Widen the window until there is room for all the tabs (the scrollbar buttons now disappear properly)
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.