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.
9 Answers, 1 is accepted
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
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
(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.
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
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.
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
- 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.
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