This is a migrated thread and some comments may be shown as answers.

TabTemplate with Custom CSS Classes

2 Answers 56 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
IT Orders
Top achievements
Rank 1
IT Orders asked on 28 Jun 2013, 06:05 PM
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:

<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>

2 Answers, 1 is accepted

Sort by
0
IT Orders
Top achievements
Rank 1
answered on 28 Jun 2013, 06:52 PM
Nevermind, I figured out the problem!
0
Steven
Top achievements
Rank 1
answered on 23 Jul 2014, 05:20 AM
I'm intrigued... So what did you do Mike?! Care to share?
Tags
TabStrip
Asked by
IT Orders
Top achievements
Rank 1
Answers by
IT Orders
Top achievements
Rank 1
Steven
Top achievements
Rank 1
Share this question
or