DataGridHtmlRowDecorationEventArgs<T> Class

Provides data for the HtmlRowDecoration event.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DataGridHtmlRowDecorationEventArgs<T> :
    IDataGridElementAppearance,
    IEquatable<IDataGridElementAppearance>

Type Parameters

Name Description
T

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 HtmlRowDecoration event allows you to change row decoration settings. The type of the HtmlRowDecoration event arguments depends on the RowType value:

To change a specific 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"
            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(115, 158, 170);";
            else
                eventArgs.Style += " background-color: rgb(206, 214, 217);";

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

Blazor-DataGrid-Conditional-Highlighting

NOTE

Online Demo: Data Grid - HTML Decoration

Inheritance

Object
DataGridHtmlRowDecorationEventArgs<T>
See Also