FancyGrid Context Menu

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container"></div>

CSS

.custom-menu-item-cls {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20opacity%3D%22.4%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20fill%3D%22%23828A99%22%20fill-rule%3D%22nonzero%22%20d%3D%22M2%2012C2%206.477%206.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010S2%2017.523%202%2012zm18.3%200a8.3%208.3%200%201%200-16.6%200%208.3%208.3%200%200%200%2016.6%200zm-11.05-.5a1.25%201.25%200%201%201%200-2.5%201.25%201.25%200%200%201%200%202.5zm5.5%200a1.25%201.25%200%201%201%200-2.5%201.25%201.25%200%200%201%200%202.5z%22%2F%3E%3Cpath%20stroke%3D%22%23828A99%22%20stroke-width%3D%221.7%22%20d%3D%22M9%2014.85c.833.767%201.833%201.15%203%201.15s2.167-.383%203-1.15%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position-x: 3px;
  background-position-y: 3px;
}

.fancy-menu-item-active .custom-menu-item-cls {
  background-image:...

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  new FancyGrid({
    resizable: true,
    renderTo: 'container',
    theme: 'gray',
    width: 'fit',
    height: 450,
    trackOver: true,
    selModel: 'rows',
    data: data,
    exporter: true,
    defaults: {
      type: 'string',
      width: 75,
      menu: true,
      draggable: true,
      resizable: true,
      sortable: true
    },
    contextmenu: [
      'copy',
      'copy+',
      '-',
      'delete',
      '-',
      'export',
      '-',
      {
        text: 'Custom',
        imageCls: 'custom-menu-item-cls',
        sideText: 'CUSTOM',
        handler: function() {
          alert('Click on custom item');
        }
      }
    ],
    clicksToEdit: 1,
    columnLines: false,
    columns: [{
      type: 'select'
    }, {
      text: 'Base Info',
      columns: [{
        title: 'Name',
        index: 'name',
        width: 100
      }, {
        title: 'SurName',
        index: 'surname',
        width: 100
      }, {
        title: 'Position',
        index: 'position',
        width: 100
      }]
    }, {
      title: 'Salary',
      index: 'salary',
      type: 'currency'
    }, {
      title: 'Phone',
      index: 'phone',
      width: 120
    }, {
      title: 'Birthday',
      index: 'birthday',
      type: 'date',
      width: 100,
      format: {
        read: 'Y.m.d',
        write: 'm/d/Y',
        edit: 'm/d/Y'
      }
    }]
  });
});


var data = [{
    "position": "CEO",
    "name": "Nick",
    "surname": "Thomson",
    "salary": 10000,
    "image": "images/boy-4.png",
    "phone": "858-490-5000",
    "birthday": "1961.10.01"
  },
  {
    "position": "Sales Director",
    "name": "Peter",
    "surname": "West",
    "salary": 7000,
    "image": "images/boy-2.png",
    "phone": "858-490-5001",
    "birthday": "1965.1.5"
  },
  {
    "position": "Tech Director",
    "name": "Alexander",
    "surname": "Brown",
    "salary": 6000,
    "image": "images/boy-3.png",
    "phone":...