Grid

<div class="row">
  <div class="col-sm-8">
    <fine-grid id='myGrid1'>
    </fine-grid>
  </div>
  <label class="control-label col-sm-1" for="input">Log:</label>
  <div id="log" class="col-sm-4" 
      style="max-height: 200px; overflow: auto">
  </div>
</div>

<script type="text/javascript">
  var order = 0;
  var logDiv = fine.get('#log');
    
  function log(msg, obj) {
    order += 1;
    logDiv.innerText += order + '. ' + msg + '\n';
    logDiv.scrollTop = logDiv.scrollHeight;
    console.log(msg, obj ? obj : '');
    console.log('');
  }
  
  fine.ready(function(e) {
    var el = document.getElementById('myGrid1');
    el.set('theme', 'flat');
    el.setConfig({
      height: '400px',
      showToolbar: true,
      columns: [{
        field: "customerNumber",
        title: "ID",
        width: '70px',
        filtering: false,
        editable: false,
      }, {
        field: "customerName",
        title: "Customer Name", 
        width: '35%',
      }, {
        field: "phone",
        title: "Phone",
        width: '100px',
        filtering: false,
      }, {
        field: "city",
        title: "City",
      }, {
        field: "country",
        title: "Country",
      }, {
        commands: ["Edit", "Delete"],
        editingCommands: ["Save", "Cancel"],
        width: '120px',
        filtering: false,
        title: "",
      }],
      dataSource: {
        schema: {
          model: {
            idField: 'customerNumber',
            fields: {
              customerNumber: {
                type: 'string'
              },
              customerName: {
                type: 'string'
              },
              phone: {
                type: 'number'
              },
              city: {
                type: 'string'
              },
              country: {
                type: 'string'
              }
            }
          }
        },
        transport: {
          read: {
            url: "../php/example.php",
            dataType: "text"
          },
          update: {
            url: "../php/example.php",
            dataType: "text"
          },
          create: {
            url: "../php/example.php",
            dataType: "text"
          },
          destroy: {
            url: "../php/example.php",
            dataType: "text"
          }
        },
        serverPaging: false,
        serverFiltering: false,
        serverSorting: false,
      },
      paging: {
        pageSize: 10
      },
      sorting: {
        type: 'multiple',
      },
      filtering: true,
      editing: 'batch',
      clientEvents: {
        delete: 'onClientDelete',
        edit: 'onClientEdit',
        save: 'onClientSave',
        cancel: 'onClientCancel',
        saveAll: 'onClientSaveAll',
        cancelAll: 'onClientCancelAll',
        add: 'onClientAdd',
        'before-databound': 'onClientBeforeDatabound',
        databound: 'onClientDatabound'
      }
    });
    
    fine.addListener(el, 'delete', onDelete);
    fine.addListener(el, 'edit', onEdit);
    fine.addListener(el, 'save', onSave);
    fine.addListener(el, 'cancel', onCancel);
    fine.addListener(el, 'saveAll', onSaveAll);
    fine.addListener(el, 'cancelAll', onCancelAll);
    fine.addListener(el, 'add', onAdd);
    fine.addListener(el, 'before-databound', onBeforeDatabound);
    fine.addListener(el, 'databound', onDatabound);
  });
  
  function onDelete(e) {
    log('myGrid1 delete event', e.detail.row);
  }
  
  function onClientDelete(arg) {
    log('myGrid1 delete client event', arg.row);
  }
  
  function onEdit(e) {
    log('myGrid1 edit event', e.detail.row);
  }
  
  function onClientEdit(arg) {
    log('myGrid1 edit client event', arg.row);
  }
  
  function onSave(e) {
    log('myGrid1 save event', e.detail.row);
  }
  
  function onClientSave(arg) {
    log('myGrid1 save client event', arg.row);
  }
  
  function onCancel(e) {
    log('myGrid1 cancel event', e.detail.row);
  }
  
  function onClientCancel(arg) {
    log('myGrid1 cancel client event', arg.row);
  }
  
  function onSaveAll(e) {
    log('myGrid1 save all event', e.detail.rows);
  }
  
  function onClientSaveAll(arg) {
    log('myGrid1 save all client event', arg.rows);
  }
  
  function onCancelAll(e) {
    log('myGrid1 cancel all event', e.detail.rows);
  }
  
  function onClientCancelAll(arg) {
    log('myGrid1 cancel all client event', arg.rows);
  }
  
  function onAdd(e) {
    log('myGrid1 add event', e.detail.row);
  }
  
  function onClientAdd(arg) {
    log('myGrid1 add client event', arg.row);
  }
  
  function onBeforeDatabound(e) {
    log('myGrid1 before databound event', e.detail.rows);
  }
  
  function onClientBeforeDatabound(arg) {
    log('myGrid1 before databound client event', arg.rows);
  }
  
  function onDatabound(e) {
    log('myGrid1 databound event', e.detail.rows);
  }
  
  function onClientDatabound(arg) {
    log('myGrid1 databound client event', arg.rows);
  }
</script>