Vue Data GridLarge Text Cell Editor

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.

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

Continue to the next section: Select Cell Editor.