Demo - Custom Editors

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    Custom Editors
  </h1>
  <p>
    Although the FlexGrid provides efficient, Excel-style editing
    by default, you may want to customize the editing behavior.</p>
  <p>
    This example defines a <b>CustomGridEditor</b> class that 
    allows any Wijmo control to be used as a grid editor:
  </p>
  <div id="theGrid">
  </div>

</div>

CSS

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

body {
  margin-bottom: 24px;
}

JavaScript

onload = function() {

  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.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)],
      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,
    columns: [{
        header: 'ID',
        binding: 'id',
        width: 40,
        isReadOnly: true
      },
      {
        header: 'Date',
        binding: 'date',
        format: 'd'
      },
      {
        header: 'Time',
        binding: 'time',
        format: 't'
      },
      {
        header: 'Country',
        binding: 'country'
      },
      {
        header: 'Product',
        binding: 'product'
      },
      {
        header: 'Amount',
        binding: 'amount',
        format: 'n2'
      }
    ],
    //rowEditEnding: function() {
    //	console.log('rowEditEnding')
    //},
    //rowEditEnded: function() {
    //	console.log('rowEditEnded')
    //}
  });

  // 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, 1, 1, 22, 0),
    step: 30
 ...