FNCGrid rendering issue when using large row counts in popup form

WEB TMS WEB Core
1

An issue was observed with FNCGrid when displayed within popup form. If the number of rows is large enough (e.g., 10,000 rows), the grid's cells initially shrink, resulting in unexpected white spaces between the cells and scrollbars. The issue resolves itself when interacting with the grid (e.g., double-clicking a cell or resizing the browser window).

Use the attached demo project:
56. FNCGrid.zip (3.2 MB)

  1. After compiling the project, click the button on the main page to open the first pop up form:

    image
    image1132×934 12.9 KB

  2. On the first popup, enter a large number (e.g., 10000) for the row count, and click the "Open second Popup" button.

  3. If row number is set to be large enough, say 10000, The grid's cells shrink, causing unexpected white spaces near the scrollbar area：

image
image2128×1516 51 KB

  1. If double-clicking any cell on the FNCGrid, or resize the browser, the FNCGrid becomes normal view. That is:
    The grid immediately adjusts and appears correctly without white spaces:

    image
    image2101×1506 106 KB
    .

  2. A different test: if smaller row number is set, say 1000, which can be changed on first pop up for, FNCGrid looks normal without rendering issue:

    image
    image2113×1488 105 KB

Any idea to this issue?

Thanks,

4

Do you use the latest version of TMS FNC UI Pack & TMS WEB Core as we tested this here and do not see this issue.

5

Hi Bruno,

Thanks for reply.

I have updated all the TMS Web core libraries we are using right now to their latest ones. Please see below list:

image

Unluckily, I compiled and run the demo version attached in the post, I still saw the rendering issue on FNCGrid.

I have also attached a video here: https://www.dropbox.com/scl/fi/y3mdbxn90w43rs84gl7kh/FNCGRid.mp4?rlkey=rqg96cfanigua5bs3ew74au8x&st=9uy6ipev&dl=0

6

What is the DPI of your screen? What is the DPI setting of your form designer in the IDE?

7

I checked my screen setting:

image
image1486×447 85.3 KB

Then if change my Scale from 150% down to 100%, then the issue is gone.

By the way, my DPI setting on IDE is:

image
image1646×891 114 KB

Is there a way & tip so I can avoid this issue even though my scale setting is 150%?

Thanks，

9

The issue is that you are trying to assign a large height number, which might be problematic in the scaling and configuration of the grid. We tested here an on our system with 150% we noticed a height assignment of 45.000 pixels. We'll investigate what is going on when the height of a control with a HTML canvas is set to this height. For now as a workaround, please limit the height of the grid.

10

It turns out a browser limitation is a canvas of 16384x16384:

:no_entry_sign: Browser Limits

  • Browsers have maximum texture sizes (because the canvas is backed by a GPU texture).
    • Chrome, Firefox, Safari, Edge all have different limits, but usually around:
      • ~16,384 x 16,384
      • Some devices (especially mobile) can be much lower.
  • If you exceed these limits:
    • The canvas may silently fail.
    • Drawing operations may not work properly.
    • You'll see empty, black, or incomplete rendering.

We will now clip to this size to avoid such problems. This improvement will be in the next TMS WEB Core update.

11

Thanks Bruno for the updates. Looking forward to it!