QuickGrid empty rows and border styling

[guardrex]

Fixes #34211

This includes the border fix, if you wish to keep it. I'll track the empty data row template PU issue, possibly for .NET 10, which will lead to >=10 modifications to that part of the coverage here.

Do you want the movie dB tutorial to include the border workaround for empty rows?

---

Internal previews

📄 File	🔗 Preview link
aspnetcore/blazor/components/quickgrid.md	aspnetcore/blazor/components/quickgrid

[danroth27]

I have one suggestion to simplify the content, but otherwise looks good to me.

[danroth27]

Do you want the movie dB tutorial to include the border workaround for empty rows?

I think we would use the fixed row height approach in the tutorial, so that all the pages of data have the same height, including the last one.

[guardrex]

But your fixed row height example only made all of the rows a fixed height, including the empty rows.

It ends up looking like this with empty rows and borders present (and table cell data isn't vertically centered) ...

[danroth27]

Right, the idea is that the grid maintains the same size and styling across all pages. Presumably you're using paging because you have a lot of data that you don't want to retrieve and display all at once, so it's really only the last page that shows the empty rows.

For the tutorial, if we only have five sample movies, maybe we should make the page size five?

As for centering the text, we can do that too if you think it's important. I admit that I'm not a designer! 😆

[guardrex]

I see; but as soon as they add or subtract from the tutorial's default five records (or even filter records down to one or two), they get the ugly and confusing borders.

Another possibility is to not use a Paginator ... just mention that it exists in passing. It renders beautifully without it.

Let me know which way you want to go with it, and I'll take care of it tomorrow morning.

I'm kind'a hoping to either just drop paging (with a passing mention of the feature) or just go with five records and no isolated CSS styling because adding more content is going to add more meat to an already lengthy and involved tutorial.

[danroth27]

I'd like to still include the paginator. The main addition is to guide the user to style the rows with a fixed height so that the paginator doesn't jump to a different position on the last page. That way, every page of data shows the exact same styling for the rows and the paginator doesn't move. The borders are going to be there when there's data in the rows, right? Why would you not expect the same styling to be there on the last page when some of the rows are empty?

[guardrex]

I see your point. I opened #34217, and I'll resolve it tomorrow ... before I leave for the break and die of a 🦃 overdose! 😆

[coderdnewbie]

I tries to add the following scoped css in my {COMPONENT}.razor.css (in my case it is Index.razor.css as I am doing the Movie example from the beginners guide).

Unfortunately, the scoped css is not getting applied (even after I pressed Ctrl+F5). Is there anything new that has to be done, since the css is in Assets?

This is the scoped css, I tried:

::deep tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

::deep td:empty {
    display: none;
}

I also tried:

::deep tr {
    height: 2em;
}

but the scoped css is not being applied to the quickgrid. Please help.

[guardrex]

Did u wrap the Quickgrid in a block element like a <div>?

<div>
    <QuickGrid ...>
        ...
    </QuickGrid>
</div>

[coderdnewbie]

No. I followed the tutorial, so I used the scaffold pages. Here is the code:

@page "/movies"

@implements IAsyncDisposable
@rendermode InteractiveServer

<PageTitle>Index</PageTitle>

<h1>Index</h1>

<p>
    <a href="movies/create">Create New</a>
</p>

<QuickGrid Class="table" Items="FilteredMovies" Pagination="state">
    <PropertyColumn Property="movie => movie.Title" Sortable="true"> 
        <ColumnOptions>
            <div>
                <input type="search" @bind="TitleFilter" @bind:event="oninput" autofocus />
            </div>
        </ColumnOptions>
    </PropertyColumn>
    <PropertyColumn Property="movie => movie.ReleaseDate" Sortable="true" />
    <PropertyColumn Property="movie => movie.Genre" Sortable="true" />
    <PropertyColumn Property="movie => movie.Price" Sortable="true" />

    <TemplateColumn Context="movie">
        <a href="@($"movies/edit?id={movie.Id}")">Edit</a> |
        <a href="@($"movies/details?id={movie.Id}")">Details</a> |
        <a href="@($"movies/delete?id={movie.Id}")">Delete</a>
    </TemplateColumn>
</QuickGrid>

<Paginator State="state" />

@code {
    private IDbContextFactory<BlazorMovieCRUDDemoContext> dbFactory { get; set; }
    PaginationState state = new PaginationState { ItemsPerPage = 5 };

    string TitleFilter = string.Empty;
    IQueryable<Movie> FilteredMovies => context.Movie.Where(s => s.Title!.Contains(TitleFilter));

    public Index(IDbContextFactory<BlazorMovieCRUDDemoContext> dbFactory)
    {
        this.dbFactory = dbFactory;
    }

    private BlazorMovieCRUDDemoContext context = default!;

    protected override void OnInitialized()
    {
        context = dbFactory.CreateDbContext();
    }

    public async ValueTask DisposeAsync() => await context.DisposeAsync();
}

[guardrex]

Yeah ... go ahead and wrap that QuickGrid in a <div>...</div> block and see if it works for you.

The tutorial will be updated to cover that soon. It's on a PR at ...

#34227

You can look at the diff on that PR to see what I'm proposing thus far for new coverage. I think Dan and I will have that merged next week when we get back from the 🦃 holiday.

[guardrex]

... and the sample app has been updated already. You can see the final component here ...

https://github.com/dotnet/blazor-samples/blob/main/9.0/BlazorWebAppMovies/Components/Pages/MoviePages/Index.razor

... and the isolated stylesheet here ...

https://github.com/dotnet/blazor-samples/blob/main/9.0/BlazorWebAppMovies/Components/Pages/MoviePages/Index.razor.css

[AJ1000]

Can the scaffolding be updated as well?

[guardrex]

@AJ1000 ... It might take place as part of dotnet/aspnetcore#59078 (see the opening two paragraphs of that issue). However, that's backlogged, and it's not clear if merely including an empty data template that has the option for styling would make its way into a scaffolded QG. For now, it looks like only docs will cover it.

I'm going to make some improvements to the original coverage to go in with the updates to the Blazor movie dB tutorial. I don't think it will be difficult for folks to find and use the updated guidance after #34227 goes in.

[AJ1000]

Thanks for the info, the scaffolding css should, in my opinion, have the css so it looks the same as dotnet 8. Then Dan can demo this without having to add css to cover this issue.