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
@* Move to a real location, this hack overrides Blazor component errors to keep the snippet concise *@
<script suppress-error="BL9992">
function hideMenu(menuClass) {
setTimeout(function () {
var menu = document.querySelector("." + menuClass);
var menuParent = findParentByClass(menu, "k-animation-container");
if (menuParent) {
menuParent.dispatchEvent(new KeyboardEvent('keydown', { 'key': 'Escape' }));
}
}, 50);
}
function findParentByClass(elem, targetClass) {
var cur = elem.parentNode;
while (cur && !cur.classList.contains(targetClass)) {
cur = cur.parentNode;
}
return cur;
}
</script>
<div class="menuTarget">
right click this target
</div>
<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; }
}
}
<style>
.menuTarget {
width: 100px;
background: yellow;
margin: 50px;
}
</style>
---