Specifying Look for a Dynamic TabStrip

[Chris Lewis]

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]

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