While working on another Sitefinity project – and yes, it’s safe to say that we have fallen in love with the product – our lead developer here came up with a nifty method for implementing a graphical navigation approach to a Telerik RadTabStip control.

As you may well be aware of, applying a background image (instead of showing plain text) to this control is problematic as there are no unique class or ID values assigned to the navigational items – they product only generic ones for normal, selected and hover states, and probably a few extra ones as well! In the past, I’ve been forced to use a JavaScript function that basically adds class or ID values to each item I wish to attach a background image to. Not only is this an ugly hack, but it fails for users who are viewing the site with non-JavaScript friendly devices.

The solution? Using the data that is generated by the RadTabStrip control itself. Here’s what our lead developer came up with:

    ''' <summary>
    ''' Adding a custom class to each tab ("a" tag) so we can style the background image for each.
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Protected Sub tsNav_TabCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTabStripEventArgs) Handles tsNav.TabCreated
        e.Tab.CssClass = e.Tab.CssClass & "tab" & e.Tab.ID
    End Sub

By running this, it will append a class of “tab”, plus the current index (number) of each tab. For example, with the site I am currently working on, it renders this:

<ul class="rtsUL">
<li class="rtsLI rtsFirst"><a class="rtsLink tabi0" href="../../AboutTheInstitute.aspx"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">About the Institute</span></span></span></a></li>
<li class="rtsLI"><a class="rtsLink tabi1" href="../../WellbeingInCanada.aspx"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">Wellbeing in Canada</span></span></span></a></li>
<li class="rtsLI"><a class="rtsLink tabi2" href="../../TheCanadianIndexOfWellbeing.aspx"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">The Canadian Index of Wellbeing</span></span></span></a></li>

<li class="rtsLI"><a class="rtsLink tabi3" href="../../WellbeingAroundTheWorld.aspx"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">Wellbeing Around the World</span></span></span></a></li>
<li class="rtsLI"><a class="rtsLink tabi4" href="../../GetInvolved.aspx"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">Get Involved</span></span></span></a></li>
<li class="rtsLI"><a class="rtsLink tabi5" href="../../ResourcesAndDiscussion.aspx"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">Resources & Discussion</span></span></span></a></li>
<li class="rtsLI rtsLast"><a class="rtsLink tabi6" href="../../Media.aspx"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">Media</span></span></span></a></li>
</ul>

Notice the class attribute “rtsLink tabi1” and so on. A perfect and easy solution to implement.