DataGridHtmlRowDecorationEventArgs<T>.Style Property

Specifies the name of an HTML style attribute applied to a grid row.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll


public string Style { get; set; }

Property Value

Type Description

A string that specifies the name of an HTML style attribute.


This argument is used to specify the name of an HTML style attribute applied to a grid row that is customized via the HtmlRowDecoration event.


If you assign a an HTML style attribute to this property directly (eventArgs.Style = "Style name";), this attribute overrides other style attributes applied to the corresponding row. To avoid this, we recommend that you use the approach demonstrated in the code below (eventArgs.Style += " Style name";). It applies an additional style attribute to the corresponding row.

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(Order.Product)"></DxDataGridColumn>

@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";
            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(169, 148, 200); color: black;";
                eventArgs.Style += " background-color: rgb(210, 198, 233); color: black;";

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

DataGrid Conditional Highlighting

Run Demo: Data Grid - HTML Decoration

See Also