Blazor: Grid-HTML Decoration

HTML Decoration

HTML decoration allows you to color data grid cells, rows and columns according to their values.
The Data Grid includes the HtmlRowDecoration and HtmlDataCellDecoration events that highlight grid rows and cells via the following arguments:

CssClass - A name of a CSS class applied to a grid element.
Attributes - Standard HTML attributes applied to a grid element.
Style - A standard HTML style attribute applied to a grid element.

Events also have arguments that depend on a target grid element (a row or a cell). The most commonly-used arguments are:

DataItem - A data source item that corresponds to the processed row or a row that contains the processed cell.
VisibleIndex, RowVisibleIndex - The visible index of the processed row or of a row that contains the processed cell, respectively.
Field - A name of a data source field that supplies data for a column. This argument is used for cells only.

Product	Order ID	Order Date	Shipped Date	Unit Price	Units In Order
Guaraná Fantástica	125	Friday, February 19, 2021	Wednesday, February 24, 2021	$5.00	122
Chai	124	Saturday, February 20, 2021	Tuesday, February 23, 2021	$18.00	21
Chang	133	Sunday, February 21, 2021	Tuesday, February 23, 2021	$19.00	33
Sasquatch Ale	123	Sunday, February 21, 2021	Wednesday, February 24, 2021	$14.00	24
Chartreuse verte	126	Sunday, February 21, 2021	Tuesday, February 23, 2021	$12.00	39
Ipoh Coffee	127	Saturday, February 20, 2021	Monday, February 22, 2021	$46.00	158
Lakkalikööri	131	Saturday, February 20, 2021	Wednesday, February 24, 2021	$18.00	206
Outback Lager	128	Friday, February 19, 2021	Wednesday, February 24, 2021	$15.00	6
Steeleye Stout	129	Monday, February 22, 2021	Tuesday, February 23, 2021	$18.00	30
Côte de Blaye	120	Sunday, February 21, 2021	Monday, February 22, 2021	$263.00	26

Razor

<DxDataGrid ...
            HtmlRowDecoration="@OnHtmlRowDecoration"
            HtmlDataCellDecoration="@OnHtmlDataCellDecoration">
    <DxDataGridColumn Field="@nameof(Order.Product)">
    </DxDataGridColumn>
    ...
</DxDataGrid>

@code {
    ...
    void OnHtmlRowDecoration(DataGridHtmlRowDecorationEventArgs<Order> eventArgs)
    {
        if (eventArgs.VisibleIndex % 2 == 1)
            eventArgs.CssClass = " table-dark";
        if (eventArgs.DataItem != null && eventArgs.DataItem.UnitsInOrder > largeOrder)
            eventArgs.CssClass = " table-warning font-weight-bold";
        else
            eventArgs.Attributes.Add("data-low-price", "");
    }
    void OnHtmlDataCellDecoration(DataGridHtmlDataCellDecorationEventArgs<Order> eventArgs)
    {
        eventArgs.CssClass += " border-0";

        if (eventArgs.FieldName == nameof(Order.Product))
        {
            if (eventArgs.RowVisibleIndex % 2 == 1)
                eventArgs.Style += " background-color: rgb(115, 158, 170);";
            else
                eventArgs.Style += " background-color: rgb(206, 214, 217);";

            if (eventArgs.DataItem.UnitsInOrder > largeOrder)
            {
                eventArgs.CssClass += " font-weight-bold";
            }
        }
    }
}