We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Change Grid ContextMenuItems on ContextMenuOpen

Thread ID:





150459 Jan 7,2020 10:28 PM UTC Jan 9,2020 06:42 PM UTC Vue 1
Tags: Data Grid
Eddy Moulton
Asked On January 7, 2020 10:28 PM UTC


I'm trying to change the list of context menu items based on a property of the item that the context menu has been opened on.

My current method is to modify the items in the bound data property, ie.
this.contextMenuItems = [changedItems]

where I've got the following in my template:

This is done within the ContextMenuOpen event.

This almost works. However on the click where the items are first changed, the context menu briefly flashes on screen (appears to be empty). If I then try to open the context menu a second time without changing the items it will open with the correct list of items.

Are there any methods I've missed to update the list of menu items?
Any way to delay the render until after ContentMenuOpen has completed?

Prasanna Kumar Viswanathan [Syncfusion]
Replied On January 9, 2020 06:42 PM UTC

Hi Eddy,  
Greetings from Syncfusion support. 
Based on your query, we suspect that you need to hide/show the context menu items in contextMenuOpen event. In Grid, we can dynamically enable/disable or hide/show contextMenu items using enableItemshideItems and showItems methods of contextMenu in the contextMenuOpen event and changed context menu text using contextMenuClick event of the Grid.  
In our sample we did not face any issues while hide/show the context menu items in contextMenuOpen event. 
Please find the below code snippet and sample for more information. 
  <div class="col-lg-12 control-section">  
. . .  
         . . .  
import Vue from "vue";  
import { GridPlugin, ContextMenu } from "@syncfusion/ej2-vue-grids";  
import { data } from "./data";  
export default Vue.extend({  
  data: () => {  
    return {  
      data: data,  
      contextMenuItems: [  
          text: "Custom1",  
          target: ".e-content",  
          id: "custom"  
          text: "Custom2",  
          target: ".e-content",  
          id: "custom2"  
      editing: { allowDeleting: true, allowEditing: true }  
  methods: {  
    contextMenuOpen: function(args) {  
// you can get the rowData in contexMenu open event args also  
      var contextMenuObj = this.$refs.grid.ej2Instances.contextMenuModule  
        .contextMenu;  //getting the contextMenu instance  
      if (args.rowInfo.rowData.OrderID % 2 === 0) {  //here you can apply your own conditions as per your requirement  
        contextMenuObj.enableItems(["Custom1"], false);  
      } else {  
        contextMenuObj.enableItems(["Custom1"], true);  
contextMenuClick: function(args) { 
      if (args.item.id === "custom") { 
        args.item.text = "changed"; 
  provide: {  
    grid: [ContextMenu]  
To find out the root cause of an issue, we need the following details 
1. Share the screenshot or video demonstration of an issue. 
2. Share the complete Grid code example. 
3. Share the code example of changing context menu items in contextMenuOpen event. 
4. Syncfusion Package Version.  
Prasanna Kumar N.S.V 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon