Sitemap bound Menu and Client Side Routing

2 posts, 0 answers
  1. Tony
    Tony avatar
    3 posts
    Member since:
    Feb 2013

    Posted 24 Apr 2015 Link to this post

    I have a sitemap bound kendo menu in my layout page that correctly displays the menu items in the ul as shown below. Although this works great for an mvc app with normal back end routing it doesnt work for client side routing such as the one provided by angular or others. Because im trying to build a spa I need the href to be #/controller/action. Is there any way to do this.  

     Server wrapper:

                                 .BindTo("WebSiteMap", (item, siteMapNode) => { })


    Generated html:

    <ul class="k-widget k-reset k-header k-menu" id="SiteNav">
        <li class="k-item k-state-highlight k-state-default"><a class="k-link" href="/">Home<span class="k-icon k-i-arrow-s"></span></a><ul class="k-group k-menu-group">
            <li class="k-item k-state-default"><a class="k-link" href="/Home/Contact">Contact</a></li>
        <li class="k-item k-state-highlight k-state-default"><a class="k-link" href="/">Home 2</a></li>




    <?xml version="1.0" encoding="utf-8" ?>
      <siteMapNode title="" description="" roles="*">
        <siteMapNode title="Home" controller="Home" action="Index">
          <siteMapNode title="Contact" controller="Home" action="Contact" />
          <siteMapNode title="About" controller="Home" action="About"  roles="Admin"/>
        <siteMapNode title="Home 2" controller="Home" action="Index">


  2. Daniel
    Daniel avatar
    2231 posts

    Posted 28 Apr 2015 Link to this post


    You can use the url attribute instead of controller and action to set the needed URL in the sitemap:
    <siteMapNode title="Home" url="#/Home/Index" >
    Another option would be to set the URL using the overload of the BindTo method that accepts the key and an action:
    .BindTo("WebSiteMap", (item, node) =>
      if (!string.IsNullOrEmpty(item.ActionName))
          item.Url = "#" + Url.Action(item.ActionName, item.ControllerName);   

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top