Our blazing fast Grid component built with pure JavaScript
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 (21.1 KiB) Viewed 525 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 (27.82 KiB) Viewed 525 times
After hiding a column:
- Grid Headers After.png (23.98 KiB) Viewed 525 times
Looks odd, can you please upload a test case so we can try to reproduce this ourselves?
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
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
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 24 times
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!
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 (16.53 KiB) Viewed 462 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 (27.41 KiB) Viewed 462 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
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.
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!
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 (44.32 KiB) Viewed 416 times
But Material theme doesn't have borders at all. How to reproduce that?
- Screenshot 2023-04-05 at 15.53.35.png (104.83 KiB) Viewed 416 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.