Text wrap in Data Grids

Questions
1

Hi all,

I have been using the table component, but this does not appear to support non-continuous selection of records when the foundSet is set to multi-select.
I can select records 2,3,4 but there does not seem to be any way to select just 2 and 4.
The good thing about the table component, however, is that the row height will expand to ensure all the text of a cell fits.

So I decided to try the Data grid. It supports non-continuous selections, but the height of the rows is fixed, except if you construct some HTML with DIV’s set to display as blocks.
Looking in the documentation for ag-grid there are two columns properties called ‘textWrap’ and ‘autoHeight’.
If I try to add these to the columnDef of a Grid Column, servoy complains that these are not in the list of supported properties.

Is there any way around this?
I need a list with variable row height that allows users to select more than one record that are not next to each other…

2

Hi Christian

Did you ever found a solution for that? I have a similar situation here and also tried it with “autoHeight” and “wrapText” but without success.

Best, Roland

3

Has worked in our solution since at least 2024.03, maybe earlier (can’t remember).

Here’s a sample configuration:

[attachment=0]columnDefs.png[/attachment]

columnDefs.png
columnDefs.png412×130 2.53 KB

4

Hi Christian,

I use the NG Grid Services with one line of code plugins.ngDataGrid.columnOptions = { autoHeaderHeight: true, wrapHeaderText: true };

5

seain:
Has worked in our solution since at least 2024.03, maybe earlier (can’t remember).

Here’s a sample configuration:

[attachment=0]columnDefs.png[/attachment]

Thanks for this answer. The “cellEditor”-Property in your example helped me a lot. I didn’t knew this one.

6

rph:
Thanks for this answer. The “cellEditor”-Property in your example helped me a lot. I didn’t knew this one.

I’m not sure if it’s the answer to editing long text. The default maxLength is only 200 and since it’s bypassing Servoy’s TextEditor the maxLength of the column format won’t be applied. Setting the AGGrid property columnDefs.cellEditorParams.maxLength also has no effect.

I find it strange that AGGrid’s Text Editor has a default length of 524288, but the Large Text Editor has a default of 200.

7

With the following JSON in “columnDef” I could enter 1’000 characters:

{
   "autoHeight": true,
   "cellEditorParams": {"maxLength": 1000},
   "cellEditor": "agLargeTextCellEditor",
   "wrapText": true
}

and also in the DataGrid it looks as I would expected it.

8

Thank you. I re-checked my setup and got it working. If it helps anyone, rather than manually updating all forms I’m running the following method in the onLoad of a generic parent form.

function applyDefaultColumnDefs(_oGrid) {
	_oGrid.columns.forEach(
		/** @param {CustomType<aggrid-groupingtable.column>} _col */
		function(_col) {
			if (_col.columnDef && _col.columnDef['cellEditor']) {
				// cellEditor = 'agLargeTextCellEditor'
				if (_col.columnDef.cellEditor.includes("agLargeTextCellEditor")) {
					if (!_col.columnDef['cellEditorParams']) {
						_col.columnDef['cellEditorParams'] = {};
					}
					
					// Only override if param not set. Could be defined at design-time.
					if (!_col.columnDef.cellEditorParams['maxLength']) {
						_col.columnDef.cellEditorParams.maxLength = 21845;
					}
				}
			}
		}
    );
}