Blazor: Grid-HTML Decoration

Data Grid - HTML Decoration

HTML decoration allows you to color data grid cells, rows and columns according to their values.
The Data Grid provides 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 provide 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 provides 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	Saturday, September 12, 2020	Thursday, September 17, 2020	$5.00	122
Chai	124	Sunday, September 13, 2020	Wednesday, September 16, 2020	$18.00	21
Chang	133	Monday, September 14, 2020	Wednesday, September 16, 2020	$19.00	33
Sasquatch Ale	123	Monday, September 14, 2020	Thursday, September 17, 2020	$14.00	24
Chartreuse verte	126	Monday, September 14, 2020	Wednesday, September 16, 2020	$12.00	39
Ipoh Coffee	127	Sunday, September 13, 2020	Tuesday, September 15, 2020	$46.00	158
Lakkalikööri	131	Sunday, September 13, 2020	Thursday, September 17, 2020	$18.00	206
Outback Lager	128	Saturday, September 12, 2020	Thursday, September 17, 2020	$15.00	6
Steeleye Stout	129	Tuesday, September 15, 2020	Wednesday, September 16, 2020	$18.00	30
Côte de Blaye	120	Monday, September 14, 2020	Tuesday, September 15, 2020	$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";
            }
        }
    }
}