QuickGrid Blazor .NET 8 - wordwrap title to next line

Question

I want to use QuickGrid with Blazor on .NET 8. I have columns with small digit data, but long titles to describe the data properly.

At the moment, if I want the title to be displayed, I need to make the column as wide as the title. This wastes a lot of screen space. I want to make the title appear on two lines.

I tried every word wrap option in CSS, but none work.

Any clues or ideas?

Thanks!

Answer 1

UPDATE

Here I got a feasible styling.

You can keep using PropertyColumn only, and need only the setting in app.css.

.quickgrid[theme=TooLong] .col-title-text {
    width: 250px;
    /*This two core settings*/
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

-------------------------------------------------------------------------------------------------------------

You are not describing your question clearly, I'll show you a sample.

Based on my project, you might apply QuickGrid like this:

<QuickGrid Items="data" Theme="TooLong">
    <PropertyColumn Title="This is a very very very long title of the first column" Property="@(item => item.PropertyA)" Class="TTTitle">
    </PropertyColumn>
    <PropertyColumn Title="Another Long Title That Needs Wrapping" Property="@(item => item.PropertyB)" Class="TTTitle">
    </PropertyColumn>
</QuickGrid>

And the column acts like you described, being too long and won't wrap even with length configured.

Solution

1. You could add the HeaderTemplate to make it wrap automatically.

<QuickGrid Items="data" Theme="TooLong">
    <PropertyColumn Title="Title1" Property="@(item => item.PropertyA)" Class="TTTitle">
        <HeaderTemplate>
            <div class="header">This is a very long title that needs to wrap</div>
        </HeaderTemplate>
    </PropertyColumn>
    <PropertyColumn Title="Title2" Property="@(item => item.PropertyB)" Class="TTTitle">
        <HeaderTemplate>
            <div class="header">Another very long title that needs to wrap</div>
        </HeaderTemplate>
    </PropertyColumn>
</QuickGrid>

I start the with a default BlazorWeb App .net8 and latest package of Microsoft.AspNetCore.Components.QuickGrid. And you can see that it will wrap automatically.

In app.css I set the length, two ways both ok

.quickgrid[theme=TooLong] > thead .TTTitle {
    width: 250px;
}

.quickgrid .col-header-content {
    width: 250px;
}

2. What's More

There is another design, you could dynamically adjust the width of title during the app is running. Also based on the usage of HeaderTemplate.

drag to adjust the width