DxDataGridBase<T>.HtmlDataCellDecoration Event

Allows you to change an individual cell's decoration settings.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.dll

Declaration

[Parameter]
public Action<DataGridHtmlDataCellDecorationEventArgs<T>> HtmlDataCellDecoration { get; set; }

Parameters

Type Description
DataGridHtmlDataCellDecorationEventArgs<T>

A DataGridHtmlDataCellDecorationEventArgs<T> object that provides data for to this event. Here, <T> is the grid's data item type that equals the type of items stored in a bound data source (IEnumerable<T> or IQueryable<T>).

Remarks

The HtmlDataCellDecoration event allows you to change cell decoration settings. To change an individual row's decoration settings, handle the HtmlRowDecoration event.

The code below handles the HtmlRowDecoration and HtmlDataCellDecoration events to color data grid cells, rows, and columns according to their values.

<DxDataGrid Data="@DataSource"
            HtmlRowDecoration="@OnHtmlRowDecoration"
            HtmlDataCellDecoration="@OnHtmlDataCellDecoration">
    <DxDataGridColumn Field="@nameof(Order.Product)"></DxDataGridColumn>
    ...
</DxDataGrid>

@code {
    IEnumerable<Product> DataSource;

    ...

    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.Field == nameof(Order.Product)) {
            if (eventArgs.RowVisibleIndex % 2 == 1)
                eventArgs.Style += " background-color: rgb(169, 148, 200); color: black;";
            else
                eventArgs.Style += " background-color: rgb(210, 198, 233); color: black;";

            if (eventArgs.DataItem.UnitsInOrder > largeOrder) {
                eventArgs.CssClass += " font-weight-bold";
            }
        }
    }
}

DataGrid Conditional Highlighting

NOTE

Online Demo: Data Grid - HTML Decoration

See Also