Help - attaching a table takes too long


today i did some tests with an UI table. It uses a SQLContainer with 60.000 records as datasource. Except ticket 7947everything works really fine.

But if i am removing the table from it’s parent and adding it a while later, it takes about 5 seconds to show up the table again! The table calls refreshRenderedCells() which paints all cells again. Why does it do so? I used the approach the remove and add the table to reduce build up time.

Is there a workaround that i can use? It is really important to dramaticaly reduce the time to show the table again. It should be less than 0,2 seconds.

Any suggestions are highly welcome.

Florian Pirchner

Now i have detailed informations about the problem.

My UI table was located in a TabSheet tab. Now - for testing - I duplicated the tab 4 times. So i had 5 UI tables with SQLContainer with 50.000 records each.

The interesting part is, that it does not matter how much tabs (including the tables) are attached to the tabSheet in one roundtrip.
The time to show the visible UI table only depends on the currently visible table. To attach 1 tab at the roundtrip consumes the approximately same time as attaching 5 tabs (containing UI tables).

That was really interesting.

But it also took about 5 seconds (should be about 0.2 - 0.5 seconds). Then i reduced the number of visible columns from about 30 to 2 columns. And the time to show the table was < 0.5 seconds.

Reduce the amout of columns and the time to show set a table to visible will decrease.

I am going to add a bug. Maybe the core team can do some enhancements, that existing property information can be reused at the client side if a table is attached again?!


That’s logical. Only the visible components need to be built. A table with many rows is as fast to display than a small table: only visible rows (and neighbors) are built. But all columns, even those not visible (if there is an horizontal scrollbar) must be rendered. So, tables with lot of columns takes a long time to build and display.
The browser is important too: Chrome has still the fastest JavaScript engine of all browsers (Firefox 9 promises big speed gain here), and the Dom building efficiency is important too.

Last, I haven’t fully understood your use case, but a possible approach is to use a pure CSS solution to hide the table. Look at the visibility and the display properties.

Thanks a lot for your fast answer… Now i did another test.

The problem seems to be, that my table is located in a tabSheet:
pagesize 20 records
columns: 30

Test 1:
Creating a tab with the UI table - Rendertime 1 second

Test 2:
Opening a second empty tab.
Switch to it (<< 0,5 sec)
Switch back to tab with the table - Rendertime 3 seconds

Test 3:
Adding a button to the application which removes / adds the table to and from the tab content.
→ Removing the table - Rendertime for the empty tab << 0,5 second
→ Adding the table again - Rendertime like Test 1: 1 second

I guess that switching a tab causes the long time required to render the tab content (Table).

Are there any problems known about rendering tables inside a tab sheet tab if the tab becomes selected?

Florian Pirchner

I haven’t used Tabs yet, but I plan to do, with large tables, so the answer interests me as well!