I currently have a TabStrip working with two tabs. We want the tabs to use the bootstrap theme so I adjusted the CSS to work with the HTML structure the TabStrip uses. That combined with custom css classes produced the desired result. The .NET looks like this:
We now have a requirement that we need to display a new badge next to the tab name. (So the text would essentially say "Messages New!" with new being a bootstrap badge). This would be accomplished by sticking this HTML right next to the name of both tabs:
The only way I've seen to do this is to use a TabTemplate as follows. However, it appears that in using a tab template all of the CssClass and SelectedCssClass properties of the tabs have no meaning and are not used. I need those classes to make my CSS work. Can anyone shed any light on this? How can I apply those classes to the TabTemplate or is there another way that I can insert the HTML I need into the tabname?
<
telerik:RadTabStrip
runat
=
"server"
ID
=
"rtsCommunicationTabs"
MultiPageID
=
"rmpCommunicationsMultiPage"
EnableEmbeddedSkins
=
"false"
Skin
=
""
ShowBaseLine
=
"True"
SelectedIndex
=
"0"
style
=
"margin: 10px 0;"
>
<
Tabs
>
<
telerik:RadTab
Text
=
"Messages"
CssClass
=
"subtab"
SelectedCssClass
=
"active"
DisabledCssClass
=
"disabled"
></
telerik:RadTab
>
<
telerik:RadTab
Text
=
"Files"
CssClass
=
"subtab"
SelectedCssClass
=
"active"
DisabledCssClass
=
"disabled"
></
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
We now have a requirement that we need to display a new badge next to the tab name. (So the text would essentially say "Messages New!" with new being a bootstrap badge). This would be accomplished by sticking this HTML right next to the name of both tabs:
<
asp:Label
ID
=
"lblNew"
runat
=
"server"
Visible
=
"false"
CssClass
=
"new-badge"
>New!</
asp:Label
>
The only way I've seen to do this is to use a TabTemplate as follows. However, it appears that in using a tab template all of the CssClass and SelectedCssClass properties of the tabs have no meaning and are not used. I need those classes to make my CSS work. Can anyone shed any light on this? How can I apply those classes to the TabTemplate or is there another way that I can insert the HTML I need into the tabname?
<
TabTemplate
>
<
asp:Label
runat
=
"server"
ID
=
"lbl"
Text='<%# DataBinder.Eval(Container, "Text") %>'> </
asp:Label
>
<
asp:Label
ID
=
"lblNew"
runat
=
"server"
Visible
=
"false"
CssClass
=
"new-badge"
>New!</
asp:Label
>
</
TabTemplate
>