asp.net-coreblazor-server-side

How to cast a rendered value from String to MarkupString in a QuickGrid in Blazor


I need the returned string from the database, which has html tags in it, to render as html (eg I need the <strong> to actually render as bold text, etc) in my QuickGrid. I tried converting my model class to use a MarkupString instead of String but that didn't work. I also tried inline casting the value like this: <PropertyColumn Property="@(records => ((MarkupString)records.Notes))" /> but that also didn't work. I thought maybe QuickGrid didn't allow for this, but I can put a static MarkupString in without any issue (the TEST column).

Any help would be appreciated!

Code:

<QuickGrid Items="debugHistory.AsQueryable()" Virtualize="true" PageSize="20" Pagination="state" Class="table table-striped table-hover">
    <PropertyColumn Property="@(records => records.SerialNumber)" Sortable="true" Title="Serial Number">
        <ColumnOptions>
            <div class="d-flex flex-row">
                <input type="search" @bind="serialNumberFilter" @bind:event="oninput" autofocus class="form-control form-control-sm" />
            </div>
        </ColumnOptions>
    </PropertyColumn>
    <PropertyColumn Property="@(records => records.Technician)" Sortable="true" />
    <PropertyColumn Property="@(records => ((MarkupString)records.Notes))" />
    <PropertyColumn Property="@(records => records.Created)" Sortable="true" />
    <TemplateColumn Title="TEST">
        @((MarkupString)myNote)
    </TemplateColumn>
</QuickGrid>
<Paginator State="state" />
@code {
    string myNote = "<p>New laptops 09/07/2022 <strong>test</strong></p>";
    private string serialNumberFilter = string.Empty;
    public required IEnumerable<DebugHistory> debugHistory;

    [Inject]
    public required IDebugService DebugServices { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await this.GetHistory();
    }

    protected async Task GetHistory()
    {
        debugHistory = await DebugServices.GetHistoricalRecords();
        debugHistory = from a in debugHistory
                            .Where(a => a.SerialNumber!.Contains(serialNumberFilter))                                                       
                       select new DebugHistory()
                           {
                               SerialNumber = a.SerialNumber,
                               Technician = a == null ? "(no data)" : a.Technician,
                               Notes = a == null ? "(no data)" : a.Notes,
                               Created = a.Created
                           };
    }

    PaginationState state = new PaginationState { ItemsPerPage = 20 };
}

Solution

  • The difference is:

    <PropertyColumn Property="@(records => ((MarkupString)records.Notes))" />
    

    is a PropertyColumn where you're passing in the Property for the column to display. You're trying to pass in the value. You use the Format parameter to define the output format which is not possible in your case.

    With the static column you're using TemplateColumn. Different animal.

    You need to use a TemplateColumn and manually configure the Title and the content. Something like:

        <TemplateColumn Title="Notes">
            @((MarkupString)context.Notes)
        </TemplateColumn>