Demo - Inline Editing

by Joel Parks

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>
    Inline Editing
  </h1>
  <p>
    Although the FlexGrid provides efficient, Excel-style
    editing by default, you may want to customize the 
    editing behavior.</p>
  <p>
    If for some reason you don't like the Excel-style
    editing and prefer to add editing buttons to every
    row (typical of editable HTML tables), you can 
    accomplish that using the <b>formatItem</b> event
    and a little code.</p>
  <p>
    The grid below demonstrates this approach:</p>
  <div id="theGrid">
  </div>

  <!-- template for buttons on items in view mode -->
  <div id="tplBtnViewMode" style="display:none">
    <button id="btnEdit" class="btn btn-default btn-sm">
      <span class="glyphicon glyphicon-pencil"></span> Edit
    </button>
    <button id="btnDelete" class="btn btn-default btn-sm">
      <span class="glyphicon glyphicon-remove"></span> Delete
    </button>
  <div>

  <!-- template for buttons on items in edit mode -->
  <div id="tplBtnEditMode" style="display:none">
    <button id="btnOK" class="btn btn-primary btn-sm">
      <span class="glyphicon glyphicon-ok"></span> OK
    </button>
    <button id="btnCancel" class="btn btn-warning btn-sm">
      <span class="glyphicon glyphicon-ban-circle"></span> Cancel
    </button>
  </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,Sweden,Norway,Denmark'.split(',');
  var data = [];
  for (var i = 0; i < countries.length; i++) {
    data.push({
      id: i,
      country: countries[i],
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000,
      overdue: (i + 1) % 4 == 0
    });
  }

  // create the grid with custom editing behavior
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    isReadOnly: true,
    selectionMode: 'None',
    headersVisibility: 'Column',
    itemsSource: data,
    columns: [
    	{ binding: 'id', header: 'ID', width: 50 },
      { binding: 'country', header: 'Country', isRequired: true, dataMap: countries },
      { binding: 'sales', header: 'Sales', format: 'n2' }, 
      { binding: 'expenses', header: 'Expenses', format: 'n2' },
      { binding: 'buttons', header: 'Edit', width: 160 }
		]
  });

  // make rows taller to accommodate edit buttons and input controls
  theGrid.rows.defaultSize = 40;

  // custom formatter to paint buttons and editors
  theGrid.formatItem.addHandler(function(s, e) {
    if (e.panel == s.cells) {
      var col = s.columns[e.col],
      		item = s.rows[e.row].dataItem;

      if (item == currentEditItem) {

        // create editors and buttons for the item being edited
        switch (col.binding) {
          case 'buttons':
            e.cell.innerHTML = document.getElementById('tplBtnEditMode').innerHTML;
            e.cell.dataItem = item;
            break;
          case 'country':
          case 'sales':
          case 'expenses':
            e.cell.innerHTML = '<input class="form-control" ' +
              'id="' + col.binding + '" ' +
              'value="' + s.getCellData(e.row, e.col, true) + '"/>';
            break;
        }
        console.log(col.binding);
      } else {

        // create buttons for items not being edited
        switch (col.binding) {
          case 'buttons':
            e.cell.innerHTML...