SiteMapNavigationTabStrip template hyperlink not working

Posted by Community Admin on 04-Oct-2011 00:00

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_">

<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>

</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>

</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

Posted by Community Admin on 06-Oct-2011 00:00

Any suggestions?

Posted by Community Admin on 07-Oct-2011 00:00

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

Posted by Community Admin on 07-Oct-2011 00:00

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?

Posted by Community Admin on 10-Oct-2011 00:00

Any help to create a custom template for the navigation widget would be appreciated.

Posted by Community Admin on 11-Oct-2011 00:00

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

Posted by Community Admin on 11-Oct-2011 00:00

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...

This thread is closed

All Replies