Our blazing fast Grid component built with pure JavaScript


Post by rjp »

Hi,
There seems to be a weird scrolling/UI bug that I can't find a work-around for.
I have a grid with two regions defined as follows:

const gridConfig: BryntumGridProps = {
        // Bryntum Grid config options
        columns: [
            {
                text: 'Placements',
                children: columns,
                region: 'left',
            },
            {
                text:
                    filterSettings.durationInDays == 1
                        ? moment(selectedDate).format('DD MMM')
                        : moment(dateFrom).format('DD MMM') +
                          ' - ' +
                          moment(dateTo).format('DD MMM'),
                children: dateColumns,
                region: 'right',
            },
        ],
        store: store,
        features: {
            regionResize: true,
            cellMenu: false,
            headerMenu: false,
        },
    };

This appears as:

[img]C:\temp\PlacementManager\eg-1.png[/img]

But follow these steps...

1) Drag the region splitter to the right (which is a bit difficult as the splitter doesn't quite follow the mouse drag) so that some of the columns cannot be seen (a scrollbar appears as expected).
2) Collapse the region to the right by clicking the > arrow on the splitter, so the entire right-side region disappears.
3) Expand the region again by clicking the < arrow on the splitter
4) Drag the splitter to the left to see more of the right-hand region.

When you follow these steps, the grid seems to get very confused as to how much space there is on the right-hand region. The columns on the right are restricted to a small width with a narrow scrollbar, leaving a big empty space on the right.

[img]C:\temp\PlacementManager\eg-3.png[/img]

i.e. Assuming you have Col1 to Col5 on the right hand side you get

|------------------------------------|
| Col1 | Col2 | Col3 | Co | |
| | | | | |
| | | | | |
|<----scrollbar-------> |

(scrollbar filling only some of the available width).


Post by mats »

Could you please upload a runnable test case for us so we can debug it?


Post by rjp »

region-issue.png
region-issue.png (78.28 KiB) Viewed 169 times

Just realised I can reproduce this by tweaking your own live demo example in the documentation!

https://bryntum.com/products/grid/docs/api/Grid/feature/RegionResize

Click Show Code Editor.

Change the Columns to the following (I've specifically set the regions to either 'left' or 'right' rather than just using the locked setting)

columns : [
        { field : 'firstName', text : 'First name', width : 150, region: 'left'},
        { field : 'surName', text : 'Surname', width : 150, region: 'right' },
        { field : 'city', text : 'City', flex : 1, region: 'right' },
        { field : 'team', text : 'Team', flex : 1, region: 'right' },
        { field : 'score', text : 'Score', flex : 1, region: 'right' },
        { field : 'rank', text : 'Rank', flex : 1, region: 'right' }
    ]

Then follow the steps I mentioned above (drag splitter with mouse to the right to hide some of the columns, click the > arrow on the splitter to then collapse 'right' region completely, click < arrow on splitter to expand 'right' region again, drag splitter with mouse to the left)


Post by marcio »

Hey rjp,

Thanks for the report and the example, I was able to reproduce the behavior with the configuration that you shared, here's a ticket to check that https://github.com/bryntum/support/issues/6451

Best regards,
Márcio


Post Reply