contextmenu

Context menu is special widget with items to run grid actions.
There are 2 ways to enable context menu:
1 - To use event contextmenu
and than generate custom menu.
2 - To use property contextmenu.
Before continue it is recomended to learn doc link Menu.
Property contextmenu is array of predefined and custom items.

To enable export items, it requires to add property expoter: true to grid config.
Doc link exporter

List of predefined items

Sample:

contextmenu: [
  'copy',
  'copy+',
  '-',
  'duplicate',
  '-',
  'delete',
  '-',
  'export'
]

Custom item

To add custom item, it requires to read doc link Menu first.

Sample:

.custom-menu-item-cls {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns...");
  background-position-x: 3px;
  background-position-y: 3px;
}

.fancy-menu-item-active .custom-menu-item-cls {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns...");
}

contextmenu: [
  'copy',
  'copy+',
  '-',
  'delete',
  '-',
  'export',
  '-',
  {
	text: 'Custom',
	imageCls: 'custom-menu-item-cls',
	sideText: 'CUSTOM',
	handler: function(){
	  alert('Click on custom item');
	}
  }
],

Custom text

To change text for item it requires to define type and text.

Sample:

contextmenu: [{
  type: 'copy',
  text: 'My copy'
},
  'copy+',
  '-',{
  type: 'delete',
  text: 'Delete row'
},
  '-',
  'export'
],

Custom Export

By default export is very limited: it exports only visually disabled data without column headers.
Let's improve it.

Sample:

  exporter: true,
  contextmenu: [
    'copy',
    'copy+',
    '-',
    'delete',
    '-', {
      text: 'Export',
      items: [{
        text: 'CSV Export',
        handler: function() {
          grid.exportToCSV({
            header: true,
            all: true
          });
        }
      }, {
        text: 'Excel Export',
        handler: function() {
          grid.exportToExcel({
            header: true,
            all: true
          });
        }
      }]
    }
  ],

Default

undefined