Provide an EmptyData template for QuickGrid for display when no records are bound

[htmlsplash]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

With the newest version of QuickGrid (v9.0) when rendering empty rows it now includes td elements. These empty td elements use the same CSS classes when data bound rows are rendered. This causes an empty data grid to display row lines or other styling on empty rows.

In addition, sometimes the classes that are specified on the QuickGrid tag (ie table tag) may apply row/cell styling causing same side effect (ex Bootstrap table table-* classes). The end result is again that lines are displayed per each empty row.

Here's the original issue about this: #57199

Describe the solution you'd like

If you have to render empty rows then:
One solution is to introduce another set of CSS classes that we can style on empty cells. This would allow the author specify classes that negate the styles that are inherited from applied CSS styles at the table element (Ex bootstrap table class styles).
Is there better solution to this?

Ultimately, I prefer to see QuickGrid to have an EmptyData template that user can specified if there are no records bound to the datagrid.

Additional context

No response

[javiercn]

@htmlsplash thanks for contacting us.

Is it not possible for you to use to style the elements?

td:empty {

}

[htmlsplash]

"Is it not possible for you to use to style the elements?" - That's a workaround, yes. Question, is it semantically correct to put row/td styles intended for rows with data on empty rows that you render for whatever reason you need to render them.

How about adding EmptyData template? Currently, there's no way without extra coding to add a user message stating: Query return no results. This a very common use case for using any iterative control.

[svogel123]

The problem is, if a cell is empty in a row, it destroys the whole layout.

This css is my hack:

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

td:empty {
    display: none;
}

[htmlsplash]

I guess, that brings up a question:
Why do we need these empty rows, what layout are we trying to preserve when there is no data.
If there's no data bound, we should not display any empty rows or headers for that matter, we should not even render the table. And if the user wants to display an empty data message, render that template fragment.
All the solutions so far provided are workarounds (hacks) that I require to write every time I use the QuickGrid.

[javiercn]

The rows are rendered because otherwise anything that is below the table moves when there aren't enough rows. I believe the goal is you can give the rows a fixed height so that your layout doesn't shift.

[htmlsplash]

Okay ... Honestly, if preserving the layout is so important, then at least give others an option to opt out from this logic. For example, using EmptyData template. If that templates is specified, then only content within the template is rendered and nothing else. Then you have best of both worlds.

[danroth27]

Ultimately, I prefer to see QuickGrid to have an EmptyData template that user can specified if there are no records bound to the datagrid.
...
If that template is specified, then only content within the template is rendered and nothing else.

@htmlsplash Since your request is specifically about adding an EmptyData template feature, I've updated the title of this issue accordingly. To be clear though, you would still see empty rows rendered to fill out the page if some records are bound and you are using a paginator. That issue, which is tracked by #57199 would still need to be handled with custom styling.

[htmlsplash]

"you would still see empty rows rendered to fill out the page if some records are bound " - That's fine, but if there is no data bound (ie your query returns 0 records) I don't want to see any rows generated if I have specified an EmptyData template.