It is a very common occurrence to need to open a menu link in a new tab. Currently the prescribed way to do this is to create a Template for the Menu Items. This involves a lot of manual implementation (verbose template code, helper methods, changing the menu item object to not use the Url property so as to override the default UrlField behavior). This is a lot of extra work to accomplish a very common and simple task.
I propose that a new property be introduced to the Menu component (to be added to Menu Items) - a boolean field that defines whether or not to open the link in a new tab (i.e. "NewTab", or "External", or something of the like). It could default to false so that, in most cases, it could be ignored. But if set to true, the Menu component would handle adding "target='_blank'" and "rel='noopener noreferer'" to the link, while leaving all of the other functionality and styling in place.
It would greatly simplify the usage. And I would suggest that every programming who is building navigation menus would have a case where it's needed.
I would think, though I haven't looked at the core code yet, that this would be a relatively simple feature to add.
public class MenuItem
{
public string Text { get; set; }
public ISvgIcon? Icon { get; set; }
public string Url { get; set; } = string.Empty;
public bool NewTab { get; set; } = false;
public List<MenuItem>? Items { get; set; }
public MenuItem(string text, ISvgIcon? icon, string url, bool newTab, List<MenuItem>? items)
{
Text = text;
Icon = icon;
Url= url;
NewTab = newTab;
Items = items;
}
}
Hello,
If I disable a Menu item at runtime, it prohibits access to child items via the mouse, but still opens the child group of items if I use the keyboard navigation.
Here is a test page with a workaround included (which is to recreate the Menu).
<TelerikButton OnClick="@DisableItem">Disable Services item</TelerikButton>
<TelerikButton OnClick="@EnableItem">Enable Services item</TelerikButton>
@if (ShowMenu)
{
<TelerikMenu Data="@MenuItems" />
}
@code {
List<MenuItem> MenuItems { get; set; }
bool ShowMenu { get; set; } = true;
async Task DisableItem()
{
MenuItems.Find(x => x.Text == "Services").Disabled = true;
MenuItems = new List<MenuItem>(MenuItems);
// workaround start
ShowMenu = false;
await Task.Delay(1);
ShowMenu = true;
// workaround end
}
async Task EnableItem()
{
MenuItems.Find(x => x.Text == "Services").Disabled = false;
MenuItems = new List<MenuItem>(MenuItems);
}
protected override void OnInitialized()
{
MenuItems = new List<MenuItem>()
{
new MenuItem()
{
Text = "Company",
Items = new List<MenuItem>()
{
new MenuItem()
{
Text = "Overview"
},
new MenuItem()
{
Text = "Events"
}
}
},
new MenuItem()
{
Text = "Services",
Items = new List<MenuItem>()
{
new MenuItem()
{
Text = "Consulting"
},
new MenuItem()
{
Text = "Education"
}
}
}
};
base.OnInitialized();
}
public class MenuItem
{
public string Text { get; set; }
public bool Disabled { get; set; }
public List<MenuItem> Items { get; set; }
}
}
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)
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
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)