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

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

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