Menu Rendering Issue

[Tyler]

I'm using a Razor partial to create a navigation menu being served from a database. It's rendering the data from the database without issue, however, the children items are being displayed instead of only showing on hover / click.

When I load the app, the children items are already showing and attempting to collapse the About Root by clicking it has no result. Is it possible that the issue is related to Partial rendering?

@using Data.Tables
@using Data.Repositories
@using Microsoft.Extensions.Caching.Memory
@using Kendo.Mvc.UI
@inject NavigationRepository NavigationRepository
@inject IMemoryCache memoryCache

 

if (memoryCache.TryGetValue(NavigationRepository.cacheKey, out List<Navigation> navItems))
{
@(
                Html.Kendo().Menu()
                        .Name("navigation")
                        .Items(items =>
                        {  //Render data that is loaded into .NET IMemoryCache on startup and kept up-to-date through the repository
                            foreach (var nav in navItems.Where(q => q.ParentNavigationId == null)) //Renders top level objects only
                            {
                                items.Add()
                                    .Text(nav.Text)
                                    .Url(nav.Link)
                                    .Items(children =>
                                    { //Render child objects by matching elements that reference the top level object Id
                                        foreach (var subNav in navItems.Where(q => q.ParentNavigationId == nav.Id))
                                        {
                                            children.Add()
                                                .Text(subNav.Text)
                                                .Url(subNav.Link);
                                        }
                                    });
                            }
                        })
                        .Direction(MenuDirection.Bottom)
                        .Orientation(MenuOrientation.Horizontal)
                        .OpenOnClick(true)
                        .CloseOnClick(true)
                        .HoverDelay(100)
                        .Animation(a =>
                        {
                            a.Enable(true);
                            a.Open(effect =>
                            {
                                effect.Expand(ExpandDirection.Vertical);
                                effect.Duration(500);
                            });
                            a.Close(effect =>
                            {
                                effect.Duration(300);
                            });
                        })
                        .Deferred(true) // JS error of kendo not found if this is not enabled
)
}

 

This partial is then rendered into the _Layout.cshtml through the below code.

<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
    <partial name="_NavigationPartial" />
    <partial name="_LoginPartial" />
</div>

[Mihaela]

Hi Tyler,

I have tested a similar setup locally, and it appears that the child items are rendered as expected at my end. Would you try modifying the attached sample based on your setup to reproduce the behavior you are experiencing?

Thank you for your cooperation.

Best,

Mihaela

 

[Tyler]

Thanks for that, Mihaela. When I injected some of my custom classes for databases in it did work. I'm using .NET 8 for my project and MVC. Is it possible that this is a compatibility issue between .NET versions or an issue in using the ASP.NET Core plugins in views?

Other than you using .NET 6 and Pages, there appears to be no difference between our implementations.

[Mihaela]

Hi Tyler,

I think that the issue may be related to the Menu component itself or any related custom JS logic rather than the .NET version. Would you please let me know which Telerik UI for ASP.NET Core version you use?

Best,

Mihaela