JavaScript Data Grid

Large Text Cell Editor

javascript logo

Simple editor that uses the standard HTML textarea, allowing users to enter text shown over multiple lines.

Enabling Large Text Cell Editor

Edit any cell in the grid below to see the Large Text Cell Editor.

Enabled with agLargeTextCellEditor and configured with ILargeTextEditorParams.

columnDefs: [
    {
        cellEditor: 'agLargeTextCellEditor',
        cellEditorPopup: true,
        cellEditorParams: {
            maxLength: 100
        }
        // ...other props
    }
]

Customisation

Editor Size

The width and height of the Large Text Cell Editor can be customised. Edit any cell in the grid below to see the editor displayed with a modified size.

To customise the size, there are two options:

  • cols: The average number of characters displayed.
  • rows: The number of lines of text displayed.
columnDefs: [
    {
        cellEditor: 'agLargeTextCellEditor',
        cellEditorPopup: true,
        cellEditorParams: {
            rows: 15,
            cols: 50
        }
        // ...other props
    }
]

API Reference

Properties available on the ILargeTextEditorParams interface.

Continue to the next section: Select Cell Editor.