Cell edit templates - Pure JS

by Manish Gupta

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.20172.328/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20172.328/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20172.328/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20172.328/controls/wijmo.input.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 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
     });

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

 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';
         }

         // add custom editor
         var editorRoot = document.createElement('div');
       ...