Simple editor that uses the standard HTML textarea, allowing users to enter text shown over multiple lines.
Enabling Large Text Cell Editor Copy Link
Edit any cell in the grid below to see the Large Text Cell Editor.
import {
ClientSideRowModelModule,
ColDef,
GridApi,
GridOptions,
LargeTextEditorModule,
ModuleRegistry,
createGrid,
enableDevValidations,
} from "ag-grid-community";
// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
LargeTextEditorModule,
]);
const columnDefs: ColDef[] = [
{
headerName: "Large Text Editor",
field: "description",
cellEditor: "agLargeTextCellEditor",
cellEditorPopup: true,
},
];
const data = Array.from(Array(20).keys()).map(() => {
return {
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
};
});
let gridApi: GridApi;
const gridOptions: GridOptions = {
defaultColDef: {
flex: 1,
editable: true,
},
columnDefs: columnDefs,
rowData: data,
};
const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
<div id="myGrid" style="height: 100%"></div>
Enabled with agLargeTextCellEditor and configured with ILargeTextEditorParams.
columnDefs: [
{
cellEditor: 'agLargeTextCellEditor',
cellEditorPopup: true,
cellEditorParams: {
maxLength: 100
}
// ...other props
}
] Customisation Copy Link
Editor Size Copy Link
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.
import {
ClientSideRowModelModule,
ColDef,
GridApi,
GridOptions,
ILargeTextEditorParams,
LargeTextEditorModule,
ModuleRegistry,
createGrid,
enableDevValidations,
} from "ag-grid-community";
// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
LargeTextEditorModule,
]);
const columnDefs: ColDef[] = [
{
headerName: "Large Text Editor",
field: "description",
cellEditor: "agLargeTextCellEditor",
cellEditorPopup: true,
cellEditorParams: {
rows: 15,
cols: 50,
} as ILargeTextEditorParams,
},
];
const data = Array.from(Array(20).keys()).map(() => {
return {
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
};
});
let gridApi: GridApi;
const gridOptions: GridOptions = {
defaultColDef: {
flex: 1,
editable: true,
},
columnDefs: columnDefs,
rowData: data,
};
const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
<div id="myGrid" style="height: 100%"></div>
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 Copy Link
Properties available on the ILargeTextEditorParams interface.
Max number of characters to allow. |
Number of character rows to display. |
Number of character columns to display. |