I am migrating a WebForms application to ASP.NET Core MVC
In that application a radmenu is used.
Radmenu had a string property "value".
A sort of free to use property.
Is there any way to achieve this in a core MenuItem?
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
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">Pasting this code on a Razor page should help illustrate the problem:
<div id="strangeStore">
@(Html.Kendo().Menu()
.Name("Menu")
.Animation(animation => animation.Enable(false))
.Scrollable(true)
.OpenOnClick(click => click.RootMenuItems(true).SubMenuItems(true))
.Items(items =>
{
items.Add()
.Text("Products")
.Items(children =>
{
children.Add().Text("Furniture")
.Items(innerChildren =>
{
innerChildren.Add().Text("Tables")
.Items(iic =>
{
iic.Add().Text("Red");
iic.Add().Text("Green");
iic.Add().Text("Blue");
});
innerChildren.Add().Text("Chairs")
.Items(iic =>
{
iic.Add().Text("42");
iic.Add().Text("1337");
});
innerChildren.Add().Text("Sofas")
.Items(iic =>
{
iic.Add().Text("Soft");
iic.Add().Text("Hard");
});
innerChildren.Add().Text("Beds")
.Items(iic =>
{
iic.Add().Text("deadbeef");
iic.Add().Text("cafebabe");
});
});
children.Add().Text("Decor")
.Items(innerChildren =>
{
innerChildren.Add().Text("Curtains");
innerChildren.Add().Text("Blinds");
innerChildren.Add().Text("Rugs");
innerChildren.Add().Text("Carpets");
});
});
items.Add().Text("Events");
})
)
</div>
To see the problem, click in sequence: Products, Furniture, Tables, Decor
Expected result: Products and its Decor child menu is open
Actual result: the Tables child menu is also open
Changing to ".Scrollable(false)" seems to fix the problem, but makes it hard to use a multi-level menu with many items on small screens😅
Any other suggestions on how to fix this?
I am porting a WebForms application to ASP.NET Core MVC, and I'm having trouble moving from the RadMenu (Telerik UI for .NET AJAX) to the menu component in Telerik UI for ASP.NET Core. After going down many blind alleys I'm stumped as to how to bind my data (an array of a custom type which includes menu text, target URLs, and more). My menu has a collection of top-level items and some of them have sub-menu items. It seems like this should be pretty straightforward but I can't find an example or documentation that explains how to bind my menu to an array.
I think I need to do something like this:
@(Html.Kendo().Menu()
.Name("MyMenu")
.DataTextField("Text")
.Action(<action>)
.DataSource(???)
.Model(model => model.Children("MenuItems"))) <<<--- This came from an example, I don't know what it does)
)
Can someone point me to a simple example?
We have a context menu on an icon at the right of a grid. When we open a context menu, it initially opens with much of the menu hidden off the edge of the screen (see first attached image). If I open it again, the open position shifts so the whole menu is visible.
Ideally, what we would like is when the context menu opens, it is rendered so the right edge of the menu is aligned with the mouse cursor position rather than the left (don't really care if the menu text is left or right justified) (see second attached image)
I tried wrapping the context menu with a div which include the k-rtl class, but this made no difference.
Is this possible?
Currently using tagHelpers with UI for ASP.NET Core 2022.3.1109.
I have searched for this everywhere and its not easy to get the right help here .
For most controls we have a demo/example. But there is not proper example for this.
Say I am developing a web app and I want a Layout page that can be used across all pages.
Telerik Drawer => I tried to used this. But I believe drawer is not intended for this purpose.
Telerik Menu => no proper example where it can be used as a side bar. I can see one under the kendo ui javascript menu, but not one with asp doe net core.
A working example of a side menu containing a list of items would be really helpful.
Hope I'm asking this question in the right place.
I have this working:
@(Html.Kendo().Menu()
.Name("QmsMenu")
.DataTextField("Title")
.DataSource(ds => ds.Read("Menu_Read", "Menu")
.Model(model => model.Children("MenuItems")))
)
Reference: https://demos.telerik.com/aspnet-core/menu/remote-data-binding
However, I can't figure out how to dynamically add links to each of the items in a Menu binding to remote data.
The payload returned from the server is providing the controller name and controller action method name for each of the menu items. I would like to add these values to the code above enabling a user to click on a menu link and be taken to a different page in the web application.
Would appreciate some help regarding this.
Currently changing projects over to core and the wrapper for context menus appears to be behaving differently:-
We initially add menu items disabled and then enable them as required in JS functions once the applicability of the menu items has been determined.
e.g.
.Items(items => { items.Add().Text("Complete") .HtmlAttributes(new { id = "CompleteID", title = "Complete" }) .Enabled(false); }
function EnableMenu(canComplete) { var menu = $("#@Model.HtmlID").data("kendoContextMenu"); menu.enable("#CompleteID", canComplete); }
This code works fine in the 2020 version of Kendo UI for ASP.NET MVC but not in the ASP.NET Core product.
The work around appears to be just to remove the .Enable(false) when creating the menu items and then the programmatic enabling/disabling works fine.
I couldn't see any documentation that indicated a change in behaviour so wanted to know if this an intentional change or a possible bug?
Hey guys,
in my project i'm using a horizontal kendo menu for navigation through the app. Since the page has to be responsive I have to enable the scroll feature. I do prefer the centered styling and here I'm running into an issue.
<div style="display: flex; flex-flow: column;">
<nav>
<kendo-menu name="menuNavigation" style="justify-content: center;">
<scrollable enabled="true" />
<items>
<menu-item text="@Namings.Request stellen">
<sub-items>
<menu-item text="@Namings.CustomerDepartment"></menu-item>
<menu-item text="@Namings.CustomerPrivatPerson"></menu-item>
<menu-item text="@Namings.CustomerClub"></menu-item>
</sub-items>
</menu-item>
<menu-item text="@Namings.OpenRequests"></menu-item>
<menu-item text="Laufende @Namings.Data.Loans"></menu-item>
<menu-item text="Fahnenlager"></menu-item>
<menu-item text="Kundendaten">
<sub-items>
<menu-item text="Personen">
<sub-items>
<menu-item text="@Namings.Crud.Read"></menu-item>
<menu-item text="@Namings.Crud.Create"></menu-item>
<menu-item text="@Namings.Crud.Update"></menu-item>
<menu-item text="@Namings.Crud.Delete"></menu-item>
</sub-items>
</menu-item>
<menu-item text="@Namings.CustomerClubs">
<sub-items>
<menu-item text="@Namings.Crud.Read"></menu-item>
<menu-item text="@Namings.Crud.Create"></menu-item>
<menu-item text="@Namings.Crud.Update"></menu-item>
<menu-item text="@Namings.Crud.Delete"></menu-item>
</sub-items>
</menu-item>
</sub-items>
</menu-item>
<menu-item text="Einstellungen">
<sub-items>
<menu-item text="Fahneneinstellungen & Preise"></menu-item>
<menu-item text="Archivierte @Namings.Data.Loans"></menu-item>
</sub-items>
</menu-item>
</items>
</kendo-menu>
</nav>
</div>
When the screen has smaller sizing, the left items of the menu will disappear without showing the scroll-to-the-left button. Scrolling to the right is still working. But the first items will be not reachable again.
This behaviour is caused by the marked line "justify-content: center". It enables that the menu items are centered but the scrolling functionality will be not working properly anymore.
I'm not the greatest css programmer, do you have an idea how to enable proper working scrolling for centered menu items?
Good afternoon,
I am using the latest version of Telerik ASP.NET Core (2022.1.119).
I am using the classic opal theme on my site. I have a responsive menu which collapses to the hamburger.
If I reference the common css file first the menus don't wrap correctly when the page width is reduced.
<link rel="stylesheet" href="~/lib/kendo/css/kendo.common.min.css" />
<link rel="stylesheet" href="~/lib/kendo/css/kendo.classic-opal.min.css" />
This configuration gives this:
Switching the configuration so that common css is after the classic opal theme makes it work:
However, having the common css second breaks the tabstrips - the outer borders of the tab no longer display, only the header tabs:
If I'm using kendo.classic-opal.min.css do I also need to use kendo.common.min.css, and if I do, why does this break the tabstrip? Apart from site.css, is there another css I need to reference?
Kind regards,
Richard