TabTemplate with Custom CSS Classes

3 posts, 0 answers
  1. IT Orders
    IT Orders avatar
    3 posts
    Member since:
    May 2011

    Posted 28 Jun 2013 Link to this post

    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. IT Orders
    IT Orders avatar
    3 posts
    Member since:
    May 2011

    Posted 28 Jun 2013 Link to this post

    Nevermind, I figured out the problem!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steven
    Steven avatar
    4 posts
    Member since:
    May 2013

    Posted 23 Jul 2014 in reply to IT Orders Link to this post

    I'm intrigued... So what did you do Mike?! Care to share?
Back to Top