Duplicated
Last Updated: 19 Sep 2021 14:53 by ADMIN
Created by: Christopher
Comments: 1
Category: ContextMenu
Type: Feature Request
7

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>

 

---

Unplanned
Last Updated: 15 Sep 2021 14:07 by ADMIN

Based on the sample app "BlazingCoffee" (where you can reproduce this bug), when I add a ContextMenu in the grid Sales, using OnRowContextMenu of TelerikGrid, there's an asynchrony in the behavior of telerik-blazor.js when it open the popup of the ContextMenu and when it try to focus it.

The bug consists in the fact that when I have a vertically long grid, with an active scrollbar, if I right-click on the first row to open the ContextMenu, the app first try to focus it, does not find it, then scroll the page to the bottom and after all this it open the popup of the ContextMenu in the right position. So you need to scroll back to row where you right-clicked to visualize the ContextMenu. 

In general, it try always to focus to the first element of the ContextMenu and after that it open the new ContextMenu in the right position, letting it focus the page in the wrong position.

WORKAROUND:
To solve this wrong behavior I deleted the last line of code of the method "focusFirstMenuItem" of "telerik-blazor.js". If I remove "t&&t.focus()", the ContextMenu works perfectly, without unwanted scrolling.

I hope you can resolve this soon.

 

Angelo Marzullo

 

P.S. Telerik version: 2.24.0


Unplanned
Last Updated: 10 Apr 2021 18:18 by ADMIN
Created by: Marin Bratanov
Comments: 0
Category: ContextMenu
Type: Bug Report
1

The Class does not render on the topmost element so you can't properly set css rules like z-index to the context menu.

A workaround is to set a higher z-index to all animation containers with a rule like this:

    .k-animation-container {
        z-index: 987654;
    }

Completed
Last Updated: 02 Feb 2021 09:23 by ADMIN
Created by: Richard
Comments: 1
Category: ContextMenu
Type: Feature Request
0

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.

Completed
Last Updated: 28 Jan 2021 09:51 by ADMIN
Release 2.21.1
Created by: Ivan
Comments: 4
Category: ContextMenu
Type: Bug Report
1
I am using the context menu to open a modal window. When I click on the menu item the component throws an exception. 
Completed
Last Updated: 14 Dec 2020 07:54 by ADMIN
Release 2.21.0
Created by: Patrik Madliak
Comments: 0
Category: ContextMenu
Type: Feature Request
1
I would like that the Context Menu has the Class parameter to make cascading custom CSS styles easier.
Unplanned
Last Updated: 06 Aug 2020 10:37 by ADMIN
Created by: Robert
Comments: 1
Category: ContextMenu
Type: Bug Report
3