Cell edit templates - Pure JS

by Joel Parks

HTML

<script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20151.48/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
 <h1>Wijmo FlexGrid with Custom Controls in Cells</h1>

<div id="flex1" style="height: 200px"></div>

<div id="tplBtnViewMode" style="display:none">
    <button id="btnEdit" class="btn btn-default btn-sm">
      <span class="glyphicon glyphicon-pencil"></span> Edit
    </button>
    <button id="btnDelete" class="btn btn-default btn-sm">
      <span class="glyphicon glyphicon-remove"></span> Delete
    </button>
  <div>

  <!-- template for buttons on items in edit mode -->
  <div id="tplBtnEditMode" style="display:none">
    <button id="btnOK" class="btn btn-primary btn-sm">
      <span class="glyphicon glyphicon-ok"></span> OK
    </button>
    <button id="btnCancel" class="btn btn-warning btn-sm">
      <span class="glyphicon glyphicon-ban-circle"></span> Cancel
    </button>
  </div>

JavaScript

window.onload = function () {
     // create some data
     var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
         data = [];
     for (var i = 0; i < 30; i++) {
         data.push({
             country: countries[i % countries.length],
             downloads: Math.round(Math.random() * 20000),
             date: new Date(2014, i % 12, i % 28),
             sales: Math.random() * 10000
         });
     }

     // initialize grid
     var flex = new wijmo.grid.FlexGrid('#flex1', {
         autoGenerateColumns: false,
         columns: [{
             binding: 'country',
             header: 'Country',
             width: 150
         }, {
             binding: 'downloads',
             header: 'Downloads',
             format: 'n0'
         }, {
             binding: 'sales',
             header: 'Sales',
             format: 'n2',
             width: 150
         }, {
             binding: 'date',
             header: 'Date',
             width: 150
         }],
         itemsSource: data,
         gotFocus: function(s,e){
            s.startEditing(false); //quick mode
          },
          selectionChanged: function(s, e){
            setTimeout(function() {
              s.startEditing(false); //quick mode
            }, 50); // lets the grid update
          }
     });

     // create editors for columns
     createEditor(flex.columns.getColumn('country'));
     createEditor(flex.columns.getColumn('downloads'));
     createEditor(flex.columns.getColumn('sales'));
     createEditor(flex.columns.getColumn('date'));
 }

 function createEditor(editColumn) {
     var grid = editColumn.grid;

     grid.formatItem.addHandler(function (s, e) {
         var editRange = grid.editRange,
             column = e.panel.columns[e.col];
         // check whether this is an editing cell of the wanted column
         if (!(e.panel.cellType === wijmo.grid.CellType.Cell && column === editColumn && editRange && editRange.row === e.row && editRange.col ===...