Our blazing fast Grid component built with pure JavaScript


Post by fcoca »

Hi,

We have this scenario:

  • Multi tables embedded in different tabs.
  • An action in a visible table/tab create new records in the hidden table.

Wrong behavior: Columns width is not resized correctly

I have isolated the issue in this playground: https://codepen.io/javicloud/pen/ZEJWrew

And you can review steps to recreate in the attached recording.

Regards
Javi

Attachments
Bryntum Column Resize Issue.mp4
(1.15 MiB) Downloaded 85 times

Post by mats »

Reproduced, we should be able to fix that for next release. Ticket https://github.com/bryntum/support/issues/3582


Post by fcoca »

Hi Mats,

Looks like the issue is still reproducible.

Playground: https://codepen.io/javicloud/pen/ZEJWrew
Steps to recreate: download/file.php?id=15101

Please have a look.

Regards
Javi


Post by Animal »

It can't do any measuring while it's display:none, so any call to auto size a column should see if it is visible, and if not, queue up a once : true paint listener to perform the operation the next time it becomes possible.


Post by Animal »

Try this as an override of the ColumnAutoWidth feature class:

    syncAutoWidthColumns() {
        const
            me = this,
            grid = me.client,
            storeGeneration = me.storeGeneration;

        // Only measure immediately if we are visible.
        if (grid.isVisible) {
            if (me.lastSync !== storeGeneration) {
                me.lastSync = storeGeneration;

                let autoWidth, resizingColumns;

                for (const column of grid.columns.visibleColumns) {
                    autoWidth = column.autoWidth;

                    if (autoWidth) {
                        if (autoWidth === true) {
                            autoWidth = me.default;
                        }

                        grid.resizingColumns = resizingColumns = true;
                        column.resizeToFitContent(autoWidth);
                    }
                }

                if (resizingColumns) {
                    grid.resizingColumns = false;
                    grid.afterColumnsResized();
                }
            }

            if (me.hasTimeout('syncAutoWidthColumns')) {
                me.clearTimeout('syncAutoWidthColumns');
            }
        }
        // Otherwise wait till next time we get painted (shown, or a hidden ancestor shown)
        else if (me.findListener('paint', 'syncAutoWidthColumns', me) === -1) {
            me.on({
                paint   : 'syncAutoWidthColumns',
                thisObj : me,
                once    : true
            });
        }
    }

Post by Animal »

Hm. grid.isVisible is returning true.

Of course it's not recommended that you use things like that.

It doesn't use the grid's lifecycle to hide and show. You're "going behind its back" and using CSS to hide it so it doesn't know.

If you use a TabPanel to show each component, this would work.


Post by Animal »

Ah, yes, that works, it just needs the grid to have requireSize : true, so that it reports it's not visible if it has no size


Post by Animal »

But of course just poking the CSS to reshow the grid doesn't fire its paint event.

Use a TabPanel.


Post Reply