1. Home
  2. Forum
  3. Blazor
  4. Blazor grid Context menu not working

Blazor grid Context menu not working

I am using the sample code from the below link 
https://blazor.syncfusion.com/documentation/datagrid/context-menu/#custom-context-menu-items
but the Context menu for blazor grid not working before it's working perfectly but when I updated my version to v18.4.0.49 now the context menu is not working.


@inject IJSRuntime JSRuntime

@using Syncfusion.Blazor.Grids

<SfGrid @ref="DefaultGrid" DataSource="@Orders" AllowPaging="true" ContextMenuItems="@(new List<ContextMenuItemModel>() { new ContextMenuItemModel { Text = "Copy with headers", Target = ".e-content", Id = "copywithheader" } })">
    <GridEvents ContextMenuItemClicked="OnContextMenuClick" TValue="Order"></GridEvents>
    <GridPageSettings PageSize="8"></GridPageSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true"></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>

@code{

   

    public List<Order> Orders { get; set; }

    private SfGrid<Order> DefaultGrid;

    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 void OnContextMenuClick(ContextMenuClickEventArgs<Order> args)
    {
        if (args.Item.Id == "copywithheader")
        {
            this.DefaultGrid.Copy(true);
        }
    }
}

Please find attached a screenshot that how this looks. Can you please suggest how can I overcome these issues?


Attachment: Capture1_a6b828c6.7z

7 Replies 1 reply marked as answer
RN Rahul Narayanasamy Syncfusion Team May 25, 2021 01:20 PM UTC

Hi Karan, 

Greetings from Syncfusion. 

Query: Blazor grid Context menu not working - Context menu for blazor grid not working before it's working perfectly but when I updated my version to v18.4.0.49 now the context menu is not working. 

We have validated your query and checked the reported problem in the mentioned version and alos in latest version. We could not face the reported problem at our end. The context menu is opening correctly in the clicked position. Find the below sample and screenshot for your reference. 


 

Also, we might suspect that the problem might be occurred while referring the old CSS reference. Could you please ensure the reported problem by referring the new CSS reference. 

<head> 
    . ..  
    <link rel='nofollow' href="css/site.css" rel="stylesheet" /> 
    <link rel='nofollow' href="WebApplication1.styles.css" rel="stylesheet" /> 
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" /> 
</head> 


If you are still facing the problem, then could you please share the below details. It will be helpful to validate and provide a better solution. 

  • Share your _Host.cshtml file(if server side application) or Index.html file(if client side).
  • Check whether did you referred latest CSS reference in your application.
  • Reproduce problem in the provided sample and revert back to us.

Regards, 
Rahul 
 


KP Karan Patel May 26, 2021 12:55 AM UTC

Hi Rahul,

I tried whatever you said but it's not working for me.

I attached my _Host.cshtml and another screenshot which maybe help you more for troubleshooting the issues.

Thank you.

Attachment: Desktop_71576515.7z

RN Rahul Narayanasamy Syncfusion Team May 26, 2021 12:30 PM UTC

Hi Karan, 

Thanks for sharing the details. 

We have validated your query with the provided details and checked the problem from our end. We have referred the provided CSS files from our application and ensure the problem. Still we could not reproduce the problem at our end. Find the below sample and screenshot for your reference. 


 

Also, could you please remove the below CSS reference and ensure the problem from your side? 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Test</title> 
    <base rel='nofollow' href="~/" /> 
    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" /> 
    <link rel='nofollow' href="_content/Blazored.Typeahead/blazored-typeahead.css" rel="stylesheet" />   //remove the highlighted other CSS reference and check the problem your side?? 
    <link rel='nofollow' href="css/site.css" rel="stylesheet" /> 
    <link rel='nofollow' href="css/fabric.css" rel="stylesheet" /> 
    <link rel='nofollow' href="css/material.css" rel="stylesheet" /> 
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" /> 
    <link rel='nofollow' href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> 
    <script src="_content/Blazored.Typeahead/blazored-typeahead.js"></script> 
    @Html.EmbeddedBlazorContent() 
</head> 


If you are still facing the problem, then could you please share the problem details. It will be helpful to validate and provide a better solution. 

  • Could you please ensure the problem after removing the other CSS reference from your end?
  • Reproduce the problem in the provided sample and revert back to us.
  • Share a simple reproduceable sample if possible.

Regards, 
Rahul  



KP Karan Patel June 3, 2021 04:28 AM UTC

Please find attached the file in which we reproduce that what issues we faced while working with Oncontext click on grid.
We are not using the whole Syncfusion.Blazor package but instead we used only 
Syncfusion.Blazor.Grids and Syncfusion.Blazor.Button in the application.

Attachment: Sample808805404_(3)_870c7d56.7z

RN Rahul Narayanasamy Syncfusion Team June 4, 2021 11:12 AM UTC

Hi Karan, 

Thanks for the update. 

Query: Please find attached the file in which we reproduce that what issues we faced while working with Oncontext click on grid. We are not using the whole Syncfusion.Blazor package but instead we used only Syncfusion.Blazor.Grids and Syncfusion.Blazor.Button in the application. 

We have validated your query and we suggest you to use the below styles to resolve the problem. Find the below code snippets for your reference. 

[_Host.cshtml] 
<head> 
    <meta charset="utf-8" /> 
    . . . 
    <link rel='nofollow' href="WebApplication1.styles.css" rel="stylesheet" /> 
    @*<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" />*@   // remove this style 
    <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/fabric.css" rel="stylesheet" />     // add this style to resolve the problem 
   </head> 


If you are using Syncfusion.Blazor NuGet then refer the below styles. 

<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" /> 

(Or) 

If you are using Syncfusion.Blazor.Grid (Individual NuGet reference) package then refer the below styles. 

<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/fabric.css" rel="stylesheet" /> 

Reference: 

Please let us know if you have any concerns. 

Regards, 
Rahul 


Marked as answer
FV Frank van Diepenbos June 1, 2022 12:00 PM UTC

Hello Rahul

In version 20.1.5.58 the context menu is not working anymore. I get some default menu.

I used your sample from above and upgraded to see if it continued to work.

My own app is on that version....

frank

19.4.0.56 works!



NP Naveen Palanivel Syncfusion Team June 2, 2022 03:52 PM UTC

Hi Frank ,


Greetings from Syncfusion support.


We would like to inform you that we have included some breaking changes in our 2022 Volume 2 release. reported issue might have occurred due to that. Kindly ensure that from below release notes.


https://blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#breaking-changes


Kindly get back to us with more details, if you are still facing the reported issue.  


Regards,

Naveen Palanivel.


Loader.
Up arrow icon