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),
                sales: Math.random() * 10000,
                date: new Date()
            });
        }

        // 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: 'date', header: 'Last Download Date', width: 150, format: 'd' }
            ],
            itemsSource: data
        });

        // create editors for numeric columns
        createNumericEditor(flex1.columns.getColumn('downloads'));
        
        createDatePickerEditor(flex1.columns.getColumn('date'));
    }
    
    function createDatePickerEditor(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';
            }

            // add custom InputNumber editor
            var editorRoot = document.createElement('div'),
                inputDate = new wijmo.input.InputDate (editorRoot);
  ...