Help! Dynamically-built multi-level menus don't display well

[Y.L.]

I built a multi-level vertical menus on a menu partial view.

@using Kendo.Mvc.UI.Fluent
@using MyModels;

@functions{
    public void addChildren(MenuItemBuilder builder, AppMainMenu item, IEnumerable<MyMenuStructure> items)
    {
        var children = items.Where(m => m.ParentMenuID == item.MenuID);
        if (children != null)
        {
            builder.Items(menuItems =>
                {
                    foreach (var child in children)
                    {
                        var menuItem = menuItems.Add().Text(child.Name);
                        menuItem.Action(child.Action, child.Controller);
                        }
                        addChildren(menuItem, child, items);
                    }
                }
            );
        }
    }
}

@(Html.Kendo().Menu()
    .Name("menu")
    .Items(menu => {
        using (PCSContext pcscontext = new PCSContext())
        {
             var menus = got my menu structures;
            foreach (var item in menus.Where(m=> m.ParentMenuID == null))
            {
                var builder = menu.Add().Text(item.Name);
                builder.Action(item.Action, item.ControllerName);
                addChildren(builder, item, menus);
            }
        }
    }
    )
)

On my layou view I set it like this:

Html.Partial("~/Views/Shared/_MyMenu.cshtml");
<script>
                        $("#menu").kendoMenu({
                            animation: { open: { effects: "fadeIn" } },
                            orientation: "vertical",
                            direction: "left"
                        });
                    </script>

I got the below errors:

0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'kendoMenu' at the line of:
<ul class="k-widget k-reset k-header k-menu" id="menu"><li class="k-item k-state-highlight k-state-default"><a class="k-link" href...">Home</a></li><li class="k-item k-state-default"><span class="k-link">My Account</span></li><li class="k-item k-state-default"><span class="k-link">Admin<span class="k-icon k-i-arrow-s"></span></span><ul class="k-group"><li class="k-item k-state-default"><a class="k-link" href...">User Management</a></li></ul></li><li class="k-item k-state-default"><a class="k-link" href="...">About</a></li></ul><script>
jQuery(function(){jQuery("#menu").kendoMenu({});});
</script>

I have include the scripts in my layout:
<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
 @Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/kendo")
@Scripts.Render("~/bundles/kendo")
I created those bundles in bundle configuration. What do I miss then?

And my menus look weird(see the attached file) after choosing "continue" after the above error(I'm using MVC4 and latest kendo complete for ASP.NET MVC).
1. Two look greyed out and two look enabled, but if click it does take you to the destination.
2. The popup submenu has a space between popup and the parent menu.
3. The menu is in an splitter pane. After collapse the pane and re-expand it, the popup doesn't show. You can see there appears a horizontal scrollbar instead in the pane.

How can I make all the menus look "not greyed"? How to get rid of the space? How to keep same after re-expand after collapse the splitter pane? I also don't like the little white rectangle and dark-grey rectangle shown on the screen at the corner of the menu item. How to make it look like the kendo demo?

I have tried couple of days trying to solve the above issues, but it didn't work.

Thanks.

[Daniel]

Hello,

Could you provide the full code for the layout and the bundle configuration? The described error will occur if jQuery is added again after the Kendo scripts have been included. The JavaScript initialization should also not be used when using the wrappers because the widget will be initialized twice.
As for the styling issues - the most likely reason for the problem is the default styles for the body(the border added to the body will prevent the position from being correctly calculated) and a list with ID menu in the Site.css file. Check if removing them resolves the problem. 
The problem with the menu items being hidden occurs because by default the splitter panes have overflow:hidden style. You should override the style in order to show the sub items e.g.

panes.Add().HtmlAttributes(new { @class="overflowPane"})

.k-pane.overflowPane
{
    overflow:visible;
}

Regards,
Daniel
Telerik

[Y.L.]

Thank you for the reply.

In _Layout.cshtml, I have the following scripts included:

<head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - Web Application</title>

        <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>

        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Styles.Render("~/Content/kendo")
        @Scripts.Render("~/bundles/kendo")

    </head>
<body>
       <div id="body">
               <div id="splitter" style="height: 700px">
                <div style="overflow: visible; z-index: 1">
                    <nav>
                        @if (Session["MainMenu"] == null)
                              {
                                  Session["MainMenu"] = Html.Partial("~/Views/Shared/_Menu2.cshtml");
                              }
                        @Session["MainMenu"]

                    </nav>

                    <script>
                        $("#menu").kendoMenu({
                            animation: { open: { effects: "fadeIn" } },
                            orientation: "vertical",
                            direction: "right"
                        });
                    </script>


                </div>
                <div>
                        <section class="content-wrapper main-content clear-fix">
                        @RenderBody()
                    </section>
                </div>
            </div>
            <script>
                $("#splitter").kendoSplitter({
                    orientation: "horizontal",
                    panes: [{ size:"250px", collapsible: true}, {}],
                });
            </script>
           </div>

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>

In BundleConfig.cs, I have this:

public static void RegisterBundles(BundleCollection bundles)
       {
           bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                       "~/Scripts/jquery-{version}.js"));

           bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                       "~/Scripts/jquery-ui-{version}.js"));

           bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                       "~/Scripts/jquery.unobtrusive*",
                       "~/Scripts/jquery.validate*"));

           // Use the development version of Modernizr to develop with and learn from. Then, when you're
           // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
           bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                       "~/Scripts/modernizr-*"));

           bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

           bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                       "~/Content/themes/base/jquery.ui.core.css",
                       "~/Content/themes/base/jquery.ui.resizable.css",
                       "~/Content/themes/base/jquery.ui.selectable.css",
                       "~/Content/themes/base/jquery.ui.accordion.css",
                       "~/Content/themes/base/jquery.ui.autocomplete.css",
                       "~/Content/themes/base/jquery.ui.button.css",
                       "~/Content/themes/base/jquery.ui.dialog.css",
                       "~/Content/themes/base/jquery.ui.slider.css",
                       "~/Content/themes/base/jquery.ui.tabs.css",
                       "~/Content/themes/base/jquery.ui.datepicker.css",
                       "~/Content/themes/base/jquery.ui.progressbar.css",
                       "~/Content/themes/base/jquery.ui.theme.css"));

           // The Kendo JavaScript bundle
           bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
                   "~/Scripts/kendo.web.*", // or kendo.all.* if you want to use Kendo UI Web and Kendo UI DataViz
                   "~/Scripts/kendo.aspnetmvc.*",
                   "~/Scripts/kendo.menu.min.js"));

           // The Kendo CSS bundle
           bundles.Add(new StyleBundle("~/Content/kendo").Include(
                   "~/Content/kendo.common.*",
                   "~/Content/kendo.default.*"));

           // Clear all items from the ignore list to allow minified CSS and JavaScript files in debug mode
           bundles.IgnoreList.Clear();

           // Add back the default ignore list rules sans the ones which affect minified files and debug mode
           bundles.IgnoreList.Ignore("*.intellisense.js");
           bundles.IgnoreList.Ignore("*-vsdoc.js");
           bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);

       }

[Daniel]

Hello,

The error is thrown because including jQuery again at the end of the body:

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

jQuery should be included only once before the Kendo scripts. Removing the jQuery bundle or moving it before the Kendo bundle should resolve the problem.

Regards,
Daniel
Telerik