1. Feedback
  2. Blazor
  3. 8984

Welcome to the Blazor feedback portal. We’re happy you’re here! If you have feedback on how to improve the Blazor, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

ContextMenuEvents OnItemRender continuously firing and locking up browser page

I'm using the ContextMenu control. I've added a handler for the OnItemRender event. With this handler added, as soon as the component containing the context menu is loaded, the Render method begins repeatedly and continuously firing, locking up the page. Below is the code I'm using:


<ul style="list-style-type: none; padding-left: 20px; cursor:pointer; overflow-x: hidden; overflow-y: auto;">
    @foreach (var container in Containers)
    {
        <li>
            <div style="display: flex;">
                @if (container.Expanded || !container.Children.Any())
                {
                    <span @onclick="@container.Toggle"><AbbIcon Name="IconType.FolderOpen" Size="IconSize.Small"></AbbIcon></span>
                }
                else
                {
                    <span @onclick="@container.Toggle"><AbbIcon Name="IconType.Folder" Size="IconSize.Small"></AbbIcon></span>
                }
                <span id="@container.Id" style="user-select: none;" @onclick="@container.Toggle">@container.Name</span>
                <EjsContextMenu Target="@($"#{container.Id}")" Items="@GetMenuItems(container.Id)">
                    <ContextMenuEvents OnItemRender="@Render"></ContextMenuEvents>
                </EjsContextMenu>
            </div>
            @if (container.Expanded)
            {
                <div>
                    <ContainerComponent Containers="container.Children"></ContainerComponent>
                </div>
            }
        </li>
    }
</ul>

@code {

    public void Render(MenuEventArgs args)
    {
        Console.WriteLine("render");  // the console is filled with this message
        args.Element.AddClass(new string[] { "delete-style" });
    }

    [Parameter]
    public List<ContainerViewModel> Containers { get; set; }

    public List<MenuItem> GetMenuItems(string containerId)
    {
        return new List<MenuItem>
{
            new MenuItem { Text = "New Child", Id = $"new-{containerId}" },
            new MenuItem { Text = "Rename", Id = $"rename-{containerId}" },
            new MenuItem { Separator = true, Id = $"separator-{containerId}" },
            new MenuItem { Text = "Delete", Id = $"delete-{containerId}" },
        };
    }

    private async Task Select(MenuEventArgs args)
    {
        Console.WriteLine(args.Item.Text);
        if (args.Item.Text == "New Child")
        {
            var id = args.Item.Id.Remove(0, "new-".Length);
            await New(id);
        }

        if (args.Item.Text == "Rename")
        {
            var id = args.Item.Id.Remove(0, "rename-".Length);
            Console.WriteLine(id);
            await Rename(id);
        }

        if (args.Item.Text == "Delete")
        {
            var id = args.Item.Id.Remove(0, "new-".Length);
            await Delete(id);
        }
    }

    public async Task New(string parentId)
    {
        await jsRuntime.InvokeAsync<object>("contextMenu.closeDropdowns");
        var newName = await jsRuntime.InvokeAsync<string>("prompt", "provide a name for the container:");
        if (!string.IsNullOrEmpty(newName))
        {
            Console.WriteLine(parentId);
            await requests.ContainersCreate(newName, parentId);
        }
    }

    public async Task Rename(string containerId)
    {
        await jsRuntime.InvokeAsync<object>("contextMenu.closeDropdowns");
        var newName = await jsRuntime.InvokeAsync<string>("prompt", "enter a new name:");
        if (!string.IsNullOrEmpty(newName))
        {
            await requests.ContainersRename(containerId, newName);
        }
    }

    public async Task Delete(string containerId)
    {
        await jsRuntime.InvokeAsync<object>("contextMenu.closeDropdowns");
        await requests.ContainersDelete(containerId);
    }

}