I'm working on a .NET 9 Blazor project with a QuickGrid. The customer wants a more "Excel-like" feel to the grid.
The raw QuickGrid tries to fit all the data on the screen and adds horizontal scroll bars to view the rest. I would like to fit more data on the screen which involves wrapping cells, making cells larger if the data requires it, borders around cells.
After a few hours of playing around with CSS, searching for code online and talking with CoPilot, I managed to get a better looking, but still flawed grid.
Question #1: are there any resources on how to format QuickGrid?
I can only find a few brief tutorials (like this one), but mostly I just try to glean what I can from StackOverflow and Reddit comments.
Question #2: specific to my case: how do I further format my grid? I got the grid to wrap data in the cells and increased the size of all the cells, but I also lost my scroll bars at the bottom. Also, nothing I've tried seemed to touch the header row.
I'm looking for how to:
- Wrap text on the header row
- Control formatting on the header row (notice the header row is bolded without me specifying this. How can I override this and make other changes (font, color, background color, etc)?
- Have the height of the rows (header and data) dynamically sized (notice in the example that there is whitespace in the cells because the height is statically defined)
- Control how many columns I want to display and overflow the rest to the right of the screen which can be accessed via a scrollbar
- Have the width more dynamically sized (a column with a short header and short data would have a smaller width than a column with a longer header and short data or short header and long data)
Here's is my code for the QuickGrid:
<QuickGrid TGridItem="EncounterValidationOutput" Items="encounterValidationOutputs.AsQueryable()"><PropertyColumn Property="item => item.InboundOriginalFileName" Title="Inbound Original File Name" Class="custom-column-width" /><PropertyColumn Property="item => item.InboundOriginalDate" Title="Inbound Original Date" Class="custom-column-width" /><PropertyColumn Property="@(item => item.InboundPath)" Title="Path" Class="custom-column-width" /><PropertyColumn Property="@(item => item.InboundFile)" Title="InboundFile" Class="custom-column-width" /><PropertyColumn Property="@(item => item.InboundFileNumber)" Title="InboundFileNumber" Class="custom-column-width" /><PropertyColumn Property="@(item => item.InboundCopyDate)" Title="InboundCopyDate" Class="custom-column-width" /><PropertyColumn Property="@(item => item.HeldClaims)" Title="HeldClaims" Class="custom-column-width" /><PropertyColumn Property="@(item => item.ClaimCount)" Title="ClaimCount" Class="custom-column-width" /></QuickGrid>Here's the CSS I have so far:
<style>.custom-column-width { width: 150px; white-space: normal; overflow: hidden; text-overflow: clip; text-align: center; vertical-align: middle; display: inline-block; border: solid; word-wrap: anywhere; table-layout: fixed; height: 100px;}</style>Here is the display without any CSS. Note the scroll bars at the bottom; I would like to keep these somehow and I'm not sure what in my css caused them to go away.
Here is the display with my CSS. Note the scrolls bars are gone. Also note that the header seems to be untouched by any of the changes to the CSS:
