Menu UI does not expand

Thread is closed for posting
13 posts, 0 answers
  1. Vivek
    Vivek avatar
    16 posts
    Member since:
    Apr 2011

    Posted 19 Sep 2012 Link to this post

    Hi Guys,

    I have written the following code but when i run the code, the menu displays the arrows but does not expand? Is there something i am missing? Please help/

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>@ViewData("Title")</title>
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/styles/kendo.common.min.css")" type="text/css" rel="Stylesheet" />
        <link href="@Url.Content("~/Content/styles/kendo.default.min.css")" type="text/css" rel="Stylesheet" />
        <script src="@Url.Content("~/Scripts/js/kendo.web.min.js")"  type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/js/kendo.aspnetmvc.min.js")"  type="text/javascript"></script>
        <script src="@Url.Content("/Scripts/js/jquery.min.js")"  type="text/javascript"/>
        <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
        </head>
    <body>
        <div class="page">
            <header>
                <div id="title">
                    <h1>Mail Application</h1>
                </div>
                <div id="logindisplay">
                    @Html.Partial("_LogOnPartial")
                </div>
                <nav>
                                               
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("CostCentre", "Index", "CostCentre")</li>
                        <li>@Html.ActionLink("Office", "Index", "Office")</li>
                    </ul>
                </nav>


                @(Html.Kendo().Menu() _
                    .Name("menu") _
                    .BindTo("Sample")
                    ) 
                        
            </header>
            <section id="main">
                @RenderBody()
            </section>
            <footer>
            </footer>
        </div>
    </body>
    </html>

  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 19 Sep 2012 Link to this post

    Hi Vivek,

    You're loading jQuery after Kendo scripts and they require it. Also, you don't need the second jQuery you load after that (1.5.1).

    Kind regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Vivek
    Vivek avatar
    16 posts
    Member since:
    Apr 2011

    Posted 19 Sep 2012 Link to this post

    That works. Thanks but now i have encountered another issue. The sub menu displays somewhere on far right rather than displaying right underneath the menu. I have attacehd a screenshot that displays. Could you please help me with that as well? Also i am wondering is there any place on Kendo UI  where i can read VBHTML syntax? rather than spending time to convert cshtml kendo syntax to vbhtml?
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 24 Sep 2012 Link to this post

    Hi Vivek,

    Can you share a live URL or a sample page where we can reproduce this behavior? Thank you in advance.

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Vivek
    Vivek avatar
    16 posts
    Member since:
    Apr 2011

    Posted 24 Sep 2012 Link to this post

    i have attached an layout page and the sample sitemap file that i was playing with. please let me know how can i fix this issue.
    thanks
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 27 Sep 2012 Link to this post

    Hi Vivek,

    I tried to reproduce the problem, but to no avail. Attached is my test project - could you please edit and reproduce the issue? This way I would be able to investigate the case in details and do my best to help. Thank you in advance for your cooperation.
     
    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Vivek
    Vivek avatar
    16 posts
    Member since:
    Apr 2011

    Posted 10 Mar 2013 Link to this post

    Hi,

    Looks like this error happens because of default site.css under content folder that comes with MVC3. As soon as i remove the reference to this file, the sub menu appears at correct location. I have attached the site.css that's installed in my project. could you please notify what i need to change in there?
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 13 Mar 2013 Link to this post

    Hello Vivek,

    I am still not able to reproduce the illustrated issue and I am not quite sure what exactly causes it in your application. Is it possible for you to send a runnable project which demonstrates the problem (or modify the example I sent you in my previous post)? This way I would be able to check what exactly is going wrong and provide concrete recommendations. Thank you in advance.

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Vivek
    Vivek avatar
    16 posts
    Member since:
    Apr 2011

    Posted 18 Mar 2013 Link to this post

    Hi Illiana,

    For some weird reason, this issue is no longer happening. i took out the site.css file and then it was working but after a week, i refernced the site.css file again and for some weird reason, this issue is no longer happening. However there is a new issue i am encountering where the menu hides behind the kendo grid control. i have attached a screenshot of the issue. please let me know how can i fix this?

    thanks
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 19 Mar 2013 Link to this post

    Hello Vivek,

    I am glad to hear the initial issue is already resolved. As for your new question, the most likely reason for the illustrated outcome is that the z-index of the Grid is higher than the Menu's one. Could you please check this suggestion? If this doesn't help I will appreciate a working test project which reproduces the issue and which I can test locally. This way I would be able to check what the exact reason for the problem is and provide concrete recommendations. Thank you in advance for your cooperation.

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Vivek
    Vivek avatar
    16 posts
    Member since:
    Apr 2011

    Posted 24 Apr 2013 Link to this post

    Could you please expand further on that? What do you mean by z-index of the grid higher than the menu and where would i find that to check?

    This is how my master page looks where i have embedded my menu

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>@ViewData("Title")</title>
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/styles/kendo.common.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/styles/kendo.default.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/styles/kendo.blueopal.min.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/js/kendo.web.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/js/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    </head>
    <body>
        <div class="page">
            <header>
          <div id="pageheader">
                <div id="pageheader_left">
                    <img id="TitleBanner" src=@Url.Content("~/Content/Images/titlebanner.jpg") alt="TitleBanner"/>
                </div>
                <div id="pageheader_center">

                </div>
                <div id="pageheader_right">
                 <a href="@Url.Action("Index", "Home")" title="Click to go to Home Page"><img id="HomeImage" src=@Url.Content("~/Content/Images/home.gif") alt="Home"/></a>
                 <a href="@Url.Action("About", "Account")"><img id="AboutImage" src=@Url.Content("~/Content/Images/about.gif") alt="About"/></a>
                  <a href="@Url.Action("Logoff", "Account")"><img id="ExitImage" src=@Url.Content("~/Content/Images/logoff.gif") alt="Exit"/></a>
                 </div>    
                <div id="pageheader_lower">
                </div>    
            </div>
        @*    <div id="environmentLabel">
                <cc1:DSCLabel ID="lblEnvironment" CssClass="environmentLabel" runat="server">Environment</cc1:DSCLabel>
            </div*@
                   
                    @Html.Kendo().Menu().Name("Menu").Items(Sub(items)
                                                                items.Add().Text("Home").Action("Index", "Home")
                                                                items.Add().Text("Manage").Items(Sub(subItems)
                                                                                                     subItems.Add().Text("External Mail").Items(Sub(InnerSubItems)
                                                                                                                                                    InnerSubItems.Add().Text("External Mail").Action("Index", "ExternalMail")
                                                                                                                                                    InnerSubItems.Add().Text("External Mail Category").Action("Index", "ExternalMailCategory")
                                                                                                                                                    InnerSubItems.Add().Text("External Mail Item").Action("Index", "ExternalMailItem")
                                                                                                                                                    InnerSubItems.Add().Text("External Mail Cost").Action("Index", "ExternalMailCost")
                                                                                                                                                    InnerSubItems.Add().Text("External Mail Location").Action("Index", "ExternalMailLocation")
                                                                                                                                                    InnerSubItems.Add().Text("External Mail Invoice").Action("Index", "ExternalMailInvoice")
                                                                                                                                                End Sub)
                                                                                                     subItems.Add().Text("Internal Mail").Items(Sub(InnerSubItems)
                                                                                                                                                    InnerSubItems.Add().Text("Internal Mail").Action("Index", "InternalMail")
                                                                                                                                                    InnerSubItems.Add().Text("Internal Mail Location").Action("Index", "InternalMailLocation")
                                                                                                                                                    InnerSubItems.Add().Text("Internal Mail Cost").Action("Index", "InternalMailCost")
                                                                                                                                                    InnerSubItems.Add().Text("Internal Mail Invoice").Action("Index", "InternalMailInvoice")
                                                                                                                                                    InnerSubItems.Add().Text("Internal Mail Schedule").Action("Index", "InternalMailSchedule")
                                                                                                                                                    InnerSubItems.Add().Text("Internal Mail Calendar").Action("Index", "InternalMailCalendar")
                                                                                                                                                    InnerSubItems.Add().Text("Internal Mail Holiday").Action("Index", "InternalMailHoliday")
                                                                                                                                                End Sub)
                                                                                                     subItems.Add().Text("Cost Centre").Action("Index", "CostCentre")
                                                                                                 End Sub)
                                                                items.Add().Text("Reports").Items(Sub(subItems)
                                                                                                  End Sub)
                                                                                                     
                                                            End Sub)
                  @* <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("External Mail Category", "Index", "ExternalMailCategory")</li>
                        <li>@Html.ActionLink("External Mail Item", "Index", "ExternalMailItem")</li>
                        <li>@Html.ActionLink("External Mail Cost", "Index", "ExternalMailCost")</li>

                        <li>@Html.ActionLink("External Mail Location", "Index", "ExternalMailLocation")</li>
                        <li>@Html.ActionLink("External Mail", "Index", "ExternalMail")</li>
                        <li>@Html.ActionLink("External Mail Invoice", "Index", "ExternalMailInvoice")</li>
                        
                   </ul>*@
                @*</nav>*@
                          
            </header>
            <section id="main">
                  @If TempData("Message") IsNot Nothing Then
                      @<div class="Message">
                            @TempData("Message").ToString()
                      </div>
                  End If
                @RenderBody()
            </section>
            <footer>
               
            </footer>
        </div>
    </body>
    </html>


    --------------------------
    This is the another view where my grid is and this is the grid behind where the menu hides

    @ModelType IEnumerable(Of Mail.Domain.ViewModel.ExternalMail.ExternalMailViewModel)

    @Code
        ViewData("Title") = "Index"
    End Code

    <h2>Index</h2>

    <p>
        @Html.ActionLink("Create New", "Create")
    </p>

    @(Html.Kendo().Grid(Model) _
                .Name("ExternalMailGrid") _
                .Columns(Sub(c)
                                 c.Bound(Function(p) p.Quantity)
                                 c.Bound(Function(p) p.CostCentreCode)
                                 c.Bound(Function(p) p.CodeDescription)
                                 c.Bound(Function(p) p.Day)
                                 c.Bound(Function(p) p.Location)
                                 
                         End Sub) _
                                      .Pageable() _
                     .Sortable() _
                     .Filterable() _
                     .Scrollable() _
                     .Groupable() _
                     .DataSource(Sub(c)
                                         c.Ajax() _
                                         .PageSize(50) _
                                         .ServerOperation(False)
                                 End Sub)
        )



  13. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 26 Apr 2013 Link to this post

    Hello Vivek,

    The z-index is a CSS property which specifies the stack order of the elements. For more detailed information please check the following articles:
    Generally speaking, you could use Firebug or any other browser inspector to check what HTML output and CSS rules are applied in a given situation.

    Regarding the attached image, my assumption is that the z-index of the Grid in your application is higher that the Menu's one - hence the Grid is over the Menu. In order to assist you best and provide concrete recommendations I will need a
    runnable example / live URL where I can check what exactly is going wrong. Please provide such an example and I will check it right away. Thank you in advance for your cooperation and understanding.
     
    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Michael
    Michael avatar
    4 posts
    Member since:
    Nov 2012

    Posted 29 Apr 2013 Link to this post

    Hi,
    my menu works fine if I am on a root item.
    If I navigate to a submenu item the menu is not expanding.

    Have a look at the two screenshoots I have uploaded.

    <nav>  
       <ul id="k-menu">
          <li>
                    <a href="/">Startseite</a>
          </li>
         <li>
                   <a href="/User">Benutzer Liste</a>
          </li>
          <li>
                    <span>Content</span>
                    <ul>
                           <li>
                                    <a href="/Content/Article">Artikel</a>
                           </li>
                           <li>
                                   <a href="/Content/Glossary">Glossar</a>
                            </li>
                    </ul>           
            </li>
            <li>
                    <a href="/Home/Contact">Contact</a>
            </li>
            <li>
                      <a href="/Home/About">About</a>
            </li>
      </ul>
     
    </nav>
    Thank you for help
    Michael
Back to Top
Kendo UI is VS 2017 Ready