Table: calculating virtualRowHeight when the rows have a different height #173

maximilianweidenauer · 2021-09-03T07:52:26Z

It should be possible that some rows have a different height than usual (when a row includes html, images or possibly more cases I can't think of right now).
When that is the case, we should probably take the div tag where all rows are located and calculate the average row height to use as virtualRowheight.
This could be a problem (performance) when the column-size changes and we need to re-adjust the virtualRowHeight.
This clearly needs some discussion

rjahn · 2024-02-20T10:07:40Z

Current status?

rjahn · 2024-02-28T09:34:01Z

???

maximilianweidenauer · 2024-02-28T09:36:09Z

This Ticket is open since 2021 and I've never encountered an issue that would need this. So it is not needed

rjahn · 2024-02-28T09:39:13Z

I guess it wasn't used because it didn't work or it just works?

Did you test this feature wit current implementation?

maximilianweidenauer · 2024-02-28T09:42:08Z

I will test it.

maximilianweidenauer · 2024-02-28T12:50:09Z

@mhandsteiner created a project for me with enough rows to enable virtualScrolling, then I've changed a field of a row to contain HTML text so that the row height would be different for these rows. I did that for every 5-10 rows until row 300.
While testing, the virtualscrolling seemed totally fine and there have been no issues!

2024-02-28.13-48-10.mp4

video added just in case

rjahn · 2024-02-28T12:58:35Z

the toolbar looks wrong in your screenshot?

gimmixAT · 2024-11-22T15:46:19Z

@rjahn is there an example project for this? As far as I can tell, Primereact works with a single item height in their virtual scroller logic so having differently sized row heights might produce some awkward results

gimmixAT · 2024-12-04T18:15:12Z

I implemented a proof of concept that will look at the initial 100 rows and will cet the row height based on the maximum height. This seems to be the behavior in the java client @rjahn please correct me if I am wrong in this assumption.

rjahn · 2024-12-05T07:49:59Z

In swing it isn't possible to have different row heights. In react it should be. This ticket shouldn't implement same height for all rows in react. I guess there was a problem with different row heights, but it shouldn't be with current primereact versions?

If different row heights are possible and don't cause problems with react, we should allow it.

Your PoC is a cool implementation and we should keep it, but not enabled by default. You could check a new table property like: sameRowHeight (boolean).
If this property is true, you could scan the available records, without fetching additional records and if user scrolls down and triggers fetching, you could update the height.

Do you already support rowHeight, maxRowHeight, minRowHeight in your calculation? because there are properties in WebTable.

If rowHeight is set -> fixed height but also check min and max
If minRowHeight is set -> minimum height
If maxRowHeight is set -> maximum height

So, if sameRowHeight is set -> calculate and if one of rowHeight, minRowHeight, maxRowHeight is set -> should work as well

gimmixAT · 2024-12-09T13:02:29Z

I put the behavior behind and option as discussed.

Regarding rowHeight, minRowHeight and maxRowHeight - I don't think those are supported yet. The only way I can see how row heights are set right now is via the css theme. Are those props already set and sent in any of the feature screens?

rjahn · 2024-12-10T07:43:07Z

Sorry, no usage right now in demo application. But it's easy to test.

User: features
Screen: SimpleContacts (com.sibvisions.apps.mobile.demo.screens.features.SimpleContactsWorkScreen in demo/src.client folder)

UITable table = new UITable();
table.setDataBook(rdbContacts);

// test code		
table.setMinRowHeight(5);

search table.setDataBook(rdbContact); and insert your test code below. Restart application server.

rjahn · 2024-12-10T07:54:45Z

I made a test with row height and dynamic row height without setting sameRowHeight, looks good.

One problem: Server sends

<html>HansNew Line</html>

and client renders:

Leona New Line

If you want to test, simply svn update demo project and change

SimpleContactsWorkScreen -> replace:

rdbContacts.setName("contacts");
with:
rdbContacts.setName("contactsHtml");

Not sure if this is our problem or a browser problem?

rjahn · 2024-12-10T08:01:47Z

I made tests with sameRowHeight and had a problem with row selection!

Test with features and Simple Contacts Screen.

Enable same row height - code is in comment:

/*
try
{
Reflective.call(table.getResource(), "setSameRowHeightEnabled", Boolean.TRUE);
}
catch (Exception e)
{
debug(e);
}
*/

Open the screen and press New (random) button multiple times. Sometimes, it's not possible to select another record by clicking on a different row.

gimmixAT · 2024-12-12T21:23:20Z

the table should support minRowHeight & maxRowHeight now 30a3c5b

rjahn · 2024-12-13T11:08:58Z

Did you fix row selection problem as well?

gimmixAT · 2024-12-13T11:30:22Z

I wasn't able to reproduce that yet but I am still looking into it. I had to refactor the cell rendering a bit for the height measuring which caused some of the other table cell issues recently so It is very likely an issue of components not being recycled correctly.

rjahn · 2024-12-13T12:06:56Z

It doesn't occur always, but often. Sometimes it's possible to select a record after some clicks, sometimes it's not.

Maybe this screencast helps:

select_record_table.mp4

and sometimes it happens, after you delete records, that the row-height is not the same for all records:

rjahn · 2024-12-13T12:16:54Z

Did some tests: setRowHeight is always ignored.

I should explain it better:

default (sameRowHeight not set):

setRowHeight (rowHeight): if set, the rows should use this height (take care of min, max)
setMin/MaxRowHeight(min/maxRowHeight): take care of both values

sameRowHeight:

also take care of rowHeight (if set) and ignore the calculated row Height (better: don't calculate). Also check min and max if set.

no custom rowHeight set, but sameRowHeight:

calculate row height and take care of min/max (if set)

gimmixAT · 2024-12-13T14:48:18Z

rowHeight from server is now supported as well

gimmixAT · 2024-12-13T15:09:39Z

@rjahn regarding the rows not being selectable

It looks like selection requests are sent e.g. like this after creating multiple new rows and selecting the third row :

{
    "clientId": "SIx-a49db1f2-13c1-47a0-a39d-210d65c2f5fd",
    "componentId": "SimCon-QQ_T_contacts",
    "dataProvider": "JVxMobileDemo/SimCon-QQ/contacts#4",
    "filter": {
        "columnNames": [
            "ID"
        ],
        "values": [
            null
        ]
    },
    "selectedColumn": "SALU_SALUTATION",
    "rowNumber": 2
}

but the response is just an empty array

rjahn · 2024-12-16T16:18:59Z

fixed row selection - was a server bug.

I will check rowHeight asap.

rjahn · 2024-12-17T07:29:00Z

rowHeight is working if sameRowHeight is not set. In this case, all rows which are more than one line, will be bigger:

Also in case of sameRowHeight (true), the min/maxRowHeight is not working.
Just use Simple Contacts (DB) screen and play around with:

		try
		{
			com.sibvisions.util.Reflective.call(table.getResource(), "setSameRowHeightEnabled", Boolean.TRUE);
			
			rdbContacts.close();
			rdbContacts.setName("contactsHtml");
			rdbContacts.open();
		}
		catch (Exception e)
		{
			debug(e);
		}
		
table.setRowHeight(10);
table.setMinRowHeight(20);
table.setMaxRowHeight(25);

gimmixAT · 2025-01-13T12:37:11Z

@rjahn in your example you also set a height via setRowHeight. If that was set I ignored the same height flag since it was implied that all rows would have that set height.
I enabled the same height flag in this case again but this results in the set height being ignored or only used as a base height for the initial layout

rjahn · 2025-01-13T14:02:39Z

Hm.. not good, because if a developer sets a fixed row height, it should be exactly as set.
The developer could set the min row height to let it grow in height.

gimmixAT · 2025-01-13T15:01:56Z

Ok I reverted that change again

maximilianweidenauer added the needs discussion Needs input from project manager or discussion with community label Sep 3, 2021

rjahn added this to the 1.7 milestone Dec 22, 2021

rjahn modified the milestones: 1.6, 1.7 Mar 25, 2022

rjahn modified the milestones: 1.9, 2.1 May 23, 2022

rjahn modified the milestones: 2.2, 2.3 Feb 6, 2023

rjahn assigned mhandsteiner May 31, 2024

rjahn assigned gimmixAT Nov 26, 2024

gimmixAT added a commit that referenced this issue Dec 4, 2024

set table rowheight based on content -> #173

c0ba11f

gimmixAT added awaiting Feedback and removed needs discussion Needs input from project manager or discussion with community labels Dec 4, 2024

rjahn added enhancement and removed awaiting Feedback labels Dec 5, 2024

rjahn mentioned this issue Dec 6, 2024

table record height wrong #521

Closed

This was referenced Dec 9, 2024

Insert new record - wrong row height #526

Closed

Table height wrong in case of master/detail #525

Closed

gimmixAT added the awaiting Feedback label Dec 12, 2024

rjahn removed the awaiting Feedback label Dec 13, 2024

gimmixAT added the awaiting Feedback label Dec 16, 2024

rjahn added awaiting Feedback and removed awaiting Feedback labels Dec 16, 2024

rjahn removed the awaiting Feedback label Dec 17, 2024

gimmixAT added the awaiting Feedback label Jan 13, 2025

rjahn removed the awaiting Feedback label Jan 13, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Table: calculating virtualRowHeight when the rows have a different height #173

Table: calculating virtualRowHeight when the rows have a different height #173

maximilianweidenauer commented Sep 3, 2021

rjahn commented Feb 20, 2024

rjahn commented Feb 28, 2024

maximilianweidenauer commented Feb 28, 2024

rjahn commented Feb 28, 2024

maximilianweidenauer commented Feb 28, 2024

maximilianweidenauer commented Feb 28, 2024

rjahn commented Feb 28, 2024

gimmixAT commented Nov 22, 2024

gimmixAT commented Dec 4, 2024

rjahn commented Dec 5, 2024

gimmixAT commented Dec 9, 2024

rjahn commented Dec 10, 2024

rjahn commented Dec 10, 2024

rjahn commented Dec 10, 2024

gimmixAT commented Dec 12, 2024

rjahn commented Dec 13, 2024

gimmixAT commented Dec 13, 2024

rjahn commented Dec 13, 2024

rjahn commented Dec 13, 2024

gimmixAT commented Dec 13, 2024

gimmixAT commented Dec 13, 2024

rjahn commented Dec 16, 2024

rjahn commented Dec 17, 2024 •

edited

Loading

gimmixAT commented Jan 13, 2025

rjahn commented Jan 13, 2025

gimmixAT commented Jan 13, 2025

Table: calculating virtualRowHeight when the rows have a different height #173

Table: calculating virtualRowHeight when the rows have a different height #173

Comments

maximilianweidenauer commented Sep 3, 2021

rjahn commented Feb 20, 2024

rjahn commented Feb 28, 2024

maximilianweidenauer commented Feb 28, 2024

rjahn commented Feb 28, 2024

maximilianweidenauer commented Feb 28, 2024

maximilianweidenauer commented Feb 28, 2024

rjahn commented Feb 28, 2024

gimmixAT commented Nov 22, 2024

gimmixAT commented Dec 4, 2024

rjahn commented Dec 5, 2024

gimmixAT commented Dec 9, 2024

rjahn commented Dec 10, 2024

rjahn commented Dec 10, 2024

rjahn commented Dec 10, 2024

gimmixAT commented Dec 12, 2024

rjahn commented Dec 13, 2024

gimmixAT commented Dec 13, 2024

rjahn commented Dec 13, 2024

rjahn commented Dec 13, 2024

gimmixAT commented Dec 13, 2024

gimmixAT commented Dec 13, 2024

rjahn commented Dec 16, 2024

rjahn commented Dec 17, 2024 • edited Loading

gimmixAT commented Jan 13, 2025

rjahn commented Jan 13, 2025

gimmixAT commented Jan 13, 2025

rjahn commented Dec 17, 2024 •

edited

Loading