How do we reference the HeaderTemplate to specify the HTML using RenderFragment for the QuickGrid?

Question

We have a .NET 8 & C# Blazor project in VS 2022 with a number of QuickGrids.

I want to place HTML and styling for the PropertyColumn's header text using the HeaderTemplate that will override the Title field. But I don't know how to use the HeaderTemplate.

My QuickGrid markup looks like this:

<PropertyColumn 
         Property="f => f.TXT_NAME"              
         HeaderTemplate="<TemplateHeader>Missouri</TemplateHeader>" 
         Sortable="false" Class="itemName" />

I have googled and search for a sample of the correct way to specify/utilize the HeaderTemplate capability, but could not find any samples. What you see in my code above is a non-working GUESS of how to use the HeaderTemplate.

When I type the code for HeaderTemplate, VS 2022 immediately follows that with ="" -- implying some text should be typed in. BUT... I have tried various things and you can see my attempt at providing a component that contains a render fragment -- that will not compile with an error

An invalid expression term '<'

I am so stuck.

The render fragment component markup and code are as follows:

<div class="text-danger fst-italic fw-bold">
   @ChildContent
</div>

@code {
#pragma warning disable CS8618
   [Parameter] public RenderFragment? ChildContent { get; set; }
#pragma warning restore CS8618
}
      

Your solutions, comments and questions are welcome.

Thanks.

Answer 1

You can use the HeaderTemplate on a PropertyColumn

<PropertyColumn Title="Date" Property="p => p.Date"> 
    <HeaderTemplate>
        Test
    </HeaderTemplate>
</PropertyColumn>

you can also just use css to target the header via isolation Weather.razor.css

::deep div.col-title-text {
    color: orangered;
}

However if the QuickGrid is a root component the ::deep operator will not work.

<enable-deep>
    <QuickGrid Items="forecasts.AsQueryable()">
        <PropertyColumn Title="Date" Property="p => p.Date" />
        <PropertyColumn Title="Temp. (C)" Property="p => p.TemperatureC" />
        <PropertyColumn Title="Temp. (F)" Property="p => p.TemperatureF" />
        <PropertyColumn Title="Summary" Property="p => p.Summary" />
    </QuickGrid>
</enable-deep>

Here I use a custom HTML element to enable the ::deep selector. The Browser ignores the element.

FYI: PropertyColumn inherits ColumnBase which has the RenderFragment parameter HeaderTemplate

Official docs on RenderFragment use.