Telerik Forums
UI for ASP.NET Core Forum
1 answer
9 views

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?

 

Ivan Danchev
Telerik team
 answered on 26 Feb 2024
0 answers
12 views

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>
Tyler
Top achievements
Rank 1
 asked on 18 Feb 2024
1 answer
23 views

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?

Mihaela
Telerik team
 answered on 24 Nov 2023
1 answer
30 views

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?

 

Eyup
Telerik team
 answered on 17 Oct 2023
1 answer
400 views

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.

Alexander
Telerik team
 answered on 19 Jan 2023
1 answer
1.2K+ views

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.

Aleksandar
Telerik team
 updated answer on 07 Dec 2022
1 answer
323 views

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.

 

Aleksandar
Telerik team
 answered on 07 Jul 2022
1 answer
56 views

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?

 

Aleksandar
Telerik team
 answered on 29 Jun 2022
2 answers
203 views

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?

Daniel
Top achievements
Rank 3
Iron
Iron
Iron
 updated answer on 26 Apr 2022
1 answer
270 views

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

Mihaela
Telerik team
 answered on 28 Jan 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?