Completed
Last Updated: 13 Oct 2023 08:07 by ADMIN
Release 5.0.0 (15 Nov 2023) (R1 PI1)

When the menu shows on its own (it has a Selector and you right click that element), it tracks the z-index of other Telerik popups and has an inline z-index rule. This does not happen when you show it via its API (.ShowAsync()).

 

-----

ADMIN EDIT

A workaround could be using a CSS CLass to set a higher z-index to it, but there is an issue with that where it does not render high enough in the DOM: https://feedback.telerik.com/blazor/1514877-css-class-does-not-render-on-the-topmost-element. You can Vote for that and Follow it as well, and it contains a CSS workaround you can consider for this issue too. Note that it will affect all animation containers on the page.

Basic reproducible - showing a context menu on a grid row in a Window - the context menu is not visible behind the window (you can only see it partially in the last 1-2 rows).

 

<TelerikWindow Visible="true">
    <WindowContent>
        Copy code@using System.Collections.Generic
        @using System.Collections.ObjectModel

        <TelerikContextMenu @ref="@ContextMenuRef" Data="@MenuItems"
                            OnClick="@((MenuItem item) => ContextMenuClickHandler(item))">
        </TelerikContextMenu>

        <TelerikGrid Data="@GridData" @ref="@GridRef"
                     EditMode="@GridEditMode.Inline"
                     Height="500px"
                     Pageable="false"
                     OnCreate="@CreateItem" OnUpdate="@UpdateHandler"
                     OnRowContextMenu="@OnContextMenu"
                     SelectionMode="@GridSelectionMode.Multiple"
                     @bind-SelectedItems="@SelectedItems">
            <GridToolBar>
                <GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
            </GridToolBar>
            <GridColumns>
                <GridColumn Field=@nameof(SampleData.ID) Editable="false" />
                <GridColumn Field=@nameof(SampleData.Name) />
                <GridCommandColumn>
                    <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
                    <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
                </GridCommandColumn>
            </GridColumns>
        </TelerikGrid>

        @if (SelectedItems.Any())
        {
            <ul>
                @foreach (var item in SelectedItems)
                {
                    <li>@item.Name</li>
                }
            </ul>
        }

        @code {
            //data sources
            ObservableCollection<SampleData> GridData { get; set; }
            List<MenuItem> MenuItems { get; set; }
            IEnumerable<SampleData> SelectedItems { get; set; } = Enumerable.Empty<SampleData>();
            //metadata for the context menu actions
            SampleData SelectedPerson { get; set; }
            //component references so we can use their methods
            TelerikContextMenu<MenuItem> ContextMenuRef { get; set; }
            TelerikGrid<SampleData> GridRef { get; set; }

            // sample menu item class
            public class MenuItem
            {
                public string Text { get; set; }
                public string Icon { get; set; }
                public Action Action { get; set; }
                public string CommandName { get; set; }
            }

            // show the context menu for a particular row
            async Task OnContextMenu(GridRowClickEventArgs args)
            {
                var argsItem = args.Item as SampleData;

                SelectedPerson = argsItem;

                if (args.EventArgs is MouseEventArgs mouseEventArgs)
                {
                    await ContextMenuRef.ShowAsync(mouseEventArgs.ClientX, mouseEventArgs.ClientY);
                }
            }

            // sample handling of the context menu click
            async Task ContextMenuClickHandler(MenuItem item)
            {
                // one way to pass handlers is to use an Action, you don't have to use this
                if (item.Action != null)
                {
                    item.Action.Invoke();
                }
                else
                {
                    // or you can use local code to perform a task
                    // such as put a row in edit mode or select it
                    switch (item.CommandName)
                    {
                        case "BeginEdit": // read more at https://localhost/blazor-ui/components/grid/state#initiate-editing-or-inserting-of-an-item
                            var currState = GridRef.GetState();
                            currState.InsertedItem = null;
                            SampleData itemToEdit = SampleData.GetClonedInstance(GridData.Where(itm => itm.ID == SelectedPerson.ID).FirstOrDefault());
                            currState.OriginalEditItem = itemToEdit;
                            await GridRef.SetState(currState);
                            break;
                        case "ToggleSelect":
                            var selItems = SelectedItems.ToList();
                            if (SelectedItems.Contains(SelectedPerson))
                            {
                                selItems.Remove(SelectedPerson);
                            }
                            else
                            {
                                selItems.Add(SelectedPerson);
                            }
                            SelectedItems = selItems;
                            break;
                        default:
                            break;
                    }
                }
                SelectedPerson = null; // clean up
            }

            // generate data
            protected override void OnInitialized()
            {
                // context menu items
                MenuItems = new List<MenuItem>()
        {
            new MenuItem(){ Text = "Select", Icon="checkbox-checked", CommandName="ToggleSelect" },
            new MenuItem(){ Text = "Edit", Icon="edit", CommandName="BeginEdit" },
            new MenuItem(){ Text = "Delete", Icon="delete", Action = DeleteItem }
        };

                // generate data for the grid
                GridData = new ObservableCollection<SampleData>();
                var rand = new Random();

                for (int i = 0; i < 100; i++)
                {
                    GridData.Add(new SampleData()
                    {
                        ID = i,
                        Name = "Employee " + i.ToString(),
                    });
                }
            }


            // CUD operations for the grid

            async Task CreateItem(GridCommandEventArgs args)
            {
                var argsItem = args.Item as SampleData;

                // call the actual data service here

                argsItem.ID = GridData.Count + 1;

                GridData.Insert(0, argsItem);
            }

            void DeleteItem() // not async so it can be passed as an Action
            {
                var argsItem = SelectedPerson;

                // call the actual data service here

                GridData.Remove(argsItem);
            }

            async Task UpdateHandler(GridCommandEventArgs args)
            {
                var argsItem = args.Item as SampleData;

                // call the actual data service here

                var index = GridData.ToList().FindIndex(i => i.ID == argsItem.ID);
                if (index != -1)
                {
                    GridData[index] = argsItem;
                }
            }

            public class SampleData
            {
                public int ID { get; set; }
                public string Name { get; set; }


                public override bool Equals(object obj)
                {
                    if (obj is SampleData)
                    {
                        return this.ID == (obj as SampleData).ID;
                    }
                    return false;
                }

                public SampleData()
                {

                }

                public SampleData(SampleData itmToClone)
                {
                    this.ID = itmToClone.ID;
                    this.Name = itmToClone.Name;
                }

                public static SampleData GetClonedInstance(SampleData itmToClone)
                {
                    return new SampleData(itmToClone);
                }
            }
        }
    </WindowContent>
</TelerikWindow>

 

Unplanned
Last Updated: 19 Sep 2023 07:50 by Miroslav
Created by: Miroslav
Comments: 0
Category: ContextMenu
Type: Bug Report
2

If you open a child menu via the keyboard, you can then hover over another parent and open a second submenu. The problem can be reproduced in the live demo.

===

ADMIN EDIT

===

The issue targets the Menu component as well.

Unplanned
Last Updated: 14 Aug 2023 08:22 by ADMIN
Created by: Robert
Comments: 1
Category: ContextMenu
Type: Bug Report
3
 
Completed
Last Updated: 03 Jul 2023 11:58 by ADMIN
Release 4.4.0 (07/19/2023) (R3 PI1)

Try to click an item in the context menu by clicking the icon instead of the text. The click doesn't register. It happens only with SVG icons.

Unplanned
Last Updated: 26 Apr 2023 13:23 by Jakub
Created by: Jakub
Comments: 0
Category: ContextMenu
Type: Feature Request
7
I'd like to prevent the Context Menu from closing when a user clicks on a parent item. The default behavior in most MS applications is that the Context Menu doesn't close after clicking on a parent item.
Completed
Last Updated: 18 Apr 2023 14:07 by ADMIN
Release 4.2.0 (04/26/2023)
Created by: Claudio
Comments: 0
Category: ContextMenu
Type: Feature Request
1
Pressing the "Reset" button does not update the textbox content. See: REPL link.
Unplanned
Last Updated: 23 Mar 2023 07:10 by Nathan
Created by: Nathan
Comments: 0
Category: ContextMenu
Type: Feature Request
2

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

Unplanned
Last Updated: 11 Jan 2023 12:34 by ADMIN
Created by: Abhishek
Comments: 0
Category: ContextMenu
Type: Feature Request
4

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:

https://blazorrepl.telerik.com/mclcPUbJ49jerlsh57

Unplanned
Last Updated: 16 Dec 2022 16:48 by Nate
Created by: Nate
Comments: 0
Category: ContextMenu
Type: Feature Request
2
Is it possible to get the same slide-down animation in the right-click context menu, that you see when you click one of the column filters in Grid? If not can you please add a feature request for that?
Unplanned
Last Updated: 28 Jul 2022 07:20 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: 11 Apr 2022 11:26 by Adrian
Created by: Adrian
Comments: 0
Category: ContextMenu
Type: Feature Request
3
I would like to be able to hide the context menu when I scroll the browser. 
Completed
Last Updated: 01 Feb 2022 10:07 by ADMIN
Release 3.0.1
Created by: Marin Bratanov
Comments: 0
Category: ContextMenu
Type: Bug Report
2

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

Unplanned
Last Updated: 24 Sep 2021 11:15 by ADMIN
I have a project with a grid and a context menu.  When I right click on a grid cell, I create a contextual menu based on the name in the grid row.  Then when I run the await ContextMenuRef.ShowAsync(mouseEventArgs.ClientX, mouseEventArgs.ClientY); command, the menu is from the previous right click and previous row.  The actions performed based on the menu choice happen for the right row but the menu itself, it shows previous values.  I have included my mock project for your perusal.  Click on Invoices to get to the page with the problem.
Duplicated
Last Updated: 19 Sep 2021 14:53 by ADMIN
Created by: Christopher
Comments: 1
Category: ContextMenu
Type: Feature Request
9

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

---

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.