FancyGrid Events

by FancyGrid Inc.

HTML

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

<div id="container" style="margin-left: 10px;margin-top: 10px;"></div>
<div id="events" style="margin-left: 10px;margin-top: 0px;"></div>

CSS

.action-column-remove {
  cursor: pointer;
  padding: 5px !important;
  position: relative;
  top: -5px;
  border-radius: 2px;
  background-color: #E4827D;
  color: #FFF;
}

.action-column-remove:hover {
  background-color: #F9DDE0;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  var grid = new FancyGrid({
    title: 'Events',
    renderTo: 'events',
    width: 630,
    height: 300,
    data: {
      fields: ['name', 'options']
    },
    trackOver: true,
    defaults: {
      type: 'string',
      sortable: true,
      resizable: true,
      ellipsis: true,
      editable: true
    },
    clicksToEdit: 1,
    columns: [{
      index: 'name',
      width: 100,
      title: 'Name'
    }, {
      index: 'options',
      width: 495,
      title: 'Options'
    }]
  });


  new FancyGrid({
    title: 'Employee',
    renderTo: 'container',
    width: 630,
    height: 300,
    data: data,
    trackOver: true,
    defaults: {
      type: 'string',
      width: 100,
      sortable: true,
      resizable: true,
      editable: true
    },
    clicksToEdit: 1,
    columns: [{
      index: 'name',
      title: 'Name'
    }, {
      index: 'birthday',
      title: 'Birthday',
      type: 'date',
      width: 100
    }, {
      index: 'country',
      title: 'Country',
      type: 'combo',
      data: ['USA', 'England', 'Canada', 'Germany']
    }, {
      index: 'position',
      title: 'Position',
      width: 150
    }, {
      index: '"$" + hour',
      type: 'number',
      format: 'number',
      editable: false,
      title: 'Hour rate',
      width: 80
    }, {
      type: 'action',
      width: 65,
      items: [{
        text: 'Delete',
        cls: 'action-column-remove',
        action: 'remove'
      }]
    }],
    events: [{
      cellclick: function(g, o) {
        var options = '{columnIndex:' + o.columnIndex + ', rowIndex:' + o.rowIndex + ', value: ' + o.value + ', ...}'
        grid.insert({
          name: 'cellclick',
          options: options
        });
      }
    }, {
      celldblclick: function(g, o) {
        var options = '{columnIndex:' + o.columnIndex + ', rowIndex:' + o.rowIndex + ', value: ' + o.value + ', ...}'
        grid.insert({
          name:...