Hello,
We are having scrolling issues with the fairly large menu and sub menu items. Instead of scrolling child menu items on selection, it scrolls the main menu options.
Please advise.
function onChangesideMenuSwitch(e) {
var menuContainer = $("#menuContainer");
var mainSection = $("#mainSection");
if (!e.checked) {
menuContainer.hide();
menuContainer.css("width", "0");
menuContainer.css("z-index", "-1");
mainSection.css("padding-left", "0");
}
else {
menuContainer.show();
menuContainer.css("width", "250px");
menuContainer.css("z-index", "3");
mainSection.css("padding-left", "250px");
}
}
@model Models.Menu.TopMenuModel
@{
string pathBase = (string)ViewBag.PathBase;
}
<style>
#menuContainer {
width: 250px;
overflow: visible;
display: block;
z-index: 3;
height: calc(100% - 100px);
background-color: white;
float: left;
flex: none;
position: fixed;
top: 100px;
margin-bottom: 10px;
}
.menuSeperator {
padding: 2px;
background-color: var(--cwru-blue);
border-style: solid;
border-width: 1px;
}
.menuSeperator > .k-menu-link-text {
font-style: italic;
color: whitesmoke;
white-space: normal;
}
.menuItem {
font-style: italic;
color: whitesmoke;
background-color: var(--cwru-blue);
}
.menuExpandable {
color: var(--cwru-blue);
white-space: normal;
min-width: 200px;
}
.k-menu, .k-menu-link-text {
font-size: 16px;
color: black;
padding: 2px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#leftMenu").height(window.innerHeight - 120)
$(window).resize(function () {
$("#leftMenu").height(window.innerHeight - 120)
});
});
</script>
<div id="menuContainer">
@(Html.Kendo().Menu()
.Name("leftMenu")
.HoverDelay(200)
.Orientation(MenuOrientation.Vertical)
.Direction(MenuDirection.Right)
.Scrollable(true)
.Items(items =>
{
foreach (var menuEntryGroup in Model.AllowedPages.Where(ap => ap.parent_id == null).GroupBy(ap => ap.menucategory_id))
{
//menu category
items.Add().Text(menuEntryGroup.First().menucategory.name)
.LinkHtmlAttributes(new { @class = "menuSeperator" }).HtmlAttributes(new { @class = "menuItem" });
foreach (var menuEntry in menuEntryGroup)
{
//top level items.
items.Add().Text(menuEntry.name).Url((pathBase == "/" ? "" : pathBase) + "/" + menuEntry.controller + "/" + menuEntry.Viewer)
.Items(subitem =>
{
foreach (var subentry in Model.AllowedPages.Where(ap => ap.parent_id == menuEntry.id))
{
//second level items
subitem.Add().Text(subentry.name).Url((pathBase == "/" ? "" : pathBase) + "/" + subentry.controller + "/" + subentry.Viewer).LinkHtmlAttributes(new { @class = "menuExpandable" })
.Items(subsubitem =>
{
foreach (var subsubentry in Model.AllowedPages.Where(ap => ap.parent_id == subentry.id))
{
//third level items
subsubitem.Add().Text(subsubentry.name).Url((pathBase == "/" ? "" : pathBase) + "/" + subsubentry.controller + "/" + subsubentry.Viewer);
}
});
}
});
}
}
})
)
</div>
Hello Anita,
Currently, there is a regression bug related to the scrollable Menu component, where the longer submenus are not scrollable:
https://feedback.telerik.com/kendo-jquery-ui/1647298-scrollbar-in-submenu-in-scrollable-menu-not-present
If this is the case at your end, while the official fix is available, I would recommend disabling the Scrollable() option.
Best,
Mihaela