FancyGrid Filter over Form

by FancyGrid Inc.

HTML

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

<div id="form"></div>
<div id="grid" style="margin-top: 20px;"></div>

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  new FancyForm({
    renderTo: 'form',
    width: 700,
    height: 185,
    items: [{
      type: 'line',
      defaults: {
        type: 'string',
        labelAlign: 'top',
        width: 170
      },
      items: [{
        label: 'Name',
        emptyText: 'Search',
        name: 'name',
        events: [{
          change: stringFilterFn
        }]
      }, {
        label: 'Surname',
        emptyText: 'Search',
        name: 'surname',
        events: [{
          change: stringFilterFn
        }]
      }, {
        label: 'Company',
        emptyText: 'Search',
        name: 'company',
        events: [{
          change: stringFilterFn
        }]
      }, {
        label: 'Gendre',
        emptyText: 'Gendre',
        type: 'combo',
        data: [{
          index: 0,
          genre: ''
        }, {
          index: 1,
          genre: 'Man'
        }, {
          index: 2,
          genre: 'Woman'
        }],
        displayKey: 'genre',
        valueKey: 'index',
        editable: false,
        name: 'genre',
        events: [{
          change(field, value, oldValue) {
            if (field.interval) {
              clearInterval(field.interval);
            }

            field.interval = setTimeout(() => {
              switch (value) {
                case '0':
                  value = '';
                  break;
                case '1':
                  value = 'man';
                  break;
                case '2':
                  value = 'woman';
                  break;
              }

              const grid = FancyGrid.get('grid');

              grid.addFilter(field.name, value);
            }, 500);
          }
        }]
      }]
    }, {
      type: 'line',
      defaults: {
        type: 'string',
        labelAlign: 'top',
        width: 170
      },
      style: {
        "margin-top": '12px'
      },
      items: [{
        label: 'Age from',
        emptyText:...