We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Specifying Look for a Dynamic TabStrip

Thread ID:

Created:

Updated:

Platform:

Replies:

96522 Sep 17,2010 08:28 PM UTC Sep 20,2010 12:29 PM UTC ASP.NET Web Forms (Classic) 1
loading
Tags: Tools
Chris Lewis
Asked On September 17, 2010 08:28 PM UTC


I am creating a tab strip control completely dynamically at runtime. How do you add the LOOK elements to the control to specify default and hover states? Everything is completely dynamic since I am wrapping the control in my own server control.


Varalakshmi R.S [Syncfusion]
Replied On September 20, 2010 12:29 PM UTC

Hi Chris,

Thank you for your interest in Syncfusion products.

The default and hover styles for the TabStrip can be added dynamically by using the css classes.
Please refer the below code snippet to achieve this.

[C#]
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
TabStrip1 = New Syncfusion.Web.UI.WebControls.Tools.TabStrip()
TabStrip1.TabLayout = TabLayout.Horizontal
TabStrip1.CustomCSS = "css/Tab_StdDesign.css"

Dim lookcommon As TabStripItemLook = New TabStripItemLook()
lookcommon.ID = "lookcommon"

lookcommon.StateDataDefault.ItemCSSClass = "DefaultTab"
lookcommon.StateDataDefault.LeftImageCellCSSClass = "DefaultTabImageCell"
lookcommon.StateDataDefault.LeftImageContainerCSSClass = "DefaultTabImageCell"
lookcommon.StateDataDefault.LeftImageCSSClass = "DefaultTabImageCell"
lookcommon.StateDataDefault.TextCellCSSClass = "TabTextCell"
lookcommon.StateDataDefault.TextContainerCSSClass = "TabTextContainer"
lookcommon.StateDataDefault.RightImageCellCSSClass = "DefaultTabImageCell"
lookcommon.StateDataDefault.RightImageContainerCSSClass = "DefaultTabImageCell"
lookcommon.StateDataDefault.RightImageCSSClass = "DefaultTabImageCell"
lookcommon.StateDataDefault.LeftImageURL = "LeftIcon.gif"
lookcommon.StateDataDefault.RightImageURL = "RightIcon.gif"

lookcommon.StateDataHover.ItemCSSClass = "DefaultTab"
lookcommon.StateDataHover.LeftImageCellCSSClass = "DefaultTabImageCell"
lookcommon.StateDataHover.LeftImageContainerCSSClass = "DefaultTabImageCell"
lookcommon.StateDataHover.LeftImageCSSClass = "DefaultTabImageCell"
lookcommon.StateDataHover.RightImageCellCSSClass = "DefaultTabImageCell"
lookcommon.StateDataHover.RightImageContainerCSSClass = "DefaultTabImageCell"
lookcommon.StateDataHover.RightImageCSSClass = "DefaultTabImageCell"
lookcommon.StateDataHover.TextCellCSSClass = "TabTextCell"
lookcommon.StateDataHover.TextContainerCSSClass = "TabHoverTextContainer"
lookcommon.StateDataHover.LeftImageURL = "LeftIcon.gif"
lookcommon.StateDataHover.RightImageURL = "RightIcon.gif"

lookcommon.StateDataPushed.ItemCSSClass = "DefaultTabPushed"
lookcommon.StateDataPushed.LeftImageCellCSSClass = "DefaultPushedTabImageCell"
lookcommon.StateDataPushed.LeftImageContainerCSSClass = "DefaultPushedTabImageCell"
lookcommon.StateDataPushed.LeftImageCSSClass = "DefaultPushedTabImageCell"
lookcommon.StateDataPushed.RightImageCellCSSClass = "DefaultPushedTabImageCell"
lookcommon.StateDataPushed.RightImageContainerCSSClass = "DefaultPushedTabImageCell"
lookcommon.StateDataPushed.RightImageCSSClass = "DefaultPushedTabImageCell"
lookcommon.StateDataPushed.TextCellCSSClass = "DefaultTabPushedTextCell"
lookcommon.StateDataPushed.TextContainerCSSClass = "DefaultTabPushedTextContainer"
lookcommon.StateDataPushed.LeftImageURL = "SelectedLeftIcon.gif"
lookcommon.StateDataPushed.RightImageURL = "SelectedRightIcon.gif"


TabStrip1.Looks.Add(lookcommon)

TabStrip1.ControlRootCSSClass = ""
TabStrip1.ChildItemsPosition = TabChildItemsPosition.Bottom
TabStrip1.ChildLayout = TabLayout.Horizontal

Dim Home As TabStripItem = New TabStripItem()
Home.ID = "Home"
Home.Text = "Home"
Home.Look = "lookcommon"
Home.Selected = True

Dim Livedemo As TabStripItem = New TabStripItem()
Livedemo.ID = "LiveDemo"
Livedemo.Text = "Live Demo"
Livedemo.Look = "lookcommon"


Dim Document As TabStripItem = New TabStripItem()
Document.ID = "Documentation"
Document.Text = "Documentation"
Document.Look = "lookcommon"

Dim Purchase As TabStripItem = New TabStripItem()
Purchase.ID = "Purchase"
Purchase.Text = "Purchase"
Purchase.Look = "lookcommon"

Dim Support1 As TabStripItem = New TabStripItem()
Support1.ID = "Support1"
Support1.Text = "Support"
Support1.Look = "lookcommon"

TabStrip1.Items.Add(Home)
TabStrip1.Items.Add(Livedemo)
TabStrip1.Items.Add(Document)
TabStrip1.Items.Add(Purchase)
TabStrip1.Items.Add(Support1)

PlaceHolder1.Controls.Add(TabStrip1)
End Sub
[css]
.TopTabGroup
{
background-color:Transparent;
position:relative;
}

.DefaultTab
{
height:22px;
cursor:default;
}

.DefaultTabImageCell
{
width:15px;
height:22px;
}

.TabTextCell
{
height:20px;
background-image:url('../image/Itembg.png');
background-repeat:repeat-x;

padding-top:2px;
*padding-top:3px;
padding-left:7px;
padding-right:7px;
}

.TabTextContainer
{
color:Black;
font-family:Verdana , MS Sans Serif;
font-size:11px;
cursor:default;
height:20px;
}

.TabHoverTextContainer
{
color:White;
font-family:Verdana , MS Sans Serif;
font-size:11px;
cursor:default;
height:20px;
}
.DefaultTabPushed
{
height:22px;
cursor:default;
}

.DefaultTabPushedTextCell
{
height:20px;
background-image:url('../image/Selectedbg.gif');
background-repeat:repeat-x;

padding-top:2px;
*padding-top:3px;
padding-left:7px;
padding-right:7px;
padding-bottom:0px;

}

.DefaultTabPushedTextContainer
{
color:Black;
font-family:Verdana , MS Sans Serif;
font-size:11px;
cursor:default;
height:20px;
}

.DefaultPushedTabImageCell
{
width:15px;
height:22px;
}

Please refer the following documentation link to know more about adding the LOOK elements to the control to specify default and hover states dynamically.
http://help.syncfusion.com/ug_83/User%20Interface/ASP.NET/Tools/Documents/throughcode11.htm


Please let me know if any concerns.

Regards,
Varalakshmi.R.S



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;