Provided Cell Editors

The grid comes with some provided cell editors out of the box. These cell editors are listed here.

The provided cell editors are as follows:

  • agTextCellEditor: Simple text editor that uses standard HTML Input. This is the default.
  • agPopupTextCellEditor: Same as 'text' but as popup.
  • agLargeTextCellEditor: A text popup that for inputting larger, multi-line text.
  • agSelectCellEditor: Simple editor that uses standard HTML Select.
  • agPopupSelectCellEditor: Same as 'select' but as popup.
  • agRichSelectCellEditor (ag-Grid-Enterprise only): - A rich select popup that uses row virtualisation

agTextCellEditor / agPopupTextCellEditor

Simple text editors that use the standard HTML 'input' tag. agTextCellEditor is the default used if you do not explicitly set a cell editor.

The only parameter for text cell editors is useFormatter. If set to true then the grid will use the provided colDef.cellFormatter if one is provided.

agLargeTextCellEditor

Simple editor that uses the standard HTML 'textarea' tag.

The agLargeTextCellEditor takes the following parameters:

  • maxLength: Max number of characters to allow. Default is 200.
  • rows: Number of character rows to display. Default is 10.
  • cols: Number of character columns to display. Default is 60.

agSelectCellEditor / agPopupSelectCellEditor

Simple editors that use standard HTML 'select' tag.

The only parameter for text cell editors is values. Use this to provide a list of values to the cell editor.

colDef.cellEditor = 'agSelectCellEditor'; colDef.cellEditorParams = { values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'] } We have found the standard HTML select to behave odd when in the grid. This is because the browser doesn't have a great API for opening and closing the select's popup. We advise you don't use it unless you have to - that is we advise against agSelectCellEditor and agPopupSelectCellEditor as they give poor user experience, especially if using keyboard navigation. If using ag-Grid Enterprise, then you should use the provided agRichSelectCellEditor.

agRichSelectCellEditor

Available in ag-Grid Enterprise only. An alternative to using the browsers 'select' tag for drop downs inside the grid.

The agRichSelectCellEditor has the following benefits of the browsers 'select' tag:

  • Uses DOM row visualisation so very large lists can be displayed.
  • Integrates with the grid perfectly, no glitches as seen with the standard select.
  • Uses HTML to render the values - you can provide cell renderers to cusomise what each value looks like.

The agRichSelectCellEditor takes the following parameters:

  • values: List of values to be selected from.
  • cellHeight: The row height, in pixels, of each value.
  • formatValue: A callback function that allows you to change the displayed value for simple data.
  • cellRenderer: The cell renderer to use to draw each value. Cell renderers are useful to rendering rich html values, or when processing complex data. See Cell Rendering Components for creating custom cell renderers.