RadNavigation: link doesn't work in NodeTemplate

6 posts, 1 answers
  1. Emanuele
    Emanuele avatar
    23 posts
    Member since:
    Aug 2014

    Posted 11 Jul 2018 Link to this post

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

     

  2. Emanuele
    Emanuele avatar
    23 posts
    Member since:
    Aug 2014

    Posted 11 Jul 2018 Link to this post

    This the HTML produced:

    <!DOCTYPE html>
     
    <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">
                    <!-- 2018.1.117.45 --><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>
                                             
                            </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><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 />
                                Simulatore tasse: © 2018  Università del Piemonte Orientale,  v. 0.3.2
                             
            </div>
        </div>
    </div>
           </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>

     

  3. Emanuele
    Emanuele avatar
    23 posts
    Member since:
    Aug 2014

    Posted 11 Jul 2018 in reply to Emanuele Link to this post

    link to Informazioni.aspx works, the previous doesn't work (img + text 'UPO - ')
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4713 posts

    Posted 16 Jul 2018 Link to this post

    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>
                </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.
  5. Emanuele
    Emanuele avatar
    23 posts
    Member since:
    Aug 2014

    Posted 16 Jul 2018 in reply to Marin Bratanov Link to this post

    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>
                                                </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>
  6. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4713 posts

    Posted 16 Jul 2018 Link to this post

    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.
Back to Top