+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Adding unique classes to navigation

Adding unique classes to navigation

10 posts, 0 answered
  1. Darren
    Darren avatar
    15 posts
    Registered:
    06 Oct 2010
    01 Dec 2010
    Link to this post
    Hi

    I am new to Sitefinity. I have added the SiteTabstrip to show the main navigation, but I need each item in the navigation to have either a unique class or id. How would this be done as by default they all have the same class.

    Thanks
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    01 Dec 2010
    Link to this post
    Hello Darren,

    Each RadTab of the RadTabStip control has the following properties

    • CssClass
    • SelectedCssClass
    • DisabledCssClass
    That you can use. You can set the CssClass in RadTabstrip1.DataBound where you have access to the tab from the argument or inside PageLoad after the control is bound to its datasource - RadTabStrip1.DataBind();
    Sincerely yours,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Darren
    Darren avatar
    15 posts
    Registered:
    06 Oct 2010
    01 Dec 2010
    Link to this post
    I have looked through your site on how to alter the properties in the RadTabStrip control. They say add the RadTabStrip to the page and then click "Show Smart Tag". I don't see this tag anywhere. All I have on the page is a  Edit and Delete link. If I click Edit I get a properties popup but nothinf like what is shown on this page:

    http://www.telerik.com/help/aspnet-ajax/tab_gettingstarted.html

    Any ideas on what I am doing wrong?

    Thanks
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    01 Dec 2010
    Link to this post
    Hello Darren,

    You need to use VS design time and you should have Telerik.Web.Desing.dll in your bin folder.

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Darren
    Darren avatar
    15 posts
    Registered:
    06 Oct 2010
    01 Dec 2010
    Link to this post
    I'm using Visual Web Developer, not Visual Studio. Can it be done using this? If so could you explain how.

    I have the Telerik.Web.Desing.dll in my bin folder.

    Thanks
  6. Helen
    Helen avatar
    2 posts
    Registered:
    26 Sep 2016
    03 Dec 2010
    Link to this post
    Hi Darren,

    You should add the Telerik.Web.UI.dll manually to the toolbox(right click on the toolbox and click "Choose items"). Then you may drag the RadTabStrip control to a page and configure its properties.

    Greetings,
    Helen
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  7. Darren
    Darren avatar
    15 posts
    Registered:
    06 Oct 2010
    03 Dec 2010
    Link to this post
    Hi Helen

    I followed your instructions and the Telerik.Web.UI.dll is in the Toolbox. I'm not getting how you configure the properties.

    If I open up a masterpage in Visual Web Developer and drag the RadTabStrip into the area I want it then I just get the RadTabStrip insert code but no method of configuring that I can see.

    Alternatively, if I am in the admin area of Sitefinity through the web browser and I edit a template, then drag the RadTabStrip from the control panel I only get the edit option that brings up a properties box (see attached screenshot).

    Looking at this link again http://www.telerik.com/help/aspnet-ajax/tab_gettingstarted.html it says to drag onto your web page. Is this the masterpage or an actual web page? My understanding was the pages are dynamic so it would go into the masterpage. In which case how do I see the Smart Tag?

    Thanks
    Darren
  8. Helen
    Helen avatar
    2 posts
    Registered:
    26 Sep 2016
    07 Dec 2010
    Link to this post
    Hello Darren,

    When you right click on the RadTabStrip, after you have dragged it on the master page, you should be able to see and configure its properties. Please see the attached screenshot for details.

    Regards,
    Helen
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  9. Darren
    Darren avatar
    15 posts
    Registered:
    06 Oct 2010
    04 Jan 2011
    Link to this post
    Hi Helen

    I have dragged the RadTabStrip to the master page and was able to add my own classes to each link. However, it says on the help page of your site that SelectedCssClass gives a style for the selected tab. I added this to my RadTabStrip but the new css style didn't appear when selected. Here is my RadTab code:
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="">
        <Tabs>
            <telerik:RadTab runat="server" CssClass="link1"
                NavigateUrl="/page01.aspx" Owner="RadTabStrip1"
                Text="Page 01" SelectedCssClass="current">
            </telerik:RadTab>
            <telerik:RadTab runat="server" CssClass="link2"
                NavigateUrl="/page02.aspx" Owner="RadTabStrip1"
                Text="Page 02" SelectedCssClass="current">
            </telerik:RadTab>
            <telerik:RadTab runat="server" CssClass="link3"
                NavigateUrl="/page03.aspx" Owner="RadTabStrip1"
                Text="Page 03" SelectedCssClass="current">
            </telerik:RadTab>
            <telerik:RadTab runat="server" CssClass="link4"
                NavigateUrl="/page04.aspx" Owner="RadTabStrip1"
                Text="Page 04" SelectedCssClass="current">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>

    My CssClass shows on each link, but nothing appears for the SelectedCssClass. Any ideas why this might be?

    Thanks
  10. Yana
    Yana avatar
    3 posts
    Registered:
    07 Dec 2016
    07 Jan 2011
    Link to this post
    Hello Darren,

    You're tabs have their NavigateUrl set, that's why when a tab is clicked, the page navigates and they cannot be selected.  You should manually select them as demonstrated here.

    Kind regards,
    Yana
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Register for webinar
10 posts, 0 answered