Styling the selected tab.

2 posts, 0 answers
  1. Robert
    Robert avatar
    12 posts
    Member since:
    May 2013

    Posted 23 Jul 2013 Link to this post

    Hi 

    My web page uses a radtabstrip with webblue skin. I want to have a separate styling such as bold and text color and background for the currently selected tab. I need some help to tackle this.
    Thankyou
    Robert
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Jul 2013 Link to this post

    Hi Robert,

    Please have a look into the following code I tried which works fine at my end.

    ASPX:
    <telerik:RadTabStrip ID="myTabStrip" runat="server" MultiPageID="RadMultiPage1" Skin="Silk"
        OnClientTabSelected="OnClientTabSelected" OnClientTabUnSelected="OnClientTabUnSelected">
        <Tabs>
            <telerik:RadTab runat="server" Text="Documents" PageViewID="RadPageView1">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Projects" PageViewID="RadPageView2">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>

    JavaScript:
    <script type="text/javascript">
        function OnClientTabSelected(sender, args) {
            //accessing the selected tab and setting css
            args.get_tab().set_cssClass("selected-tab-style");
        }
        function OnClientTabUnSelected(sender, args) {
            //accessing the last selected tab and giving the default styling
            args.get_tab().set_cssClass("unselected-tab-style");
        }
    </script>

    CSS:
    <style type="text/css">
        .selected-tab-style
        {
            font-weight: bold !important;
            color: red !important;
            background-color: Lime !important;
        }
        .unselected-tab-style
        {
            font-weight: inherit !important;
            color: inherit !important;
            background-color: inherit !important;
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top