Cell edit templates - Pure JS

HTML

<script src="http://cdn.wijmo.com/5.20151.42/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20151.42/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20151.42/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.42/controls/wijmo.grid.min.js"></script>
    <h1>FlexGrid with custom cell editors - Pure JS</h1>
    <div id="flex1" style="height: 200px"></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 flex1 = new wijmo.grid.FlexGrid('#flex1', {
            autoGenerateColumns: false,
            columns: [
                { binding: 'country', header: 'Country', width: 150 },
                { binding: 'downloads', header: 'Downloads', format: 'n0', width: 150 },
                { binding: 'sales', header: 'Sales', format: 'n2', width: 150 },
                
                { binding: 'date', header: 'Date', width: 150 },
            ],
            itemsSource: data
        });

          // create editors for columns
            createEditor(flex1.columns.getColumn('downloads'));
            createEditor(flex1.columns.getColumn('sales'));
            createEditor(flex1.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 === e.col)) {
                    return;
                }

                // hide standard editor (don't remove!)
                if (e.cell.firstChild) {
                    e.cell.firstChild.style.display = 'none';
 ...