Hi

I have a data bound menu component where I would like to override the styles of individual items - namely at the moment I would like to make some bold.

What I actually want to do is to render a separator, then a bold header, and then a normal weight list of options - something like :

-----------------------------
Recent Customers
Customer 1
Customer 2
Customer 3
-----------------------------

I do not want them to be a sub menu ideally. I am struggling to work out how to set the class/style of individual menu items.

This is my code for rendering the menu currently, I will add another property to item/subitem as a flag to denote requiring to be bold :

            @(
            Html.Kendo().Menu()
            .Name("mainMenu")                
            .BindTo(Model.Menus.Where(s => s.ParentMenuId == 0), mappings =>
            {
                mappings.For<Welcomm_CRM.Core.Application.Menu>(binding => binding // Define the first level of the Menu.
                .ItemDataBound((item, type) => // Define the mapping between the Menu item properties and the model properties.
                {
                    item.Text = type.MenuTitle;   
                    if (type.MenuSource == 999999)
                    {
                        item.LinkHtmlAttributes.Add(type.ControllerName, type.ActionName);
                    }
                    else if (type.MenuSource == 999998)
                    {
                        item.Separator = true;
                    }
                    else if (type.MenuSource == 0)
                    {
                        item.Url = @Html.Encode(type.Url);
                    }
                }
                )
                .Children(type => Model.Menus.Where(s => s.ParentMenuId == type.MenuId)));
                mappings.For<Welcomm_CRM.Core.Application.Menu>(binding => binding
                .ItemDataBound((item, subtype) =>
                {
                    item.Text = subtype.MenuTitle;                        
                    if (subtype.MenuSource == 999999)
                    {
                        item.LinkHtmlAttributes.Add(subtype.ControllerName, subtype.ActionName);
                    }
                    else if (subtype.MenuSource == 999998)
                    {
                        item.Separator = true;
                    }
                    else
                    {
                        item.Url = @Html.Encode(subtype.Url);
                    }
                })
                );
            })
            )

Good evening,

I've just upgraded my project from using Telerik UI ASP.NET Core 2022.1.301 to 2024.3.806.

I previously used this article to add icons to my menu items:

Add Font Icons to Menu Items - Kendo UI Menu - Kendo UI for jQuery (telerik.com)

After the upgrade, the icons are no longer appearing.

I'm using the following:

menu.Add().Encoded(false).Text("<span class=\"k-icon k-font-icon k-i-gears\"></span>&nbsp;Site Administration").Url("~/Admin")
menu.Add().Encoded(false).Text("<span class=\"k-icon k-font-icon k-i-user\"></span>&nbsp;" + User.Identity.Name)

I appreciate that the way the icons works has changed since 2023 R3, but most of the icons seem to work without me having to install anything extra (Font Icons in the Telerik and Kendo UI Design System | Design System Kit).  For example, this works:

columns.Command(command => command.Custom("View").Click("openDetailsPage").IconClass("k-icon k-i-hyperlink-open")).Width(80);

Is this because the Telerik.FontIcons and Telerik.SvgIcons 3.0.0 packages are showing under my project dependencies?

Any clarification you can give would be much appreciated.

Kind regards,

Richard

I have a menu component on my view, which gives access to actions that relate to the current record on screen - so in effect I need to have the menu items have URLs similar to the following :

/Controller/Action/{cust_id}/{action_type}

Where {cust_id} will relate to the main record loaded, and {action_type} is rendered from a list within the model of all the available actions. The text for the URLs need to show the action name.

I have tried binding my menu to the Model as per the code below - is there a  recommended way to pass in the variable elements, or do I have to abandon the ActionName and ControllerName below, and just construct the whole Url manually? I have put pseudo code in to show what I mean :

@(
Html.Kendo().Menu()
                .Name("menu") // The name of the Menu is mandatory. It specifies the "id" attribute of the widget.
                .BindTo(Model.TaskTypes, mappings =>
                {
                    mappings.For<CRM.Core.CRM.TaskType>(binding => binding // Define the first level of the Menu.
                        .ItemDataBound((item, type) => // Define the mapping between the Menu item properties and the model properties.
                            {
                                item.Text = type.TaskTypeName;
                                item.ActionName = "New";
                                item.ControllerName = "Task";
                                item.SomePropertyHere = model.CustomerId;
                                item.SomeOtherPropertyHere = type.TaskTypeId;
                            }));

                })
)

I define my menu using taghelpers.  I see that the HTML helpers allow security trimming with the HideParent feature, but it appears that the taghelpers only support a boolean for security trimming and hence no way to enable the HideParent feature.  Is that true? Or is there a way to enable it?

Additionally, is there any server-side hook that can be used with the taghelper where I can perform custom filtering after the security trimming has been run but before the menu has been rendered to HTML?   This would be a workaround if HideParent is not available, as well as allow for custom filtering such as removing extra menu separators, etc.

For my app I ideally would like to achieve the following layout :

• Fixed / static header with links to most commonly used areas of the app, each with expandable sub links to more specific locations
  
• Left hand slide menu - ideally with some icons down the left for quick access to a section, or able to be expanded via an icon which is in the header - each section would also need to have expandable links ideally
  
• Ideally a fixed / static footer, although this is less important

So am I right in thinking this is the way to go about it?

Header - this would be an app bar component,

Expandable links within the header - a menu component embedded within the app bar for the expandable links

Left bar - this would be a drawer component so it can show the icons and be expanded on demand - would this also need an embedded menu component so each section can expand?

Thanks

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>

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?

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.

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?