CODEWITHSUNDEEP
c#blazormudblazor
T0bi
T0bi

Reputation: 371

Change MudBlazor table background color by row item condition

I am trying to change the color of a row in a mudblazor table. The problem is, I can't add a functionality to change the color by the condition of the element of the row.

 <MudTable Items="@context.orderPositions" Context="AddressContext" Hover="true" Breakpoint="Breakpoint.Sm" Elevation="0" Style="background-color: @(AddressContext.OrderPositionStatus == PositionStatus.rdy ? yellowgreen : blue;">

Upvotes: 14

Views: 17742

Answers (4)

T0bi
T0bi

Reputation: 371

I have a solution but it feels kinda dirty...

<RowTemplate>
    <MudTd DataLabel="Menge" Style="@(AddressContext.OrderPositionStatus == PositionStatus.rdy ? $"background:{Colors.BlueGrey.Darken4};" : $"background:{Colors.Cyan.Darken1};")">@AddressContext.orderItem.ItemQuantity</MudTd>
    <MudTd DataLabel="Itemcode" Style="@(AddressContext.OrderPositionStatus == PositionStatus.rdy ? $"background:{Colors.BlueGrey.Darken4};" : $"background:{Colors.Cyan.Darken1};")">@AddressContext.orderItem.ItemCode</MudTd>
    <MudTd DataLabel="Itemname" Style="@(AddressContext.OrderPositionStatus == PositionStatus.rdy ? $"background:{Colors.BlueGrey.Darken4};" : $"background:{Colors.Cyan.Darken1};")">@AddressContext.orderItem.ItemName</MudTd>
</RowTemplate>

As shown, it is possible to change the color within the row template. So the context is available. Its annoying work for each row/colum- combination but in the end it works.

Upvotes: 0

CrispinH
CrispinH

Reputation: 2059

I wanted to be able to hide row items marked for deletion by default and then show them in red when when a toggle switch was enabled. So on my component I appended a switch:

<MudSwitch @bind-Checked="@blnShowDeleted" Color="Color.Warning">Show deleted</MudSwitch>

@Nadav Hury's answer told me about RowStyleFunc which led me to the MudBlazor documentation and RowClassFunc which I thought might be a better bet. So I changed the code for the table declaration:

<MudTable Items="objVmCustomers" RowClassFunc="ShowDeleted">

I created a ShowDeleted method in the code-behind razor.cs class:

public string ShowDeleted(VmCustomer objVmCustomer, int index)
        {
        if(objVmCustomer.dtDeleted != null)
            {
            if (blnShowDeleted == true)
                {
                return "show-deleted";
                }

            return "hide-deleted";
            }

        return "";
        }

Then I created two CSS classes to suit the code above:

.show-deleted td { --mud-palette-text-primary: red; }
.hide-deleted { display: none; visibility: collapse; }

There is a gotcha here: you can't just go color:red; in the show-deleted declaration because the CSS variable --mud-palette-text-primary will override it. You have to override the CSS variable (I discovered this by inspecting the element).

By using a CSS class that operates on all the TD elements within a row, this gets over the 'dirtiness' that @T0bi complains of when using multiple style attributes.

Upvotes: 5

Nadav Hury
Nadav Hury

Reputation: 689

You can:

<MudTable Items="@Items" Hover="true" RowStyleFunc="RowStyleFunc">

And then

private string RowStyleFunc(Item arg1, int index)
{
    switch (arg1.Title)
    {
        case string a when a.Contains("1/4"):
            return "background-color:blue";
        case string b when b.Contains("2/4"):
            return "background-color:red";          
        default: return "background-color:white";

    }
}

Upvotes: 29

Mehmet Can Karag&#246;z
Mehmet Can Karag&#246;z

Reputation: 39

It's not a complete answer, but in your code, style in <MudTable> will change all background color. You need to determine RenderFragment's color like, <MudTd Style="background-color:yellow;</MudTd>"

https://try.mudblazor.com/snippet/cYcFEMkdVtcQQNnQ

Upvotes: 0

Related Questions