Docs
API
  • contextmenu

    Array

    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.

    List of predefined items

    copy

    String

    Copies selected cells to clipboard.
    Alternatively it is possible to use CTRL+C.

    copy+

    String

    Copies selected cells and columns' titles to clipboard.

    delete

    String

    Deletes selected rows.

    duplicate

    String

    Duplicates selected rows.

    export

    String

    Contains sub menu with actions: export to Excel and CSV.

    -

    String

    Separator.

    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