custom context menu item action in data grid

[Salvador Amba Jr]

How do I create a function on my custom context menu item?

For example, if I have a context menu with text "color this as green"

data(){

  return{

    menuItems:[

      {

        id: 1,

        text: "color this as green"

      }

    ]

  }

}

and then call this function when selected

methods:{

    turnGreen: function(args){

      document.getElementById("target").classList.add("bg-green");

    }

}

[Rajapandi Ravi]

Hi Salvador, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to color the tr element by clicking the context menu item. You can achieve your requirement by using contextMenuClick event. 

The custom context menu items can be added by defining the contextMenuItems as a collection of contextMenuItemModel. Actions for this customized item can be defined in the contextMenuClick event. Please refer the below code example and sample for more information. 

App.vue 

 

<template> 

  <div id="app"> 

    <ejs-grid 

      ref="gridObj" 

      :dataSource="data" 

      :allowPaging="true" 

      :contextMenuItems="contextMenuItems" 

      :contextMenuClick="contextMenuClick" 

    > 

      <e-columns> 

        <e-column 

          field="OrderID" 

          headerText="ID" 

          width="80" 

          isPrimaryKey="true" 

        ></e-column> 

        <e-column 

          field="CustomerID" 

          headerText="CustomerID" 

          width="90" 

        ></e-column> 

        <e-column field="ShipCity" headerText="ShipCity" width="120"></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import axios from "axios"; 

import { 

  ContextMenu, 

} from "@syncfusion/ej2-vue-grids"; 

import { gridData } from "./data"; 

import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons"; 

Vue.use(ButtonPlugin); 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: gridData, 

      contextMenuItems: [ 

        { text: "Color Green", target: ".e-content", id: "color" }, 

      ], 

    }; 

  }, 

  methods: { 

    contextMenuClick: function (args) { 

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

        args.rowInfo.row.classList.add("customcss"); 

      } 

    }, 

  }, 

  provide: { 

    grid: [ContextMenu, Freeze, Edit, Toolbar, Page, Filter, ColumnChooser], 

  }, 

}; 

</script> 

 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

<style> 

.customcss { 

  background-color: green; 

} 

</style> 

 

Sample: https://codesandbox.io/s/vue-template-forked-j1hv7?file=/src/App.vue 

API: https://ej2.syncfusion.com/vue/documentation/api/grid/#contextmenuclick 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/context-menu/#custom-context-menu-items 

Screenshot: 

 

Regards, 

Rajapandi R

[Salvador Amba Jr]

That it! thanks appreciate it

[Rajapandi Ravi]

Hi Salvador, 

Thanks for the update. 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R