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

4 posts, 0 answers
  1. Y.L.
    Y.L. avatar
    4 posts
    Member since:
    May 2011

    Posted 20 Nov 2013 Link to this post

    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.
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 22 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Y.L.
    Y.L. avatar
    4 posts
    Member since:
    May 2011

    Posted 22 Nov 2013 Link to this post

    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);
     
           }
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 25 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready