Data Grid with variable row height.

Questions
1

Hi all,

On older versions of NG-Client I have been using the column grid-option autoHeight: true and CSS to wrap text and get the grid to increase the row height where needed so all the text shows.
On Servoy 2022.12 autoHeight is no longer recognised.

WARN org.sablo.BrowserConsole - ag-grid: invalid gridOptions property 'autoHeight' did you mean any of these: gridAutoHeight,headerHeight,rowHeight,getRowHeight,groupHeaderHeight,pivotHeaderHeight,detailRowHeight,pivotGroupHeaderHeight
WARN org.sablo.BrowserConsole - ag-grid: to see all the valid gridOptions properties please check: https://www.ag-grid.com/javascript-grid-properties/

Now I can’t get this to work. What is the new way of doing this?

Thanks

2

Does changing it to

gridAutoHeight

work (it’s one of the options in your error…)?

3

you said “have been using the column grid-option autoHeight: true”, but according to the error “invalid gridOptions property autoHeight” you’re adding this property now wrongly to gridOptions instead of the columnDef?

4

Gabi Boros:
you said “have been using the column grid-option autoHeight: true”, but according to the error “invalid gridOptions property autoHeight” you’re adding this property now wrongly to gridOptions instead of the columnDef?

Spot on! Thank you, I was applying the property in the wrong place. Problem solved.

5

Hi Christian

As you I use the autoHeight option for a data grid, which works nice. But when it’s an editable column, and when editing the cell, the text “jumps” to the middle of the field, for which I did not find a CSS solution to avoid this behaviour and keep the text “original”, as in image1, while editing.
Do you have the same behaviour?

Tried with selectors like

.ag-theme-bootstrap .ag-cell.ag-cell-inline-editing .ag-cell-edit-input

without success.

Image1 shows the text in the data grid row, image2 shows the situation when editing the cell.

image1.png
image1.png766×154 13.9 KB

image2.png
image2.png751×160 10 KB

6

Hi, yes I also get a single-line edit field. Annoying.

7

Could you use the browser inspector to find the class(es) on that input field when in edit mode and add some CSS to do the text wrapping in your application CSS file?

8

Hi Steve

Thanks for the hint. I use following style to make it work:

.wrap-text {
	white-space: -webkit-pre-wrap !important;
	white-space: pre-wrap !important;
	min-height: 36px;
}

Regards,