When using Template there's no way to trigger a close of the ContextMenu when clicking inside the template.
---
ADMIN EDIT
Marked as duplicated, because the feature will be implemented in ContextMenu and Menu component at once. For better tracking, we will keep the item logged for the Menu component.
Sample workaround:
@inject IJSRuntime _js
<script suppress-error="BL9992">
function hideMenu(menuClass) {
setTimeout(function () {
var menuParent = document.querySelector("." + menuClass);
if (menuParent) {
menuParent.dispatchEvent(new KeyboardEvent('keydown', { 'key': 'Escape' }));
}
}, 50);
}
</script>
<div class="menuTarget">
right click this target
</div>
<style>
.menuTarget {
width: 100px;
background: yellow;
margin: 50px;
}
</style>
<TelerikContextMenu Data="@MenuItems" @ref="@TheContextMenu" Selector=".menuTarget" Class="@menuClass">
<Template>
<TelerikButton OnClick="@HideMenu">Hide Menu</TelerikButton>
</Template>
</TelerikContextMenu>
@code {
string menuClass = "my-context-menu";
async Task HideMenu()
{
await _js.InvokeVoidAsync("hideMenu", menuClass);
}
// sample data binding
public List<ContextMenuItem> MenuItems { get; set; }
TelerikContextMenu<ContextMenuItem> TheContextMenu { get; set; }
bool UseSpecialMenu { get; set; }
async Task ShowContextMenu(MouseEventArgs e)
{
await TheContextMenu.ShowAsync(e.ClientX, e.ClientY);
}
// generate sample data for the listview and the menu
protected override void OnInitialized()
{
MenuItems = new List<ContextMenuItem>()
{
new ContextMenuItem
{
Text = "More Info",
Metadata = "info"
},
new ContextMenuItem
{
Text = "Special Command",
Metadata = "special"
}
};
base.OnInitialized();
}
public class ContextMenuItem
{
public string Text { get; set; }
public string Metadata { get; set; }
}
}
---
Hello,
Please consider an OnHide event for the ContextMenu. Here is a scenario - the target's styles change when the Menu opens. There is no reliable built-in event that one can use to revert the styles back. The user can click on a Menu item, but they can also click somewhere else or hit Escape.
Currently, a possible workaround is to listen for clicks and keypresses on the document with JavaScript:
Example use case is to have a context menu bound to a form item. The form item would re-render on submit that would change the dom element.
Example: https://blazorrepl.telerik.com/mxEnmnaV09ahp4EB15
Workaround: https://blazorrepl.telerik.com/mxkxwHOr08fcjSKK39
Please allow the context menu to be used without a data source and run using templates only.
That way we can use this control to provide a popup of items that we can control, and don't have to set it up with sometime of blank list of items that are never used.