Skip to main content

DxDataGrid<T>.HtmlRowDecoration Event

Allows you to change an individual row’s decoration settings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll


public Action<DataGridHtmlRowDecorationEventArgs<T>> HtmlRowDecoration { get; set; }


Type Description

A DataGridHtmlRowDecorationEventArgs<T> or DataGridHtmlGroupRowDecorationEventArgs<T> object that defines 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>).



The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.

The HtmlRowDecoration event allows you to change row decoration settings. The type of the HtmlRowDecoration event arguments depends on the RowType value:

To change an individual cell’s decoration settings, handle the HtmlDataCellDecoration 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"
        <DxDataGridColumn Field="@nameof(Invoice.OrderId)" />
        @* ... *@

@code {
    IEnumerable<Invoice> Data;
    protected override async Task OnInitializedAsync() {
        Data = await NwindDataService.GetInvoicesAsync();
    const decimal largeOrder = 10;
    void OnHtmlRowDecoration(DataGridHtmlRowDecorationEventArgs<Invoice> eventArgs) {
        if(eventArgs.VisibleIndex % 2 == 1)
            eventArgs.CssClass = " table-dark";
        if(eventArgs.DataItem != null && eventArgs.DataItem.Quantity > largeOrder)
            eventArgs.CssClass = " table-warning font-weight-bold";
            eventArgs.Attributes.Add("data-low-price", "");
    void OnHtmlDataCellDecoration(DataGridHtmlDataCellDecorationEventArgs<Invoice> eventArgs) {
        eventArgs.CssClass += " border-0";
        if(eventArgs.FieldName == nameof(Invoice.OrderId)) {
            if(eventArgs.RowVisibleIndex % 2 == 1)
                eventArgs.Style += " background-color: rgb(169, 148, 200); color: black;";
                eventArgs.Style += " background-color: rgb(210, 198, 233); color: black;";
            if(eventArgs.DataItem.Quantity > largeOrder) {
                eventArgs.CssClass += " font-weight-bold";

DataGrid Conditional Highlighting

Run Demo: Data Grid - HTML Decoration

See Also