Demo - Custom Editors

by Joel Parks

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 {
  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 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' }
		]
  });

  // 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
  });
  new CustomGridEditor(theGrid, 'country', wijmo.input.ComboBox, {
    itemsSource: countries
  });
  new CustomGridEditor(theGrid, 'amount', wijmo.input.InputNumber, {
    format: 'n2',
    step: 10
  });

  // create an editor based on a ComboBox
  var multiColumnEditor = new CustomGridEditor(theGrid, 'product', wijmo.input.ComboBox, {
    headerPath: 'name',
   ...