Data Grid with variable row height.

Questions and answers for designing and implementing forms in Servoy

Data Grid with variable row height.

Postby swingman » Fri Sep 08, 2023 1:05 pm

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.

Code: Select all
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
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Data Grid with variable row height.

Postby rafig » Fri Sep 08, 2023 1:27 pm

Does changing it to
Code: Select all
gridAutoHeight

work (it's one of the options in your error...)?
Servoy Certified Developer
Image
rafig
 
Posts: 696
Joined: Mon Dec 22, 2003 12:58 pm
Location: Watford, UK

Re: Data Grid with variable row height.

Postby Gabi Boros » Fri Sep 08, 2023 1:42 pm

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?
Gabi Boros
Servoy
Gabi Boros
 
Posts: 399
Joined: Tue Jun 26, 2007 4:03 pm
Location: Timisoara, Romania

Re: Data Grid with variable row height.

Postby swingman » Fri Sep 08, 2023 2:01 pm

Gabi Boros wrote: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.
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Data Grid with variable row height.

Postby huber » Mon Nov 06, 2023 5:43 pm

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

Code: Select all
.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.
Attachments
image1.png
image1.png (22.41 KiB) Viewed 6165 times
image2.png
image2.png (16.38 KiB) Viewed 6165 times
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 515
Joined: Mon May 14, 2012 11:31 pm

Re: Data Grid with variable row height.

Postby swingman » Mon Nov 06, 2023 8:34 pm

Hi, yes I also get a single-line edit field. Annoying.
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Data Grid with variable row height.

Postby steve1376656734 » Wed Nov 08, 2023 4:29 pm

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?
Steve
SAN Developer
There are 10 types of people in the world - those that understand binary and those that don't
steve1376656734
 
Posts: 324
Joined: Fri Aug 16, 2013 2:38 pm
Location: Ashford, UK

Re: Data Grid with variable row height.

Postby huber » Fri Jan 26, 2024 4:55 pm

Hi Steve

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

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


Regards,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 515
Joined: Mon May 14, 2012 11:31 pm


Return to Forms

Who is online

Users browsing this forum: No registered users and 2 guests

cron