Search code examples
c#cssblazormudblazor

changing the font colour of specified rows in MudDataGrid doesnt work

I want to change the row background colour and font colour of specific rows in a MudDataGrid, I cant get it to work though.

heres my MudDataGrid definition

<MudPaper Class="pa-4 ma-2" Elevation="0">
    <MudDataGrid ServerData="LoadGridData" T="BookingDetailDto" @ref="_dataGridBookings" ReadOnly="true" Hover="true" Striped="true" RowStyleFunc="@_rowStyleFunc" SortMode="SortMode.None" HeaderClass="mud-table-header">
        <ToolBarContent>
            <MudText Typo="Typo.h6">Bookings</MudText>
            <MudSpacer />
            <MudTextField @bind-Value="_searchString" Placeholder="Search By Artist Name" Immediate="true" Class="mt-0"></MudTextField>
            <MudIconButton Size="@MudBlazor.Size.Small" Icon="@MudBlazor.Icons.Material.Rounded.Search" @onclick="() => Search()" Title="Search" />
            <MudIconButton Size="@MudBlazor.Size.Small" Icon="@MudBlazor.Icons.Material.Rounded.Restore" @onclick="() => Reset()" Title="Reset Grid View" />
        </ToolBarContent>
        <Columns>
            <MudBlazor.PropertyColumn Property="x => x.BookingId" Title="Booking Number" />
            <MudBlazor.PropertyColumn Property="x => x.AgencyIdentifier" Hidden />
            <MudBlazor.PropertyColumn Property="x => x.DateOfPerformance" Format="d" Title="Performance Date" />
            <MudBlazor.PropertyColumn Property="x => x.TimeOfPerformance" Title="Performance Time" />
            <MudBlazor.PropertyColumn Property="x => x.ArtistName" Title="Artist" />
            <MudBlazor.PropertyColumn Property="x => x.VenueName" Title="Venue" />
            <MudBlazor.TemplateColumn CellClass="d-flex justify-end">
                <CellTemplate>
                    <div @onclick:stopPropagation="true" @onclick:preventDefault="true">
                        <MudIconButton Size="@MudBlazor.Size.Small" Icon="@MudBlazor.Icons.Material.Rounded.Edit" @onclick="() => EditItem(context.Item!)" Title="Edit" />
                    </div>
                </CellTemplate>
            </MudBlazor.TemplateColumn>
        </Columns>
        <PagerContent>
            <MudDataGridPager T="BookingDetailDto" Disabled="false" />
        </PagerContent>
    </MudDataGrid>
</MudPaper>

I have a function that takes care of the row colouring

private Func<BookingDetailDto, int, string> _rowStyleFunc => (x, i) =>
{
    string style = string.Empty;
    if(x.Cancelled)
    {
        style += "background-color: #FF0000;  color: white !important;";
    }
    return style;
};

the row is coloured correctly but the font colour doesn't change, this is what I get, can anyone see why ?

enter image description here

Solution

  • The row may have the color white, but it's overwritten by the cells color.

    To set the color of the cells you have to use the CellStyleFunc on each Column

    <PropertyColumn ... CellStyleFunc="_cellStyleFunc" />

    This works for TemplateColumn aswell

    Here's a Snippet