Hi,
In my application i wanted to use tabstrip with ten tabs. Once i appplied ScrollChildern="True".
1.Tab Scrolling is not working in Firefox/Google Crome
2. In Internet explorer i can see scrolling buttons but if i reach at 5th tab and if i hit button(Basically when page post back) Scrolling reverse button get disable.
I am attaching screenshots and code block. Let me know what i m doing wrong.
Thanks,
In my application i wanted to use tabstrip with ten tabs. Once i appplied ScrollChildern="True".
1.Tab Scrolling is not working in Firefox/Google Crome
2. In Internet explorer i can see scrolling buttons but if i reach at 5th tab and if i hit button(Basically when page post back) Scrolling reverse button get disable.
I am attaching screenshots and code block. Let me know what i m doing wrong.
Thanks,
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabStripScrollTest.aspx.cs" Inherits="RadControlsWebApp1.TabStripScrollTrest" %>
<!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
>TabStrip Scroll Test</
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
div
>
<
telerik:RadScriptManager
runat
=
"server"
ID
=
"RadGridScriptManager"
>
</
telerik:RadScriptManager
>
<
table
width
=
"100%"
cellpadding
=
"0px"
border
=
"1"
>
<
tr
>
<!-- Left Content Start-->
<
td
valign
=
"top"
align
=
"center"
style
=
"width:20%;border:1px solid #EEE;color:#666;"
>
<
div
id
=
"leftdiv"
class
=
"leftdivtitle"
>
</
div
>
Left Contents goes here
</
td
>
<!-- Left Content End -->
<!-- Right Content Start -->
<
td
valign
=
"top"
style
=
"width:20%;color:#EEE;"
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"pnlTab"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"radBtnBack"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"radBtnSkip"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"radBtnNext"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"radBtnFinish"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"radBtnBack"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"pnlTab"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"radBtnSkip"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"pnlTab"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"radBtnBack"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"radBtnSave"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"pnlTab"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"pnlViewAgreement"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"radBtnNext"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"pnlTab"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
asp:Panel
runat
=
"server"
ID
=
"pnlRightContent"
Height
=
"600px"
ScrollBars
=
"Auto"
Style
=
"position: relative;"
>
<
asp:Panel
runat
=
"server"
ID
=
"pnlTab"
>
<
asp:HiddenField
ID
=
"previousTabHidden"
runat
=
"Server"
/>
<
telerik:RadTabStrip
ID
=
"radTabStripCompanyRegistration"
runat
=
"server"
MultiPageID
=
"radMultiPageCompanyRegistration"
AutoPostBack
=
"true"
SelectedIndex
=
"0"
ScrollChildren
=
"True"
Skin
=
"WebBlue"
>
<
Tabs
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Company Info"
PageViewID
=
"radPageViewCompanyInfo"
Font-Bold
=
"True"
Selected
=
"True"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Addresses"
PageViewID
=
"radPageViewAddresses"
Font-Bold
=
"True"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Contacts"
PageViewID
=
"radPageViewContacts"
Font-Bold
=
"True"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Company Details"
PageViewID
=
"radPageViewCompanyDetails"
Font-Bold
=
"True"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Operating Areas"
PageViewID
=
"radPageViewOperatingAreas"
Font-Bold
=
"True"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Credit Details"
PageViewID
=
"radPageViewCreditDetails"
Font-Bold
=
"True"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Agreement"
PageViewID
=
"radPageViewAgreement"
Font-Bold
=
"True"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Insurance"
PageViewID
=
"radPageViewInsurance"
Font-Bold
=
"True"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Summary"
PageViewID
=
"radPageViewSummary"
Font-Bold
=
"True"
>
</
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
<
telerik:RadMultiPage
runat
=
"server"
ID
=
"radMultiPageCompanyRegistration"
SelectedIndex
=
"0"
Width
=
"100%"
>
<!-- Company Info Tab Start-->
<
telerik:RadPageView
runat
=
"server"
ID
=
"radPageViewCompanyInfo"
BorderColor
=
"#666666"
BorderWidth
=
"1px"
Height
=
"500px"
Selected
=
"true"
>
<
asp:Panel
runat
=
"server"
ID
=
"pnlCompanyInfo"
CssClass
=
"companyregpanel"
>
<%-- <
uc1:CompanyInfo
ID
=
"CompanyInfo"
runat
=
"server"
/>--%>
</
asp:Panel
>
</
telerik:RadPageView
>
<!-- Company Info Tab End-->
<!-- Addresses Tab Start -->
<
telerik:RadPageView
runat
=
"server"
ID
=
"radPageViewAddresses"
BorderColor
=
"#666666"
BorderWidth
=
"1px"
Height
=
"500px"
>
<
asp:Panel
runat
=
"server"
ID
=
"pnlAddresses"
CssClass
=
"companyregpanel"
>
<%--<
uc2:addresses
id
=
"Addresses"
runat
=
"server"
/>--%>
</
asp:Panel
>
</
telerik:RadPageView
>
<!-- Addresses Tab End -->
<!-- Contact Tab Start -->
<
telerik:RadPageView
runat
=
"server"
ID
=
"radPageViewContacts"
BorderColor
=
"#666666"
BorderWidth
=
"1px"
Height
=
"500px"
>
<
asp:Panel
runat
=
"server"
ID
=
"pnlContacts"
CssClass
=
"companyregpanel"
>
<%--<
uc3:contacts
id
=
"Contacts1"
runat
=
"server"
/>--%>
</
asp:Panel
>
</
telerik:RadPageView
>
<!-- Contact Tab End -->
<!-- Company Details Tab Start -->
<
telerik:RadPageView
runat
=
"server"
ID
=
"radPageViewCompanyDetails"
BorderColor
=
"#666666"
BorderWidth
=
"1px"
Height
=
"500px"
>
<
asp:Panel
runat
=
"server"
ID
=
"pnlCompanyDetails"
CssClass
=
"companyregpanel"
>
<%-- <
uc4:companydetails
id
=
"CompanyDetails1"
runat
=
"server"
/>--%>
</
asp:Panel
>
</
telerik:RadPageView
>
<!-- Company Details Tab End -->
<!-- Operating Ares Tab Start -->
<
telerik:RadPageView
runat
=
"server"
ID
=
"radPageViewOperatingAreas"
BorderColor
=
"#666666"
BorderWidth
=
"1px"
Height
=
"500px"
>
<
asp:Panel
runat
=
"server"
ID
=
"pnlOperatingAreas"
CssClass
=
"companyregpanel"
>
<%-- <
uc5:operatingareas
id
=
"OperatingAreas1"
runat
=
"server"
/>--%>
</
asp:Panel
>
</
telerik:RadPageView
>
<!-- Operating Ares Tab End -->
<!-- Credit Details Tab Start -->
<
telerik:RadPageView
runat
=
"server"
ID
=
"radPageViewCreditDetails"
BorderColor
=
"#666666"
BorderWidth
=
"1px"
Height
=
"500px"
>
<
asp:Panel
runat
=
"server"
ID
=
"pnlCreditDetails"
CssClass
=
"companyregpanel"
>
<%-- <
uc6:creditdetails
id
=
"CreditDetails1"
runat
=
"server"
/>--%>
</
asp:Panel
>
</
telerik:RadPageView
>
<!-- Credit Details Tab End -->
<!-- Agreement Tab Start -->
<
telerik:RadPageView
runat
=
"server"
ID
=
"radPageViewAgreement"
BorderColor
=
"#666666"
BorderWidth
=
"1px"
Height
=
"500px"
>
<
asp:Panel
runat
=
"server"
ID
=
"pnlViewAgreement"
CssClass
=
"companyregpanel"
>
<%-- <
uc7:agreement
id
=
"Agreement1"
runat
=
"server"
></
uc7:agreement
>--%>
</
asp:Panel
>
</
telerik:RadPageView
>
<!-- Agreement Tab End -->
<!-- Insurance Tab Start -->
<
telerik:RadPageView
runat
=
"server"
ID
=
"radPageViewInsurance"
BorderColor
=
"#666666"
BorderWidth
=
"1px"
Height
=
"500px"
>
<
asp:Panel
runat
=
"server"
ID
=
"pnlInsurance"
CssClass
=
"companyregpanel"
>
<%-- <
uc8:insurance
id
=
"Insurance1"
runat
=
"server"
></
uc8:insurance
>--%>
</
asp:Panel
>
</
telerik:RadPageView
>
<!-- Insurance Tab End -->
<!-- View Summary Tab Start -->
<
telerik:RadPageView
runat
=
"server"
ID
=
"radPageViewSummary"
BorderColor
=
"#666666"
BorderWidth
=
"1px"
Height
=
"500px"
>
<
asp:Panel
runat
=
"server"
ID
=
"pnlSummary"
CssClass
=
"companyregpanel"
Height
=
"460px"
ScrollBars
=
"Vertical"
>
<%-- <
uc9:summary
id
=
"Summary1"
runat
=
"server"
></
uc9:summary
>--%>
</
asp:Panel
>
</
telerik:RadPageView
>
<!-- View Summary Tab End -->
</
telerik:RadMultiPage
>
</
asp:Panel
>
<
hr
style
=
"color: #333; clear: both;"
/>
<
table
>
<
tr
>
<
td
align
=
"center"
>
<
telerik:RadButton
ID
=
"radBtnComment"
runat
=
"server"
Text
=
"View/Add Comments"
ButtonType
=
"LinkButton"
AutoPostBack
=
"False"
BackColor
=
"White"
BorderColor
=
"White"
UseSubmitBehavior
=
"false"
ForeColor
=
"#5b7993"
>
</
telerik:RadButton
>
</
td
>
<
td
>
</
td
>
<
td
>
<
telerik:RadButton
ID
=
"radBtnBack"
runat
=
"server"
Text
=
"Back"
Width
=
"50px"
Visible
=
"false"
>
</
telerik:RadButton
>
</
td
>
<
td
>
</
td
>
<
td
>
<
telerik:RadButton
ID
=
"radBtnSkip"
runat
=
"server"
Text
=
"Skip"
Width
=
"50px"
>
</
telerik:RadButton
>
</
td
>
<
td
>
</
td
>
<
td
>
<
telerik:RadButton
ID
=
"radBtnSave"
runat
=
"server"
Text
=
"Validate"
Width
=
"50px"
>
</
telerik:RadButton
>
</
td
>
<
td
>
</
td
>
<
td
>
<
telerik:RadButton
ID
=
"radBtnNext"
runat
=
"server"
Text
=
"Next"
Width
=
"50px"
UseSubmitBehavior
=
"False"
>
</
telerik:RadButton
>
</
td
>
<
td
>
</
td
>
<
td
>
<
telerik:RadButton
ID
=
"radBtnFinish"
runat
=
"server"
Text
=
"Finish"
Width
=
"50px"
UseSubmitBehavior
=
"False"
Visible
=
"False"
>
</
telerik:RadButton
>
</
td
>
<
td
>
<
asp:HiddenField
ID
=
"hdnCompanyId"
runat
=
"server"
Value
=
"0"
/>
</
td
>
</
tr
>
</
table
>
<
div
id
=
"CompRegDiv"
class
=
"bigModule"
visible
=
"false"
runat
=
"server"
>
<
table
id
=
"tblError"
runat
=
"server"
visible
=
"true"
>
<
tr
>
<
td
colspan
=
"5"
>
<
div
class
=
"bigModuleBottom"
>
<
asp:Label
ID
=
"lblWarning"
runat
=
"server"
Text
=
""
CssClass
=
"requiredsign"
></
asp:Label
>
</
div
>
</
td
>
</
tr
>
</
table
>
</
div
>
</
asp:Panel
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel1"
runat
=
"server"
>
</
telerik:RadAjaxLoadingPanel
>
<
telerik:RadWindowManager
ID
=
"RadWindowManager1"
runat
=
"server"
EnableShadow
=
"true"
>
<
Windows
>
<
telerik:RadWindow
ID
=
"CompanyCommentWindow"
runat
=
"server"
Title
=
"Company Comments"
Width
=
"765"
Height
=
"500"
Behaviors
=
"close"
/>
</
Windows
>
</
telerik:RadWindowManager
>
</
td
>
<!-- Right Content End -->
</
tr
>
</
table
>
</
div
>
</
form
>
</
body
>
</
html
>