Our blazing fast Grid component built with pure JavaScript


Post by jmbartel »

We've got a grid with 3 layers of headers. And we have a couple issues with column alignment. The first seems to be caused by the width of child headers not filling the width of the parent header.

Misaligned Widths.png
Misaligned Widths.png (21.1 KiB) Viewed 480 times

In the above image you can see that the Performance Component parent header is wider than it's children headers. No width is set on the parent headers, only on the child headers.

The second issue we see is when a user shows/hides a header, sometime the headers get scrunched up on top of each other, which once again messes with alignment between header and columns. Are there any grid redraw functions that might help with that? Or something else I can do to prevent that?

Before hiding a column not in the screenshot:

Grid Headers Before.png
Grid Headers Before.png (27.82 KiB) Viewed 480 times

After hiding a column:

Grid Headers After.png
Grid Headers After.png (23.98 KiB) Viewed 480 times

Post by mats »

Looks odd, can you please upload a test case so we can try to reproduce this ourselves?


Post by jmbartel »

The attached code will exhibit the hiding columns problem - as for the column widths issue after doing some more messing around, I wonder if it's mostly a CSS issue with column headers being forced to show their full text on parent headers and not ellipsis.

Attachments
gridDefinition.txt
(28.58 KiB) Downloaded 25 times

Post by alex.l »

Hi jmbartel,

I see 2nd and 3rd issue, but I cannot reproduce 1st issue using the code you provided. I applied columns config into our basic grid demo, and I don't see that problem. Do you?

For the rest I filed a ticket here https://github.com/bryntum/support/issues/6483

All the best,
Alex


Post by jmbartel »

Just attached a new one with a slightly different column definition that on my development machine has the 1st issue on the Performance Component column. But when I try to replicate it using your online examples with the column definition it doesn't show up. So, not sure what you'll see with it.

Attachments
gridDefinition2.txt
1st issue on Performance Component column
(28.58 KiB) Downloaded 23 times

Post by alex.l »

Hi, I don't see the problem using your code, unfortunately. This might be related to custom CSS styling if you applied that. Please check that moment!

All the best,
Alex


Post by jmbartel »

Looks like the last sample I gave you left out the sample I tried to build. Attached is an updated one that you should see the issue on. I'm also adding some screenshots I took testing this in a local environment with only Bryntum's default CSS and nothing else applied. Both issues crop up.

After hiding a group

Hide Group Column Header Misalign Columns no CSS except Bryntum.png
Hide Group Column Header Misalign Columns no CSS except Bryntum.png (16.53 KiB) Viewed 417 times

Performance Review column wider than children causing misalignment (default CSS, no custom CSS). Columns colored to show misalignment with headers.

Misalign Grid Headers no CSS except Bryntum.png
Misalign Grid Headers no CSS except Bryntum.png (27.41 KiB) Viewed 417 times

I also played around with adding the CSS mentioned in the issue on git, but all that does is align the header vertically. Doesn't help at all with the width and overlap issues we're seeing.

Attachments
gridDefinition2.txt
(65.45 KiB) Downloaded 24 times

Post by alex.l »

Sorry, I still cannot reproduce that in our examples.
I see the problem with alignment after I hide some columns, but I don't see the problem with "parent header is wider than it's children headers" initially.
Please try to reproduce that in online demos, maybe here https://bryntum.com/products/grid/examples/basic/
Apply your configs to the Grid using inline editor and check if you see the problem.
Make sure you used latest released version locally.

All the best,
Alex


Post by jmbartel »

I think I figured out where the issue is for the parent headers being wider. I think it's a problem only in the Material CSS. I switch your demo to use the Material CSS and I can see the issue crop up in your demos. And when I switch to the Stockholm CSS locally, the issue goes away. We'd like to use the Material CSS, so any help rectifying it would be great. Thanks!


Post by alex.l »

To clarify, the first issue is

The first seems to be caused by the width of child headers not filling the width of the parent header.

Screenshot 2023-04-05 at 15.52.15.png
Screenshot 2023-04-05 at 15.52.15.png (44.32 KiB) Viewed 371 times

But Material theme doesn't have borders at all. How to reproduce that?

Screenshot 2023-04-05 at 15.53.35.png
Screenshot 2023-04-05 at 15.53.35.png (104.83 KiB) Viewed 371 times

Could you please attach full code you used to reproduce the issue using our examples? With clear steps to reproduce and data included. This will help us a lot to go forward.

All the best,
Alex


Post Reply