Cell Editors

A cell editor component is the UI that appears, normally inside a cell, that takes care of the edit operation.

Editor Types

An editor can be in a popup or in cell.

In Cell

The contents of the cell will be cleared and the editor will appear inside the cell. The editor will be constrained to the boundaries of the cell, so if it is larger than the provided area it will be clipped. When editing is finished, the editor will be removed and the renderer will be placed back inside the cell again.

Popup

The popup will appear over the cell, however it will not change the contents of the cell. Behind the popup the cell will remain intact until after editing is finished which will result in the cell being refreshed.

const columnDefs = [
    {
        field: 'name',
        editable: True,
        # uses the provided Text Cell Editor (which is the default)
        cellEditor: 'agTextCellEditor'
    },

        # show this editor in a popup
        cellEditorPopup: True,
        # position the popup under the cell
        cellEditorPopupPosition: 'under'
    }
]

Dynamic Parameters

Parameters for cell editors can be dynamic to allow different selections based on what cell is being edited. For example, you might have a ‘City’ column that has values based on the ‘Country’ column. To do this, provide a function that returns parameters for the property cellEditorParams.

This function is defined in the dashAgGridFunctions.js file in the assets folder:

var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

dagfuncs.dynamicOptions = function(params) {
    const selectedCountry = params.data.country;
    if (selectedCountry === 'United States') {
        return {
            values: ['Boston', 'Chicago', 'San Francisco'],
        };
    } else {
        return {
            values: ['Montreal', 'Vancouver', 'Calgary']
        };
    }
}

Custom Datepicker Component

The example below demonstrates how to use a custom date picker as a cell editor. The ‘Date’ column uses a component
cell editor that allows you to pick a date using jQuery UI Datepicker.

• the jQuery is included as external scripts and stylesheets in the app constructor.
• The Custom function DatePicker is defined in the dashAgGridFunctions.js file in the assets folder.
• The Custom DatePicker is supplied by name via cellEditor.
• You can change the format of the date returned from the DatePicker in the DatePicker function.

To run this example, add the following to your dashAgGridFunctions.js file in your app’s assets folder:

var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

dagfuncs.DatePicker = class {

    // gets called once before the renderer is used
  init(params) {
    // create the cell
    this.eInput = document.createElement('input');
    this.eInput.value = params.value;
    this.eInput.classList.add('ag-input');
    this.eInput.style.height = 'var(--ag-row-height)';
    this.eInput.style.fontSize = 'calc(var(--ag-font-size) + 1px)';

    // <a href="https://jqueryui.com/datepicker/">https://jqueryui.com/datepicker/</a>
    $(this.eInput).datepicker({
      dateFormat: 'dd/mm/yy',
      onSelect: () => {
        this.eInput.focus();
      },
    });
  }

  // gets called once when grid ready to insert the element
  getGui() {
    return this.eInput;
  }

  // focus and select can be done after the gui is attached
  afterGuiAttached() {
    this.eInput.focus();
    this.eInput.select();
  }

  // returns the new value after editing
  getValue() {
    return this.eInput.value;
  }

  // any cleanup we need to be done here
  destroy() {
    // but this example is simple, no cleanup, we could
    // even leave this method out as it's optional
  }

  // if true, then this editor will appear in a popup
  isPopup() {
    // and we could leave this method out also, false is the default
    return false;
  }

}

Custom Number Input Component

The example below demonstrates how to use a custom number input as a cell editor. The ‘Price’ column uses a component
cell editor that is an HTML input with type=”number”.

Notice the following:

• The Custom function NumberInput is defined in the dashAgGridFunctions.js file in the assets folder.
• The Custom NumberInput is supplied by name via cellEditor.
• When editing the number the user may only enter numbers and a decimal point. The number is formatted for display
  using a valueFormatter. See

To run this example, add the following to the dashAgGridFunctions.js file in your app’s assets folder:

var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

dagfuncs.NumberInput = class {
    // gets called once before the renderer is used
  init(params) {
    // create the cell
    this.eInput = document.createElement('input');
    this.eInput.value = params.value;
    this.eInput.style.height = 'var(--ag-row-height)';
    this.eInput.style.fontSize = 'calc(var(--ag-font-size) + 1px)';
    this.eInput.style.borderWidth = 0;
    this.eInput.style.width = '95%';
    this.eInput.type = "number";
    this.eInput.min = params.min;
    this.eInput.max = params.max;
    this.eInput.step = params.step || "any";
    this.eInput.required =  params.required;
    this.eInput.placeholder =  params.placeholder || "";
    this.eInput.name = params.name;
    this.eInput.disabled = params.disabled;
    this.eInput.title = params.title || ""
  }

  // gets called once when grid ready to insert the element
  getGui() {
    return this.eInput;
  }

  // focus and select can be done after the gui is attached
  afterGuiAttached() {
    this.eInput.focus();
    this.eInput.select();
  }

  // returns the new value after editing
  getValue() {
    return this.eInput.value;
  }

  // any cleanup we need to be done here
  destroy() {
    // but this example is simple, no cleanup, we could
    // even leave this method out as it's optional
  }

  // if true, then this editor will appear in a popup
  isPopup() {
    // and we could leave this method out also, false is the default
    return false;
  }
}

Cell Editing can also be done with Cell Editor Components. See: