Planned
Last Updated: 19 Sep 2021 14:50 by ADMIN
Scheduled for 3.0.0
Created by: Alberto
Comments: 5
Category: Menu
Type: Feature Request
27

At the moment, when you click a menu item it does not hide.

A method can be exposed to hide the expanded items that can be invoked from the OnClick handler.

---

ADMIN EDIT

Here is a potential workaround - when the menu item is clicked, we use a little bit of JS to go over the menu items at the root and make the browser think that the user moved the mouse away from them which is the signal for the menu dropdowns to hide. Do test this carefully before using in production, though.

@inject IJSRuntime _js

@* Move this script together with other scripts in the project, it is here to make the snippet shorter *@
<script suppress-error="BL9992">
    function closeMenu() {
        setTimeout(function () {
            var mouseLeaveEvent = new Event('mouseleave');
            var rootNodes = document.querySelectorAll("li.k-menu-item");
            rootNodes.forEach(function (elem) { elem.dispatchEvent(mouseLeaveEvent); })
        }, 30);
    }
</script>

<TelerikMenu Data="@MenuItems"
                ItemsField="@nameof(MenuItem.SubSectionList)"
                TextField="@nameof(MenuItem.Section)"
                UrlField="@nameof(MenuItem.Page)"
                OnClick="@((MenuItem item) => OnClickHandler(item))">
</TelerikMenu>

@code {
    public List<MenuItem> MenuItems { get; set; }

    async Task OnClickHandler(MenuItem item)
    {
        await _js.InvokeVoidAsync("closeMenu");
    }



    public class MenuItem
    {
        public string Section { get; set; }
        public string Page { get; set; }
        public List<MenuItem> SubSectionList { get; set; }
    }

    protected override void OnInitialized()
    {
        MenuItems = new List<MenuItem>()
                {

            new MenuItem()
            {
                Section = "fetchdata",
                Page = "fetchdata"

            },
            new MenuItem()
            {
                Section = "counter",
                Page = "counter"
            },

// sample URLs for SPA navigation
new MenuItem()
{
    Section = "Company",
    SubSectionList = new List<MenuItem>()
                        {
        new MenuItem()
        {
            Section = "Overview",
            Page = "fetchdata"
        },
        new MenuItem()
        {
            Section = "Events",
            Page = "fetchdata"
        },
        new MenuItem()
        {
            Section = "Careers",
            Page = "counter"
        }
    }
},
// sample URLs for external navigation
new MenuItem()
{
    Section = "Services",
    SubSectionList = new List<MenuItem>()
                        {
        new MenuItem()
        {
            Section = "Consulting",
            Page = "counter"
        },
        new MenuItem()
        {
            Section = "Education",
            Page = "fetchdata"
        }
    }
},
new MenuItem()
{
    Section = "Contact",
    Page = "counter"
}
};

        base.OnInitialized();
    }
}

---

Unplanned
Last Updated: 09 Sep 2021 02:59 by Tech
Created by: khashayar
Comments: 1
Category: Menu
Type: Feature Request
20
If you stop hovering a menu it gets closed.  What i want is that when i click on a menu item (the menu must be outside of the @Body, of course, for navigation to not affect it), it should stay open and even if it's hovered or not - like the popup of drop down when you click on the expand arrow it gets open and when dropdown looses focus the popup gets closed.
Duplicated
Last Updated: 03 Sep 2021 16:27 by ADMIN
Created by: Jeremy
Comments: 1
Category: Menu
Type: Feature Request
0

I'd like to be able to build a custom menu that contains other controls and that is similar to the ones on the grid column menu but usable from anywhere.

The closest I can get with Telerik controls is the Menu with custom templates, but ideally I could anchor the menu to a button that has a custom icon or text (vs hovering over a hyperlink)

Unplanned
Last Updated: 15 Jun 2021 14:25 by ADMIN
Created by: Georgia
Comments: 0
Category: Menu
Type: Feature Request
2

The Menu uses the NavigationManager to go to the pages that are assigned to the individual MenuItem objects. Is there a way to pass the "force load" value to these menu items?

 

-------------------- ADMIN EDIT -------------------- 

You can work around the issue if you skip setting Url field of the items that you want to force load and set your own property. Then, handle OnClick of the menu items and check if this property is set and manually call the navigation manager for the URL. You can see the code for this approach below:

public List<MenuItem> MenuItems { get; set; }

protected void OnClickHandler(MenuItem item)
{
    if (item.ForceLoadUrl != null)
    {
        navManager.NavigateTo(item.ForceLoadUrl, true);
    }
}

public class MenuItem
{
    public string Text { get; set; }
    public string Url { get; set; }
    public string ForceLoadUrl { get; set; }
    public List<MenuItem> Items { get; set; }
}

protected override void OnInitialized()
{
    MenuItems = new List<MenuItem>()
    {
        new MenuItem()
        {
            Text = "site.css",
            ForceLoadUrl = "/css/site.css"
        },
        new MenuItem()
        {
            Text = "Counter",
            Url = "/counter"
        },
        new MenuItem()
        {
            Text = "Fetch Data",
            Url = "/fetchdata"
        }
    };

    base.OnInitialized();
}

Planned
Last Updated: 30 Apr 2021 12:34 by ADMIN
Created by: JeffSM
Comments: 4
Category: Menu
Type: Feature Request
21

Dear,

 

the blazor menu UI adapt it self for hamburguer menu when mobile?

best,

 

Jeff

---

ADMIN EDIT

I have attached to this post a sample implementation that you can use as base. Another option is to add more conditional markup to remove the menu altogether and replace it with another structure for small screens. A third option is to use the Drawer component as it collapses anyway (see here and here).

----

Completed
Last Updated: 11 Mar 2021 09:09 by ADMIN
Release 2.23.0

Use any demo and rapidly hover between parent menu items:

Unplanned
Last Updated: 05 Mar 2021 19:32 by ADMIN

Implementation of one or both of these features:

- Screen boundary detection: The list of child items expands to the opposite direction when necessary to prevent screen boundaries from being crossed.

- ExpandDirection: Gets or sets the direction in which child items will open.

Completed
Last Updated: 19 Jan 2021 10:14 by ADMIN
Release 2.21.0
Created by: Justin
Comments: 0
Category: Menu
Type: Bug Report
1
The menu gets the focus off other components such as TextBox and NumericTextBox on every keystroke in the input area. 
Unplanned
Last Updated: 14 Dec 2020 08:51 by ADMIN
Expose an OnItemRender event, which is raised for each menu item. The args will allow setting a Class, that will be applied at the topmost element of the item iteself, allowing full customization, as well as PopupClass, which is applied to the topmost element of the item popup.
Completed
Last Updated: 09 Nov 2020 07:27 by ADMIN
Release 2.20.0
I would expect that setting HasChildren to false would prevent sub-menus and expand arrows from the current item. It does not. I am using hierarchical data binding.
Completed
Last Updated: 10 Jul 2020 07:03 by ADMIN
Release 2.16.0
Created by: Jaco
Comments: 1
Category: Menu
Type: Feature Request
3
I don't see any examples with a menu item separator.  Is there a way to create a menu item separator?
Unplanned
Last Updated: 06 May 2020 21:31 by ADMIN
Created by: Sylvain
Comments: 1
Category: Menu
Type: Feature Request
6

Is there a way to not create menu programmatically but only using "html" elements ? Something like this :

 <TelerikMenu>

    <TelerikMenuItem Text="File">

        <TelerikMenuItem Text="Open" OnClick="@OnFileOpenMenuClick"/>

        <TelerikMenuItem Text="Save" OnClick="@OnFileSaveMenuClick"/>

    </TelerikMenuItem>

 </TelerikMenu>

 


Completed
Last Updated: 21 Apr 2020 15:27 by ADMIN
Release 2.11.0
Created by: Simon
Comments: 1
Category: Menu
Type: Bug Report
1

If the collection you pass to the Menu Data parameter is null or empty, you will get an exception like this

System.ArgumentNullException: Value cannot be null. (Parameter 'source')
   at System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument)
   at System.Linq.Enumerable.ToList[TSource](IEnumerable`1 source)
   at Telerik.Blazor.Components.TelerikMenu`1.<BuildRenderTree>b__0_0(RenderTreeBuilder __builder2)
Unplanned
Last Updated: 16 Apr 2020 09:37 by ADMIN
Created by: Simon
Comments: 1
Category: Menu
Type: Feature Request
5

I need to style the entire menu item, not just my template, but there are classes from the menu that I cannot override with my code or template.

 

Duplicated
Last Updated: 02 Mar 2020 13:24 by ADMIN
Created by: Allan
Comments: 3
Category: Menu
Type: Bug Report
0

Using the demo on https://demos.telerik.com/blazor-ui/menu/index if you select Item 1 with the left mouse button, both Item 1 and Item 2 drop downs open, see attached images

 

 

Unplanned
Last Updated: 05 Sep 2019 13:27 by ADMIN
Created by: Alberto
Comments: 0
Category: Menu
Type: Feature Request
18
The show event of the child items should be configurable. It must be possible to expand them on click only, not when passing over them with the mouse.