Duplicated
Last Updated: 19 Sep 2021 14:53 by ADMIN
Christopher
Created on: 02 Dec 2020 14:42
Category: ContextMenu
Type: Feature Request
11
Add Hide and/or HideAsync method to ContextMenu

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; }
    }
}

---

Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
1 comment
ADMIN
Marin Bratanov
Posted on: 03 Feb 2021 19:19

Hi all,

I have posted a workaround in the opener post.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.