CODEWITHSUNDEEP
blazorquickgrid
curious
curious

Reputation: 109

Blazor QuickGrid Column Width - How to set?

Is there a way to set a Blazor QuickGrid's columns to a 'fixed' specific width; rather that what seems to be the default whereby columns always adjust to the width of their contents?

Without this capability, I'm finding that as I 'paginate' through the QuickGrid's contents, the grid changes its overall width with practically every page; presumably for the reason I described above. I think this may result in a compromised experience for a User.

I've searched for this issue on the web, found nothing, and am almost convinced it's not possible. I hope I'm wrong. (Fwiw, one site even seemed to indicate that this feature might currently be 'backlogged'; but I'm hoping that's not true... or is true no longer).

Upvotes: 2

Views: 4183

Answers (2)

Artem Fomin
Artem Fomin

Reputation: 143

As simple as passing a CSS class to it. For example we have a QuickGrid component

<QuickGrid ItemsProvider="_someEntityProvider" Pagination="_pagination">
    <PropertyColumn Property="@(x => x.Name)" Sortable="true" Class="example-custom-class" />
    <PropertyColumn Property="@(x => x.ValidTill)" Title="Valid Till" Format="dd.MMM.yyyy" Sortable="true" />
    <PropertyColumn Property="@(x => x.Something)" />
</QuickGrid>

Then in MyComponent.razor.css we specify what do we want from these CSS classes

::deep .example-custom-class {
    width: 300px;
}

/* Other CSS */

As a result we have our column width

REMINDER: To keep ::deep pseudo-class work in Blazor QuickGrid (or any other Blazor component) should not be a root of the host component. Wrap it at least in div.

Upvotes: 1

curious
curious

Reputation: 109

For what it's worth, I finally came upon a site that helped me with this issue (and a few other QuickGrid styling issues to boot). It may not surprise many of you, but proper use of CSS begins to address... not all... but a few significant QuickGrid styling concerns (including the concern I expressed about wanting more control over QuickGrid column widths). In hopes that this will also help others, I'll place the link to that site below:

https://aspnet.github.io/quickgridsamples/

Upvotes: 2

Related Questions