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 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

body {
  margin-bottom: 24px;
}

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

.modal-content {
  width: 400px;
}


/* style our custom 'edit buttons' */

.wj-rowheaders .wj-cell .wj-glyph-pencil {
  opacity: .3;
  transform: scale(.5);
}

.wj-rowheaders .wj-cell:hover .wj-glyph-pencil {
  opacity: 1;
  color: #000080;
  transform: scale(1);
  transition: all linear 300ms;
}


/* wj-labeled-input: adapted from MDL styles */


/* label input container */

.wj-labeled-input {
  position: relative;
  font-size: 16px;
  display: inline-block;
  box-sizing: border-box;
  width: 300px;
  max-width: 100%;
  margin: 0 20px;
  padding: 20px 0;
}


/* Wijmo control in the container */

.wj-labeled-input .wj-control.wj-content {
  margin: 0;
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.wj-labeled-input .wj-control.wj-content button {
  opacity: 0.75;
  border-color: rgba(0, 0, 0, .1);
}

.wj-labeled-input .wj-input-group .wj-form-control {
  float: none;
}


/* label in the container (must come after the control) */

.wj-labeled-input label {
  font-size: 16px;
  top: 24px;
  bottom: 0;
  margin: 0;
  pointer-events: none;
  position: absolute;
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  color: rgba(0, 0, 0, 0.258824);
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}


/* move label out of the way when control is focused or not empty */

.wj-static-labels .wj-labeled-input:not(.wj-state-focused) + label,
.wj-labeled-input .wj-state-focused + label,
.wj-labeled-input:not(.wj-state-empty) + label {
  font-size: 12px;
  top: 4px;
  color: rgb(63, 81, 181);
  visibility: visible;
}

.wj-labeled-input .wj-state-invalid + label {
  color: #d50000;
}


/* underline label */

.wj-labeled-input label:after {
  background-color: rgb(63, 81, 181);
  bottom: 20px;
  content: '';
  height: 2px;
  left: 45%;
 ...

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', {
    autoGenerateColumns: false,
    itemsSource: data,
    keyActionTab: "CycleOut",
    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',
   ...