Controller to expand edit form

by FancyGrid Inc.

HTML

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

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

CSS

.expand-column .fancy-grid-cell-inner {
  margin-left: 3px;
}

.expand-el {
  display: inline-block;
  width: 12px;
  height: 12px;
  line-height: 18px;
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20class%3D%22icon%22%20style%3D%22shape-rendering%3A%20geometricPrecision%3B%22%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%232d7ff9%22%20d%3D%22M4.77546101%2C10.4553613%20L1.81474478%2C10.8783208%20C1.25439084%2C10.9583713%200.87938524%2C10.5736845%200.958225649%2C10.0218016%20L1.38118511%2C7.06108542%20C1.45982823%2C6.51058357%201.83916177%2C6.38790899%202.22968611%2C6.77843328%20L2.93679297%2C7.48554006%20L4.10581974%2C6.3165134%20C4.49903533%2C5.92329779%205.12937282%2C5.9261252%205.51989706%2C6.31664944%20C5.91314397%2C6.70989635%205.91048225%2C7.3402777%205.52003317%2C7.73072683%20L4.35100654%2C8.89975362%20L5.05811323%2C9.6068604%20C5.45136014%2C10.0001074%205.32208977%2C10.3772715%204.77546101%2C10.4553613%20Z%20M7.10137856%2C1.3810729%20L10.0620948%2C0.958113443%20C10.6224487%2C0.87806288%2010.9974543%2C1.26274971%2010.9186139%2C1.81463257%20L10.4956545%2C4.7753488%20C10.4170113%2C5.32585066%2010.0376778%2C5.44852523%209.64715346%2C5.05800094%20L8.94004659%2C4.35089416%20L7.45430822%2C5.83663252%20C7.06109263%2C6.22984813%206.43075515%2C6.22702073%206.0402309%2C5.83649648%20C5.64698399%2C5.44324957%205.64964572%2C4.81286823%206.04009479%2C4.42241909%20L7.52583303%2C2.9366806%20L6.81872633%2C2.22957382%20C6.42547942%2C1.83632686%206.5547498%2C1.45916273%207.10137856%2C1.3810729%20Z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  color: #2d7ff9;
  position: relative;
  top: 4px;
  left: 4px;
}

.expand-container {
  display: inline-block;
  opacity: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  top: 2px;
  cursor:...

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  Fancy.defineControl('expand-controller', {
    controls: [{
      event: 'cellclick',
      selector: '.expand-el',
      handler: 'onClickExpandEl'
    }],
    onClickExpandEl: function(grid, o) {
      var item = o.data;

      if (!grid.editForm) {
        grid.editForm = new FancyForm({
          title: {
            text: item.name + ' ' + item.surname,
            tools: [{
              text: 'Close',
              handler: function() {
                this.hide();
              }
            }]
          },
          theme: 'extra-gray',
          window: true,
          modal: true,
          draggable: true,
          width: 300,
          height: 250,
          defaults: {
            type: 'string'
          },
          items: [{
            label: 'Name',
            name: 'name',
            value: item.name
          }, {
            label: 'Sur Name',
            name: 'surname',
            value: item.surname
          }, {
            label: 'Company',
            name: 'company',
            value: item.company
          }, {
            label: 'Age',
            name: 'age',
            value: item.age,
            spin: true,
            type: 'number',
            min: 0,
            max: 100
          }, {
            name: 'id',
            value: item.id,
            type: 'hidden'
          }],
          buttons: ['side', {
            text: 'Close',
            handler: function() {
              this.hide();
            }
          }, {
            text: 'Save',
            handler: function() {
              grid.setById(this.get('id'), this.get());
              grid.update();
              this.hide();
            }
          }],
          events: [{
            init: function() {
              this.show();
            }
          }]
        });
      } else {
        grid.editForm.set(item);
        grid.editForm.setTitle(item.name + ' ' + item.surname);
       ...