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>