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

Menu Renders as Unordered List

4 Answers 66 Views
Menu
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Sid
Top achievements
Rank 1
Sid asked on 27 Apr 2011, 05:41 AM
Hi All,

I'm using the Menu control with the MVCSiteMapProvider.  I cannot figure out why the menu is rendering as an unordered list after building and publishing the site.  The entire sitemap renders, and the second level nodes are placed as first order nodes in the list. 

Here's my _layout.cshtml:
@using MvcSiteMapProvider;
@using Telerik.Web.Mvc.UI;
  
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    @{Html.Telerik().StyleSheetRegistrar()
        .DefaultGroup(group => group
            .Add("telerik.common.min.css")
            .Add("telerik.rtl.min.css")
            .Combined(true)
            .Compress(true));
            }
</head>
  
<body>
    <div class="page">
  
        <div id="header">
            <div id="title">
                <h1>Welcome to MyDomain.com</h1>
            </div>
  
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
  
            <div id="menu">
            @{Html.Telerik().Menu()
    .Name("Menu")
        .BindTo(Html.MvcSiteMap().Provider.RootNode.ChildNodes,
            mappings => mappings.For<MvcSiteMapNode>(binding => binding
                .ItemDataBound((item, node) =>
                {
                    item.Text = node.Title;
                    item.ActionName = node.Action;
                    item.ControllerName = node.Controller;
                })
                    .Children(node => node.ChildNodes)))
                    .Orientation(MenuOrientation.Horizontal)
                    .Effects(fx => fx.Slide()
                                     .Opacity()
                                     )
                    .Render();
                    }
  
            </div>
        </div>
  
        <div id="main">
            @RenderBody()
            <div id="footer">
            </div>
        </div>
    </div>
    @{ Html.Telerik().ScriptRegistrar()
        .OnDocumentReady(
            @<text>
                prettyPrint();
                </text>);
        }
</body>
</html>

I've wiped out all the pertinent CSS in site.css, which was created as part of the MVC3 solution template. 

Here's my HomeController:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MySite.Models;
using Telerik.Web.Mvc;
  
  
namespace MySite.Controllers
{
    public class HomeController : Controller
    {
        MySiteEntities _db;
  
        public HomeController()
        {
            _db = new MySiteEntities();
        }
  
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to My Site!";
  
            return View();
        }
  
        public ActionResult About()
        {
            return View();
        }
  
        public ActionResult Contact()
        {
            return View();
        }
  
           
    }
  
    public partial class MenuController : Controller
    {
        [PopulateSiteMap(SiteMapName = "MySiteMap", ViewDataKey = "MySiteMap")]
  
        public ActionResult SiteMapBinding()
        {
            if (!SiteMapManager.SiteMaps.ContainsKey("Veehco"))
            {
                SiteMapManager.SiteMaps.Register<XmlSiteMap>("MyDomain", sitemap => sitemap.LoadFrom("~/MyDomain.sitemap"));
            }
            return View();
        }
  
        public ActionResult Orientation(string orientation) 
        { 
            ViewData["orientation"] = orientation ?? "Vertical"; 
            return View(); 
        }
  
        public ActionResult AnimationEffects(string animation, bool? enableOpacityAnimation, int? openDuration, int? closeDuration)
        { 
            ViewData["animation"] = animation ?? "slide"; 
            ViewData["enableOpacityAnimation"] = enableOpacityAnimation ?? true; 
            ViewData["openDuration"] = openDuration ?? 200; ViewData["closeDuration"] = closeDuration ?? 200; 
            return View(); 
        }
    }
}

How should I modify either the _Layout.cshtml or the HomeController such that the Menu renders in horizontal format with flyout child nodes and is not rendered as an unordered list?

Thanks,
Sid

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Apr 2011, 07:15 AM
Hello Sid,

The way the Menu renders suggests that a CSS file is missing. For example I see that the StyleSheetRegistrar registers the common.css and rtl.css files, but not a skin CSS file - you should add one as well:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-troubleshooting.html#NoSkins

Best wishes,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Sid
Top achievements
Rank 1
answered on 27 Apr 2011, 06:17 PM
Hi Dimo,

Thanks for your reply.  When setting up the MVC Extensions, I unzipped the CSS files to my solution folder named Content\2011.1.315.  In that folder, there are telerik.common.min.css, and telerik.webblue.min.css both of which are now included in my ScriptRegistrar as follows:
@(Html.Telerik().StyleSheetRegistrar()
       .DefaultGroup(group => group
           .Add("telerik.common.min.css")
           .Add("telerik.rtl.min.css")
           .Add("telerik.webblue.min.css")
           .Combined(true)
           .Compress(true))
           )

After adding the webblue.min.css, building and publishing, the same issue remains.  How should I rectify this issue?

Thanks much,
Sid
0
Atanas Korchev
Telerik team
answered on 28 Apr 2011, 08:58 AM
Hi Sid,

 I suspect the asset.axd HTTP handler required for asset combination and compression is not properly registered in your web.config. You should either register it as explained here or disable compression and combination.

Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Dimo
Telerik team
answered on 28 Apr 2011, 09:43 AM
Hello Sid,

Make sure you are not using CDN with an internal build of the MVC extensions.

Apart from that, try to figure out whether the problem is that the CSS files are not registered on the page (are <link> tags rendered with correct URLs?), or they are registered, but the styles inside do not work.

If you need further assistance, please provide a runnable demo, so that we can take a look.

Kind regards,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Menu
Asked by
Sid
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Sid
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or