Allow editing in many rows at once

This example shows how a cell-renderers can be used in a way to allow users to edit multiple rows and values at once.

This functionality works by using cell-renderers instead of of editors, by providing each renderer with a `editingModeEnabled` flag to consume, the renderer can either show the cell's value or an input where changes can be made:

class GenericEditorAsRenderer {
  init(params) {
    this.shouldBeEditing = params.shouldBeEditing;
    this.valueSpan = document.createElement('span');
    this.valueSpan.innerText = params.value;

    this.inputField = document.createElement('input');
    this.inputField.value = params.value;
    this.inputField.onchange = () => params.setValue(this.inputField.value);
  }

  getGui() {
    return this.shouldBeEditing() ? this.inputField : this.valueSpan;
  }

  refresh(params) {
    return false;
  }
}

note that 'shouldBeEditing' is a function provided through the cellRendererParams:

    cellRenderer: GenericEditorAsRenderer,
    cellRendererParams: {
      shouldBeEditing: () => editingModeEnabled,
    },

It is provided as a function so upon a redraw the value is refreshed.

let editingModeEnabled = false;

function toggleEdits() {
  editingModeEnabled = !editingModeEnabled;
  gridOptions.api.redrawRows();
}

Other Versions:

• React
• Angular

The following feature request should alleviate the need for this work around:

AG-1195

Allow editing in many rows at once, and let edit mode be turned on by default. Likely to be a callback