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

Forums / Designing & Styling / SiteMapNavigationTabStrip template hyperlink not working

SiteMapNavigationTabStrip template hyperlink not working

7 posts, 1 answered
  1. El Barto
    El Barto avatar
    42 posts
    Registered:
    28 Apr 2008
    04 Oct 2011
    Link to this post
    I've created an ascx as a template for SiteMapNavigationTabStrip. 

    The file contains this code:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SubMenu.ascx.cs" Inherits="RSS.Website.Custom.Templates.SubMenu" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.SiteMapNavigations" TagPrefix="navcontrols" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <navcontrols:SiteMapNavigationTabStrip ID="MyNavigation" runat="server" Orientation="VerticalLeft" MaxDataBindDepth="1" Skin="">
        <TabTemplate>
            <asp:HyperLink ID="hlMenu" runat="server" NavigateUrl='<%#DataBinder.Eval(Container, "NavigateUrl") %>' ToolTip='<%# DataBinder.Eval(Container, "Text") %>'>
                <asp:Image ID="imgMiddle" runat="server" ImageUrl='<%# "~/DynImage.ashx?f=Epitough&h=25&fc=%23bd0926&bgc=white&fs=20&t=" + DataBinder.Eval(Container, "Text") %>' AlternateText='<%# DataBinder.Eval(Container, "Text") %>' />
            </asp:HyperLink>
        </TabTemplate>
    </navcontrols:SiteMapNavigationTabStrip>

    I've set the Custom template path of the Navigation widget to point at this ascx.
    The controls now outputs the following HTML:
    <div id="ctl00_cphLeftColumn_T52AEF7F1001_ctl00_ctl00_MyNavigation"
                  class="RadTabStripVertical RadTabStrip_ RadTabStripLeft_">
     
                    <!-- 2011.2.712.40 -->
                    <div class="rtsLevel rtsLevel1">
                      <ul class="rtsUL">
                        <li class="rtsLI rtsFirst">
                          <div class="rtsLink rtsBefore">
                            <div class="rtsOut">
                              <div class="rtsIn">
                                <a id="ctl00_cphLeftColumn_T52AEF7F1001_ctl00_ctl00_MyNavigation_i0_hlMenu"
                                title="Huizenpartner"
                                href="huizenpartner">
                                  <img id="ctl00_cphLeftColumn_T52AEF7F1001_ctl00_ctl00_MyNavigation_i0_imgMiddle"
                                  src="../DynImage.ashx?f=Epitough&h=25&fc=%23bd0926&bgc=white&fs=20&t=Huizenpartner"
                                  alt="Huizenpartner" />
                                </a>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li class="rtsLI rtsLast">
                          <div class="rtsLink rtsSelected">
                            <div class="rtsOut">
                              <div class="rtsIn">
                                <a id="ctl00_cphLeftColumn_T52AEF7F1001_ctl00_ctl00_MyNavigation_i1_hlMenu"
                                title="TipBase" href="tipbase">
                                  <img id="ctl00_cphLeftColumn_T52AEF7F1001_ctl00_ctl00_MyNavigation_i1_imgMiddle"
                                  src="../DynImage.ashx?f=Epitough&h=25&fc=%23bd0926&bgc=white&fs=20&t=TipBase"
                                  alt="TipBase" />
                                </a>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <input id="ctl00_cphLeftColumn_T52AEF7F1001_ctl00_ctl00_MyNavigation_ClientState"
                    name="ctl00_cphLeftColumn_T52AEF7F1001_ctl00_ctl00_MyNavigation_ClientState"
                    type="hidden" />
                  </div>

    I've validated the html with the w3c validator and all seems perfectly ok, but the hyperlinks are not working in IE, FF, chrome and safari. 
    When I hover the link, the correct full url is displayed in the status bar but when I click the link nothing happens. 
    Any idea where I made a mistake?

    Regards,

    Bart
  2. El Barto
    El Barto avatar
    42 posts
    Registered:
    28 Apr 2008
    06 Oct 2011
    Link to this post
    Any suggestions?
  3. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    08 Dec 2016
    07 Oct 2011
    Link to this post
    Hi El Barto,

    To make the control work remove this:
    <TabTemplate>
           <asp:HyperLink ID="hlMenu" runat="server" NavigateUrl='<%#DataBinder.Eval(Container, "NavigateUrl") %>' ToolTip='<%# DataBinder.Eval(Container, "Text") %>'>
               <asp:Image ID="imgMiddle" runat="server" ImageUrl='<%# "~/DynImage.ashx?f=Epitough&h=25&fc=%23bd0926&bgc=white&fs=20&t=" + DataBinder.Eval(Container, "Text") %>' AlternateText='<%# DataBinder.Eval(Container, "Text") %>' />
           </asp:HyperLink>
       </TabTemplate>
    I removed this because when using a template for the navigation it fills TabTemplate for you and you use the sitemap from the navigation control.

    All the best,
    Stanislav Velikov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  4. El Barto
    El Barto avatar
    42 posts
    Registered:
    28 Apr 2008
    07 Oct 2011
    Link to this post
    Hi Stanislav

    Okay, but what is the purpose of the ascx template? I thought you could use Custom template path to customize each item in the navigation widget. 
    I want my own content for each item in the navigation control. What would be the way to do that?
  5. El Barto
    El Barto avatar
    42 posts
    Registered:
    28 Apr 2008
    10 Oct 2011
    Link to this post
    Any help to create a custom template for the navigation widget would be appreciated.
  6. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    08 Dec 2016
    11 Oct 2011
    Link to this post
    Hi El Barto,

    When using a template for Sitefinity navigation control this automatically bind the menu control to the navigation control built in sitemap that populates each item. This makes all menu items created dynamically based on how many pages are in the sitemap.
    Here is the the complete code for a custom navigation control. I have added an explanation on the important topics.
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="SitefinityWebApp.Controls.WebUserControl1" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" TagPrefix="sfMap" %>
    <sfMap:SitefinitySiteMapDataSource ID="SM" runat="server" ShowStartingNode="false"/>
     
    <telerik:RadMenu ID="RadMenu1" runat="server" DataSourceID="SM">
    <%--this menu is bound to sitefinity sitemap notice the DataSourceID, all items are automatically populated--%>
    </telerik:RadMenu>
     
     
    <telerik:RadMenu ID="RadMenu2" runat="server">
    <Items>
    <telerik:RadMenuItem Text="File" AccessKey="F">
    <%--To extend the menu I have added new menu that holds items that I specify by entering them by hand--%>
    </telerik:RadMenuItem>
    </Items>
     
    </telerik:RadMenu>
    The code behind of the control adds new menu items pragmatically. This can be done to any menu. This is a better way than adding new RadMenu.
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
     
    namespace SitefinityWebApp.Controls
    {
        public partial class WebUserControl1 : System.Web.UI.UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                RadMenuItem item = new RadMenuItem("Root item text");
                RadMenu2.Items.Add(item);
            }
        }
    }
    For more information on this check this demo.

    To register the control please refer to the documentation.


    Kind regards,
    Stanislav Velikov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  7. El Barto
    El Barto avatar
    42 posts
    Registered:
    28 Apr 2008
    11 Oct 2011
    Link to this post
    Hi Stanislav,

    Thank you very much for the example.
    Using your example gave me a Both DataSource and DataSourceID are defined on 'RadMenu1'. Remove one definition. exception. I removed the DataSourceID attribute from RadMenu1 and it worked. The template I use looks like this:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SubMenu.ascx.cs" Inherits="RSS.Website.Custom.Templates.SubMenu" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" TagPrefix="sfMap" %>
    <sfMap:SitefinitySiteMapDataSource ID="SM" runat="server" ShowStartingNode="false" />
    <telerik:RadMenu ID="RadMenu1" runat="server" Flow="Vertical" Skin="">
        <%--this menu is bound to sitefinity sitemap notice the DataSourceID, all items are automatically populated--%>
        <ItemTemplate>
            <asp:HyperLink ID="hlMenu" runat="server" NavigateUrl='<%# DataBinder.Eval(Container, "NavigateUrl") %>' ToolTip='<%# DataBinder.Eval(Container, "Text") %>'>
                <asp:Image ID="imgMiddle" runat="server" ImageUrl='<%# "~/DynImage.ashx?f=Epitough&h=25&fc=%23bd0926&bgc=white&fs=20&t=" + DataBinder.Eval(Container, "Text") %>' AlternateText='<%# DataBinder.Eval(Container, "Text") %>' />
            </asp:HyperLink>
        </ItemTemplate>
    </telerik:RadMenu>

    Thank you for your assistance...
7 posts, 1 answered