Manually close context menu

[Henning Krause]

Dear Support-Team, 

I am using a Grid with a context menu. The context menu has a an item which opens a modal dialog. I need to await the result of the dialog before proceeding as it requires input from the user. 

I encountered the following issue:

The context menu stays open until the first click in the modal dialog.

How can I close the context menu manually before opening the modal dialog?

I created the following sample code to demonstrate the issue.

1. Right click any row. 
2. Select open dialog --> A modal dialog will open. Notice in the background that the context menu is still open.
3. If you click inside the modal (so it does not close) the context menu closes.

This should not happen. The context menu should close before the dialog is opened.

<div class="container-fluid">
    <SfGrid DataSource="@Orders" Height="600px" ContextMenuItems="@(new List<ContextMenuItemModel>() { new ContextMenuItemModel { Text = "Open Dialog", Target = ".e-content", Id = "open" } })">
        <GridEvents ContextMenuItemClicked="OnContextMenuClick" TValue="Order"></GridEvents>
        <GridColumns>
            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        </GridColumns>
    </SfGrid>
</div>
<SfDialog Width="250px" IsModal="true" @bind-Visible="@Visibility">
    <DialogEvents OnOverlayClick="@OnOverlayclick">
    </DialogEvents>
    <DialogTemplates>
        <Content> This is a modal dialog </Content>
    </DialogTemplates>
</SfDialog>
@code{
    public List<Order> Orders { get; set; }
    private bool Visibility { get; set; } = false;
    public Order SelectedOrder;
    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }
    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
    public async Task OnContextMenuClick(ContextMenuClickEventArgs<Order> args)
    {
        Console.WriteLine(args.Item.Id);
        if (args.Item.Id == "open")
        {
            // Close Context Menu here
            this.Visibility = true;
            await Task.Delay(3000);
        }
    }
    private void OnOverlayclick(MouseEventArgs arg)
    {
        this.Visibility = false;
    }
}

[Vignesh Natarajan]

Hi Henning,  

 

Greetings from Syncfusion support.  

 

Query: “The context menu stays open until the first click in the modal dialog.” 

 

We have validated the reported issue by preparing a sample using your code example and latest version Syncfusion.Blazor Nuget package(19.3.0.48). By default context menu item will be removed from grid once the click is made (i.e.) after executing the action performed in ContextMenu Click event.  

 

From your code example, we found that you have defined a time delay of 3s. Hence context menu is stayed open and closed after that. If you want to close the context menu automatically, kindly remove the time delay from ContextMenuClicked event.  

 

Refer the below code example  

 

public async Task OnContextMenuClick(ContextMenuClickEventArgs<Order> args) 

{ 

    Console.WriteLine(args.Item.Id); 

    if (args.Item.Id == "open") 

    { 

        this.Visibility = true; 

        //await Task.Delay(3000); 

  

    } 

} 

 

   

Refer the below sample for your reference 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170281/ze/DataGrid_Server575226275.zip 

 

Please get back to us if you have further queries or share more details why you want to use time delay after opening the dialog.  

 

Regards, 

Vignesh Natarajan 

[Henning Krause]

Hey  Vignesh, 

thanks for your answer! 

The time delay is there for a reason. In my application, I am using a modal which asks the user for input. In order to process the user input, I need to wait for the submission of the modal.

I added the time delay, because I did not want to implemented my whole modal in the sample code. Instead of the delay, I use "await for the model" in my appl 

[Vignesh Natarajan]

Hi Henning,  

 

Thanks for the update  

 

Query: “Instead of the delay, I use "await for the model" in my appl ”  

 

We understand you requirement, but we would like to inform you that context menu will be closed only after actions inside the ContextMenuClicked event gets completed fully. If you perform any asynchronous operation in the ContextMenuClicked event, then Contextmenu will removed only after performing that action. This is default behavior of Grid context menu.  

 

It is also not possible for method support to manually close the context menu. So we request you to handle the asynchronous action outside the ContextMenuClicked event so that context menu will be removed once the click is made. 

 

Please get back to us if you have further queries.      

 

Regards, 

Vignesh Natarajan