Demo - Custom Editors

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.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>
<div class="container">

  <h1>
    Custom Cell Inputs in Edit Mode
  </h1>
  <div id="theGrid">
  </div>

</div>

CSS

.wj-flexgrid {
  max-height: 200px;
  margin-bottom: 12px;
}

body {
  margin-bottom: 24px;
}

JavaScript

onload = function() {

  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
  var options = 'Red,Blue,Green,Yellow,Purple'.split(',');
  var products = [
  	{ id: 0, name: 'Widget', unitPrice: 23.43 },
    { id: 1, name: 'Gadget', unitPrice: 12.33 }, 
    { id: 2, name: 'Doohickey', unitPrice: 53.07 }
	];
  var data = [];
  var dt = new Date();
  for (var i = 0; i < 100; i++) {
    data.push({
      id: i,
      date: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
      time: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
      country: countries[Math.floor(Math.random() * countries.length)],
      option: options[Math.floor(Math.random() * options.length)],
      product: products[Math.floor(Math.random() * products.length)].name,
      amount: Math.random() * 10000 - 5000,
      discount: Math.random() / 4
    });
  }

  // grid with custom editors
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	keyActionTab: 'CycleOut',
    autoGenerateColumns: false,
    itemsSource: data,
    //isReadOnly: true,
    columns: [
    	{ header: 'ID', binding: 'id', width: 40 },
      { header: 'Date', binding: 'date', format: 'd' }, 
      { header: 'Time', binding: 'time', format: 't' },
      { header: 'Country', binding: 'country' },
      { header: 'Option', binding: 'option' },
      { header: 'Product', binding: 'product' },
      { header: 'Amount', binding: 'amount', format: 'n2' }
		],
    /*gotFocus: function(s,e){
    	s.startEditing(false); //quick mode
    },*/
    selectionChanged: function(s, e){
        s.startEditing(false);//quick mode
        console.log(document.activeElement);
        console.log(s);
    }
  });

  // add custom editors to the grid
  new CustomGridEditor(theGrid, 'date', wijmo.input.InputDate, {
    format: 'd'
  });
  new CustomGridEditor(theGrid, 'time', wijmo.input.InputTime, {
    format: 't',
    min: new Date(2000, 1, 1, 7, 0),
    max: new Date(2000,...