move the CSS from a anchor to li anchor in UI for ASP.NET AJAX TabStrip

stevied

37 posts

Member since:
Apr 2007

Posted 23 Jul 2009 Link to this post

I have the following code

    
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" 
        
                            Skin="" EnableEmbeddedSkins="False"> 
        
                            <Tabs> 
        
                                <telerik:RadTab runat="server" SelectedIndex="0"  
        
                                    Text="cbfootball.co.uk" CssClass="cbTab"  SelectedCssClass="cbSelected" 
        
                                    HoveredCssClass="cbHovered" ChildGroupCssClass="cbChildTab"  
        
                                    NavigateUrl="~/default.aspx"> 
        
                                    <Tabs> 
        
                                        <telerik:RadTab runat="server" Text="Home" CssClass="first" NavigateUrl="~/default.aspx" /> 
        
                                        <telerik:RadTab runat="server" Text="News" NavigateUrl="~/news.aspx" /> 
        
                                        <telerik:RadTab runat="server" Text="Community" /> 
        
                                        <telerik:RadTab runat="server" Text="Awards" /> 
        
                                        <telerik:RadTab runat="server" Text="Competitions" /> 
        
                                        <telerik:RadTab runat="server" Text="Activity" /> 
        
                                        <telerik:RadTab runat="server" Text="Predictions" /> 
        
                                        <telerik:RadTab runat="server" Text="Under 19s" /> 
        
                                        <telerik:RadTab runat="server" Text="Charity" /> 
        
                                        <telerik:RadTab runat="server" Text="Contact" CssClass="tabLast" NavigateUrl="~/contact_cbfootball.aspx" /> 
        
                                   </Tabs> 
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab runat="server" Text="Score Selector" 
        
                                    Width="240px" CssClass="ssTab" SelectedCssClass="ssSelected" SelectedIndex="0" 
        
                                    HoveredCssClass="ssHovered" ChildGroupCssClass="ssChildTab"  
        
                                    NavigateUrl="~/score_selector/Default.aspx"> 
        
                                    <Tabs> 
        
                                        <telerik:RadTab runat="server" Text="Home" CssClass="first" NavigateUrl="~/score_selector/Default.aspx" /> 
        
                                        <telerik:RadTab runat="server" Text="Make Predictions"  NavigateUrl="~/score_selector/makepredictions.aspx" /> 
        
                                        <telerik:RadTab runat="server" Text="My Results" /> 
        
                                        <telerik:RadTab runat="server" Text="Mini Leagues" /> 
        
                                        <telerik:RadTab runat="server" Text="Create Leagues" /> 
        
                                        <telerik:RadTab runat="server" Text="Invite Friend" /> 
        
                                        <telerik:RadTab runat="server" Text="Prizes" /> 
        
                                        <telerik:RadTab runat

Whihc produces HTML like this...

    
            <div id="tabNav"> 
        
                        <div id="ctl00_mainNav1_RadTabStrip1" class="RadTabStrip RadTabStrip_ RadTabStripTop_ "> 
        
                <!-- 2008.3.1314.35 --><div class="rtsLevel rtsLevel1"> 
        
                    <ul class="rtsUL"><li class="rtsLI rtsFirst"><a class="rtsLink cbTab rtsSelected cbSelected" href="default.aspx"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">cbfootball.co.uk</span></span></span></a></li><li class="rtsLI rtsLast" style="width:240px;"><a class="rtsLink rtsAfter ssTab" href="score_selector/Default.aspx"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">Score Selector</span></span></span></a></li></ul>

As you can see i have two main tabs which are identified in the a anchor (cbTab and ssTab) Is there a way to move these identifers to the li or indeed the ul as I am using sIFR for my menu headers which does NOT like a anchors which is giving me an click error in IE7 & 8, hopes this makes sense.

Regards,

Stevied

Alex Gyoshev

Admin

2527 posts

Posted 24 Jul 2009 Link to this post

Hello Stephen,

It does make sense!

Unfortunately, we don't have a property to change the CssClass of the wrapping element. Such a feature makes sense and I'll make sure to implement it next week. If time is of critical importance, you can move the classes using the following jQuery snippet:

$telerik.$('#<%= RadTabStrip1.ClientID %> .rtsLink').each (function () {
    var customCssClass = this.parentNode._item.get_cssClass();
    if (customCssClass !== "") {
        $telerik.$(this.parentNode).addClass(customCssClass);
        this.parentNode._item.set_cssClass("");
    }
});

// init sIFR

Greetings,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

stevied

37 posts

Member since:
Apr 2007

Posted 24 Jul 2009 Link to this post

thanks for the great feedback, as a work around i removed the sIFR and used a text image instead which with a little tweaking works well.

Once this update comes out i can update and revert back to the sIFR text.

Regards,

Stevied

Rutger Buijzen

21 posts

Member since:
Nov 2006

Posted 25 Jan 2010 Link to this post

Hi Alex,

Has this feature been implemented in the latest release? And if so, what's the properrty name and will it work with the DNN SkinObject?

Thanks!

Rutger

Kamen Bundev

Admin

1532 posts

Posted 26 Jan 2010 Link to this post

Hello Rutger,

This attribute was added in release 2009.2 826 (Q2 SP1) under the name of OuterCssClass.

Sincerely yours,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

Rutger Buijzen

21 posts

Member since:
Nov 2006

Posted 26 Jan 2010 Link to this post

Thanks!

Rutger Buijzen

21 posts

Member since:
Nov 2006

Posted 29 Jan 2010 Link to this post

Seems that the RadTabStrip DotNetNuke SkinObject does not react to this property?

Dimitar Milushev

Admin

555 posts

Posted 01 Feb 2010 Link to this post

Hello Rutger,

You should set this property directly to the TabStrip definition in RadTabStrip.ascx.

Sincerely yours,
Dimitar Milushev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.