Change Grid ContextMenuItems on ContextMenuOpen

[Eddy Moulton]

Hi,

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:

<ejs-grid

      ref="grid"

      :dataSource="content"

      :recordDoubleClick="doubleClick"

      :contextMenuItems="contextMenuItems"

      :contextMenuClick="contextMenuClick"

      :contextMenuOpen="contextMenuOpen"

    >

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]

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 enableItems, hideItems 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. 

 

App.vue  

<template>  

  <div class="col-lg-12 control-section">  

    <div>  

      <ejs-grid  

        ref="grid"  

        id="gridcomp"  

. . .  

        :contextMenuItems="contextMenuItems"  

        :contextMenuOpen="contextMenuOpen"  

        :editSettings="editing"  

      >  

         . . .  

      </ejs-grid>  

    </div>  

  </div>  

</template>  

<script>  

import Vue from "vue";  

import { GridPlugin, ContextMenu } from "@syncfusion/ej2-vue-grids";  

import { data } from "./data";  

 

Vue.use(GridPlugin);  

 

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

        contextMenuObj.hideItems(["Custom2"]);  

      } else {  

        contextMenuObj.enableItems(["Custom1"], true);  

        contextMenuObj.showItems(["Custom2"]);  

      }  

    }, 

contextMenuClick: function(args) { 

      if (args.item.id === "custom") { 

        args.item.text = "changed"; 

      } 

    } 

 

  },  

  provide: {  

    grid: [ContextMenu]  

  }  

});  

</script>  

 

Sample: https://codesandbox.io/s/244399-contextmenu-disable-89swo  

 

Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#contextmenuopen 

  

https://ej2.syncfusion.com/vue/documentation/api/menu#enableitems   

  

https://ej2.syncfusion.com/vue/documentation/api/menu#hideitems  

 

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.  

 

Regards, 

Prasanna Kumar N.S.V