This is a migrated thread and some comments may be shown as answers.

RadNavigation: link doesn't work in NodeTemplate

5 Answers 258 Views

Navigation

This is a migrated thread and some comments may be shown as answers.

Emanuele asked on 11 Jul 2018, 12:19 PM

Hi, I have a problem with links in a navigation menu.
The simple link works, it is translated properly into the tag <a></a>.

A NodeTemplate doesn't work: link does not appear and obviously does not work.

This is MasterPage.Master:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="SimTasse.MasterPage" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title><%: Page.Title %></title>

<meta name="viewport" content="initial-scale=1.0, minimum-scale=1, maximum-scale=1.0, user-scalable=no" />

<link href="styles/base.css" rel="stylesheet" />

<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>

<link href="~/styles/material_upo/Navigation.material_upo.css" rel="stylesheet" runat="server"/>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager runat="server"></telerik:RadScriptManager>

<div id="wrapper">

<telerik:RadPageLayout runat="server" ID="MasterLayout" GridType="Fluid">

<Rows>

<%--Header--%>

<telerik:LayoutRow CssClass="header">

<Columns>

<%--Logo--%>

<%--Main Nav--%>

<telerik:LayoutColumn Span="12" SpanMd="12" SpanSm="12" SpanXs="12">

<telerik:RadNavigation ID="RadNavigationPrincipale" runat="server" EnableEmbeddedSkins="False" Skin="material_upo">

<Nodes>

<telerik:NavigationNode ID="nn_logo" NavigateUrl="Default.aspx">

<NodeTemplate>

<div>

<div style="display: table-cell; vertical-align: middle;">

<img src="images/logo_quadrato_su_rosso_24.png" alt=""/>

</div>

<div style="display: table-cell; vertical-align: middle;" id="divVoceMenu1">

UPO -

</div>

</NodeTemplate>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Informazioni" ID="nn_info" NavigateUrl="Informazioni.aspx">

</telerik:NavigationNode>

<telerik:NavigationNode Text="Accedi" ID="nn_accedi">

</telerik:NavigationNode>

</Nodes>

</telerik:RadNavigation>

</telerik:LayoutColumn>

</Columns>

</telerik:LayoutRow>

<%--Main--%>

<telerik:LayoutRow>

<Columns>

<%--Sidebar--%>

<%--Content--%>

<telerik:CompositeLayoutColumn Span="12" SpanMd="12" SpanSm="12" SpanXs="12">

<Content>

<asp:ContentPlaceHolder ID="cph1" runat="server">

</asp:ContentPlaceHolder>

</Content>

</telerik:CompositeLayoutColumn>

</Columns>

</telerik:LayoutRow>

<%--Footer--%>

<telerik:LayoutRow>

<Columns>

<telerik:LayoutColumn CssClass="footer">

<hr />

Simulatore tasse: © <%: DateTime.Now.Year %> Università del Piemonte Orientale, v. <%: appVersione %>

</telerik:LayoutColumn>

</Columns>

</telerik:LayoutRow>

</Rows>

</telerik:RadPageLayout>

</div>

<script type="text/javascript">

//imposta il testo corretto della prima voce di menu

var nodo = document.getElementById("divVoceMenu1");

nodo.innerHTML = " UPO - " + "<%: appTitolo %>";

//var waitC = false;

function WaitCursor(sender, args) {

}

</script>

</form>

</body>

</html>

5 Answers, 1 is accepted

answered on 11 Jul 2018, 12:21 PM

This the HTML produced:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>

</title><meta name="viewport" content="initial-scale=1.0, minimum-scale=1, maximum-scale=1.0, user-scalable=no" /><link href="styles/base.css" rel="stylesheet" />

<link href="styles/default.css" rel="stylesheet" />

<link href="styles/material_upo/Navigation.material_upo.css" rel="stylesheet" /><link href=

"/WebResource.axd?d=rhRRvYQTYv6mNRHqzCKJ7pOaDY7ZgnaK1DsRefkEVH95y_UKo2y1DIHsiGfGka0DqaxfpDtioTM-iZRp7WdWY1CM-MR-0A2gPLI3im2knunuw95X3953mtYQbqS61kmL8ISnLXcu2RI9-B2LY1yiwg2&t=636517036740000000"

type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href=

"/WebResource.axd?d=6d0ORl_GDQ8il0vfaye5YeNntDPNYll_-8agl2PBEfPZGNZsGF3MiHZHXfgYaKm5x3wWPPMOtzuPfG7zMiT0Nv7tnPr_gQJjjF3k_nRcwNZcaqeD9UIwEiqaG3kCX8EETU8yQg5ONSF7DFChHZidCA2&t=636517036740000000"

type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href=

"/WebResource.axd?d=VdPoLqp1pEU6N0-IfFplZJHPEhvHXJtt5h2gUiXbit_Nkl9zEMJpb0h3NzMEp20rrrrcC6BT9B_W0rJtgII4Infs-_8-oBt9x9s3sxv9-J2vB1NKsgndGpji5iLYeZ3Z7-g9yj3hF56Pt-Tt3TF1bQ2&t=636517036740000000"

type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href=

"/WebResource.axd?d=Uycoz_J_WDsH_gCg373xH-tZ01FxVlD-BumgHduL3ENkQWFptBQ65yoClQGWSqAkS9Bztlb8B1co0ieMcCL5HUZcGxEFRHeyG3dqvNu2CDDUvKtBbdPFe-zCnkNsIIf7OB9A8yOlJm3YEcq0eix6sw2&t=636517036740000000"

type="text/css" rel="stylesheet" class="Telerik_stylesheet" /></head>

<body>

<form method="post" action="./Informazioni.aspx" id="form1">

<div class="aspNetHidden">

<input type="hidden" name="ctl05_TSM" id="ctl05_TSM" value="" />

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value=

"Ap+Hb6snsXjeRIMfTq7JNXOYRmzdnqK0o5FAD0DuCjTtMaLVfUxVxbVNLsnJxO//L31RY1tbPedi8l9888HUH8puY7TqrC/uyjPZhnZFWi+YrktQNiH+ko3ssOwIctdgl1Ecq9q/zCNk7/It2Ky81OPlmHqSt3C7jJzNv2/hfR/PQCY0pfDcVYTvtHcUiOCkpyP+I3kD/jlYTMUwE16xH+yXvAvi2kJPiZyQ5yaA6g0rZg2MKblmW1qOE8Bx8revZEuTGcRWfM28wgIXBNlG5YCy1zRuqqqWn5609g+b0NUyU99PbZe8Dyxa74/ctsauNFpWEzR6+DI9DHvZdlnBL6yPqejeMt84pJfnSRjUX8Y="

/>

</div>

<script type="text/javascript">

//<![CDATA[

var theForm = document.forms['form1'];

if (!theForm) {

theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

//]]>

</script>

<script src=

"/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZKg_7ceFmrKIpXau0hxZna1cDGjou5wu6Qb4jpAzp4wbEN6QWDmuKLRPwEWFgVu3vQ2&t=636531429525433943"

type="text/javascript"></script>

<script src=

"/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl05_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3ait-IT%3a82f97823-13d2-45c7-9b60-a442707126ec%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2018.1.117.45%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3ait-IT%3a6d514cb9-2739-4112-a25a-b6efc64747ba%3a16e4e7cd%3a33715776%3af7645509%3a24ee1bba%3ac128760b%3a1e771326%3a88144a7a%3a8c2d243e"

type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

if (typeof(Sys) === 'undefined') throw new Error('Impossibile caricare il framework lato client di ASP.NET Ajax.');

//]]>

</script>

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="39F1CD2B" />

</div>

<script type="text/javascript">

//<![CDATA[

Sys.WebForms.PageRequestManager._initialize('ctl00$ctl05', 'form1', [], [], [], 90, 'ctl00');

//]]>

</script>

<div id="wrapper">

<div id="MasterLayout" class="t-container t-container-fluid">

<div class="t-row header">

<div class="t-col t-col-12 t-col-xs-12 t-col-sm-12 t-col-md-12">

<div id="ctl00_RadNavigationPrincipale" class="RadNavigation RadNavigation_material_upo">

<div class="rnvRootGroupWrapper">

<ul class="rnvRootGroup rnvGroup">

<li class="rnvItem rnvFirst"><div class="rnvRootLink rnvLink rnvTemplate">

<div>

<div style="display: table-cell; vertical-align: middle;">

<img src="images/logo_quadrato_su_rosso_24.png" alt=""/>

</div>

<div style="display: table-cell; vertical-align: middle;" id="divVoceMenu1">

UPO -

</div>

</div></li><li class="rnvItem"><a class="rnvRootLink rnvLink" href="Informazioni.aspx"><span class="rnvText">Informazioni</span></a></li><li class="rnvItem rnvLast"><span class="rnvRootLink rnvLink"><span class="rnvText">Accedi</span></span></li>

</ul>

</div><div class="rnvHiddenGroups">

</div><input id="ctl00_RadNavigationPrincipale_ClientState" name="ctl00_RadNavigationPrincipale_ClientState" type="hidden" />

</div>

</div><div class="t-row">

<div class="t-col t-col-12 t-col-xs-12 t-col-sm-12 t-col-md-12">

Pagina informativa

</div>

</div><div class="t-row">

<div class="t-col t-col-12 footer">

<hr />

</div>

<script type="text/javascript">

//imposta il testo corretto della prima voce di menu

var nodo = document.getElementById("divVoceMenu1");

nodo.innerHTML = " UPO - " + "Simulatore Tasse - TEST";

//var waitC = false;

function WaitCursor(sender, args) {

}

</script>

<script type="text/javascript">

//<![CDATA[

Sys.Application.add_init(function() {

$create(Telerik.Web.UI.RadNavigation, {"_renderMode":2,"_skin":"material_upo","clientStateFieldID":"ctl00_RadNavigationPrincipale_ClientState","nodesData":[{"navigateUrl":"Default.aspx"},{"text":"Informazioni","navigateUrl":"Informazioni.aspx"},{"text":"Accedi"}]}, null, null, $get("ctl00_RadNavigationPrincipale"));

});

//]]>

</script>

</form>

</body>

</html>

answered on 16 Jul 2018, 10:36 AM

Hi Emanuele,

A template overrides the NavigateUrl property. If a node has a template, it will not render an anchor (<a>). If you want it to act as an anchor, you should add the desired hyperlink in the template.

For example:

<telerik:NavigationNode ID="nn_logo">

<NodeTemplate>

<a href="Default.aspx">

<div>

<div style="display: table-cell; vertical-align: middle;">

<img src="images/logo_quadrato_su_rosso_24.png" alt="" />

</div>

<div style="display: table-cell; vertical-align: middle;" id="divVoceMenu1">

UPO -

</div>

</a>

</NodeTemplate>

</telerik:NavigationNode>

I have also added this information to our documentation as it was missing, and it will be live with our next upload. As a small "thank you" for pointing this out, you will find your Telerik points updated.

Regards,
Marin Bratanov
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 16 Jul 2018, 12:13 PM

Hi Marin,

I take note of the thing and enter the tag<a></a>.

But now there are problems with CSS, because anyway the DIV generated by the Nodetemplate use classes rnvRootLink and rnvLink, which increase the spacing around <a> double it. But i need to use these classes for <a> for uniform aspect.
Also if I remove rnvrootlink the cursor turns correctly to the hand but the link does not activate in the part not close to the <a> unlike the behavior on a standard node<a>

<telerik:RadNavigation ID="RadNavigationPrincipale" runat="server" EnableEmbeddedSkins="False" Skin="material_upo">

<Nodes>

<telerik:NavigationNode ID="nn_logo" NavigateUrl="Default.aspx">

<NodeTemplate>

<a href="Default.aspx" class="rnvRootLink rnvLink" style="text-decoration: none">

<div>

<div style="display: table-cell; vertical-align: middle;">

<img src="../images/logo_quadrato_su_rosso_24.png" alt=""/>

</div>

<div style="display: table-cell; vertical-align: middle;" id="divVoceMenu1">

UPO -

</div>

</a>

</NodeTemplate>

</telerik:NavigationNode>

<telerik:NavigationNode Text="Informazioni" ID="nn_info" NavigateUrl="Informazioni.aspx">

</telerik:NavigationNode>

<telerik:NavigationNode Text="Accedi" ID="nn_accedi" >

</telerik:NavigationNode>

</Nodes>

</telerik:RadNavigation>

Accepted

answered on 16 Jul 2018, 01:56 PM

Hi Emanuele,

You can override the built-in CSS rules so the padding templated items bring is removed so you can use your own padding. Below is an example built on top of the provided markup and you may find the following blog post useful in creating such tweaks: https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools.

.rnvItem div.rnvTemplate{

padding:0;

border: 0;

}

Since this will affect all templated items in all navigation instances on the page and you may not always do that, you can cascade this to target specific nodes only that should keep being links as opposed to doing something else (which is what the templates are usually used for).

<style>

.rnvItem.noPadding div.rnvTemplate{

padding:0;

border: 0;

}

</style>

<telerik:RadNavigation ID="RadNavigationPrincipale" runat="server" EnableEmbeddedSkins="False" Skin="material_upo">

<Nodes>

<telerik:NavigationNode ID="nn_logo" NavigateUrl="Default.aspx" CssClass="noPadding">

<NodeTemplate>

Regards,
Marin Bratanov
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.