FancyGrid Grid with Form

by FancyGrid Inc.

HTML

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

<div style="position:relative;height: 500px;">
  <div id="grid" style="width: 500px;float: left;"></div>
  <div id="form" style="float: left;margin-left: 10px;"></div>
</div>

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const grid = new FancyGrid({
    title: 'Employee',
    renderTo: 'grid',
    width: 500,
    height: 500,
    data: data,
    selModel: 'row',
    trackOver: true,
    defaults: {
      type: 'string',
      width: 100,
      sortable: true,
      resizable: true,
      editable: true,
      ellipsis: true,
      vtype: 'notempty'
    },
    events: [{
      cellclick(grid, o) {
        form.set(o.data);
      }
    }],
    columns: [{
      index: 'id',
      width: 40,
      type: 'number',
      filter: false
    }, {
      title: 'Name',
      render(o) {
        o.value = `${o.data.name} ${o.data.surname}`;

        return o;
      }
    }, {
      index: 'birthday',
      title: 'Birthday',
      type: 'date',
      width: 100
    }, {
      index: 'country',
      title: 'Country',
      type: 'combo',
      data: ['USA', 'England', 'Canada', 'Germany']
    }, {
      index: 'position',
      title: 'Position',
      width: 100
    }, {
      index: 'hour',
      type: 'currency',
      title: 'Hour rate',
      width: 70
    }, {
      index: 'active',
      type: 'checkbox',
      title: 'Active?',
      width: 60
    }, {
      title: 'email',
      index: 'email',
      width: 150
    }]
  });

  const comboData = [{
    country: 'USA'
  }, {
    country: 'Canada'
  }, {
    country: 'England'
  }, {
    country: 'Germany'
  }];

  const form = new FancyForm({
    renderTo: 'form',
    title: 'User Data',
    width: 290,
    height: 500,
    defaults: {
      type: 'string'
    },
    items: [{
      name: 'id',
      type: 'hidden'
    }, {
      label: 'Name',
      emptyText: 'Name',
      name: 'name'
    }, {
      label: 'SurName',
      emptyText: 'SurName',
      name: 'surname'
    }, {
      label: 'E-mail',
      emptyText: 'E-mail',
      name: 'email',
      valid: {
        type: 'email',
        blank: false,
        blankText: 'Required',
        text: 'Incorect email'
      }
   ...