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 {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
LargeTextEditorModule,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
LargeTextEditorModule,
]);
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.",
};
});
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowData="rowData"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{
headerName: "Large Text Editor",
field: "description",
cellEditor: "agLargeTextCellEditor",
cellEditorPopup: true,
},
]);
const defaultColDef = ref<ColDef>({
flex: 1,
editable: true,
});
const rowData = ref<any[] | null>(data);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
};
return {
gridApi,
columnDefs,
defaultColDef,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
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 {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ILargeTextEditorParams,
LargeTextEditorModule,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
LargeTextEditorModule,
]);
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.",
};
});
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowData="rowData"></ag-grid-vue>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{
headerName: "Large Text Editor",
field: "description",
cellEditor: "agLargeTextCellEditor",
cellEditorPopup: true,
cellEditorParams: {
rows: 15,
cols: 50,
} as ILargeTextEditorParams,
},
]);
const defaultColDef = ref<ColDef>({
flex: 1,
editable: true,
});
const rowData = ref<any[] | null>(data);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
};
return {
gridApi,
columnDefs,
defaultColDef,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
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. |