FancyGrid Edit Cell

by FancyGrid Inc.

HTML

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

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

Vue

document.addEventListener("DOMContentLoaded", () => {
  new FancyGrid({
    resizable: true,
    renderTo: 'container',
    title: 'KIA MOTORS Dealer Staff',
    width: 550,
    height: 450,
    trackOver: true,
    selModel: 'rows',
    data: data,
    tbar: [{
      text: 'Add',
      action: 'add'
    }, {
      text: 'Remove',
      action: 'remove'
    }],
      paging: {
      pageSize: 10,
      pageSizeData: [10, 20, 50, 100]
    },
    defaults: {
      type: 'string',
      width: 75,
      resizable: true,
      sortable: true,
      editable: true
    },
    clicksToEdit: 1,
    columnLines: false,
    columnClickData: true,
    columns: [{
      title: 'Name',
      index: 'name',
      width: 70
    }, {
      title: 'SurName',
      index: 'surname',
      width: 70
    }, {
      title: 'Position',
      index: 'position',
      width: 80
    }, {
      title: 'Salary',
      index: 'salary',
      type: 'number',
      spin: true,
      step: 1000,
      min: 0,
      max: 150000,
      format: {
        inputFn: salaryInputFn
      }
    }, {
      title: 'Phone',
      index: 'phone',
      width: 120,
      format: {
        inputFn: phoneInputFn
      }
    }, {
      title: 'Birthday',
      index: 'birthday',
      type: 'date',
      width: 90,
      format: {
        read: 'Y.m.d',
        write: 'm/d/Y',
        edit: 'm/d/Y'
      }
    }]
  });
});

const salaryInputFn = (value) => {
  value = value.toString().replace('$', '').replace(/\,/g, '').replace('-', '').replace('.', '');

  if (value.length === 0) {
    value = '';
  } else if (value.length > 6) {
    value = value.substr(0, 6);
    value = '$' + value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  } else {
    value = '$' + value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  }

  return value;
}

const phoneInputFn = (value) => {
  value = parseInt(value.replace(/\-/g, ''));

  if (isNaN(value)) {
    value = '';
  } else {
    value = String(value);
  }

  switch (value.length) {
   ...