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

Styling the selected tab.

1 Answer 283 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 23 Jul 2013, 08:34 AM
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

1 Answer, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 23 Jul 2013, 11:08 AM
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.
Tags
TabStrip
Asked by
Robert
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Share this question
or