Identify the context menu opened in Vue Spreadsheet component

24 Jul 20264 minutes to read

The Spreadsheet includes several context menus that will open and display depending on the action. When you right-click on a cell, for example, a context menu with options related to the cell element appears.

The class name returned by the contextMenuBeforeOpen event can be used to identify the context menu that is opened. The context menus and their class names are tabulated below.

Class name	Context menu name
.e-sheet-content	Cell context menu
.e-toolbar-item	Footer context menu
.e-rowhdr-table	Row header context menu
.e-colhdr-table	Column header context menu

The following code example shows how to identify the context menu opened.

Composition API (~/src/App.vue)

<template>
  <ejs-spreadsheet ref="spreadsheet" :contextMenuBeforeOpen="contextMenuBeforeOpen"></ejs-spreadsheet>
</template>

<script setup>
import { SpreadsheetComponent as EjsSpreadsheet } from "@syncfusion/ej2-vue-spreadsheet";
import { closest } from "@syncfusion/ej2-base";

const contextMenuBeforeOpen = function (args) {
  if (closest(args.event.target, ".e-sheet-content")) {
    console.log("Cell Context Menu");
  } else if (closest(args.event.target, ".e-colhdr-table")) {
    console.log("Column Header Context Menu");
  } else if (closest(args.event.target, ".e-rowhdr-table")) {
    console.log("Row Header Context Menu");
  } else if (closest(args.event.target, ".e-toolbar-item")) {
    console.log("Footer Context Menu");
  }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css";
</style>

Options API (~/src/App.vue)

<template>
  <ejs-spreadsheet ref="spreadsheet" :contextMenuBeforeOpen="contextMenuBeforeOpen"></ejs-spreadsheet>
</template>

<script>
import { SpreadsheetComponent } from "@syncfusion/ej2-vue-spreadsheet";
import { closest } from "@syncfusion/ej2-base";

export default {
  name: "App",
  components: {
    "ejs-spreadsheet": SpreadsheetComponent
  },
  methods: {
    contextMenuBeforeOpen: function (args) {
      if (closest(args.event.target, ".e-sheet-content")) {
        console.log("Cell Context Menu");
      } else if (closest(args.event.target, ".e-colhdr-table")) {
        console.log("Column Header Context Menu");
      } else if (closest(args.event.target, ".e-rowhdr-table")) {
        console.log("Row Header Context Menu");
      } else if (closest(args.event.target, ".e-toolbar-item")) {
        console.log("Footer Context Menu");
      }
    },
  },
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css";
</style>