This question is locked. New answers and comments are not allowed.
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>
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>
12 Answers, 1 is accepted
0
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
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!
0
Vivek
Top achievements
Rank 1
Rank 1
answered on 20 Sep 2012, 02:24 AM
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?
0
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
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!
0
Vivek
Top achievements
Rank 1
Rank 1
answered on 25 Sep 2012, 01:16 AM
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
thanks
0
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
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!
0
Vivek
Top achievements
Rank 1
Rank 1
answered on 11 Mar 2013, 02:17 AM
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?
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?
0
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
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!
0
Vivek
Top achievements
Rank 1
Rank 1
answered on 19 Mar 2013, 01:43 AM
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
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
0
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
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!
0
Vivek
Top achievements
Rank 1
Rank 1
answered on 24 Apr 2013, 05:09 AM
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)
)
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)
)
0
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
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!
0
Michael
Top achievements
Rank 1
Rank 1
answered on 29 Apr 2013, 11:54 AM
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.
Thank you for help
Michael
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>Michael