DataGridHtmlDataCellDecorationEventArgs<T>.Style Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

public string Style { get; set; }

Property Value

Type Description
String

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

Remarks

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

NOTE

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 cell. 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 cell.

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.FieldName == 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

Run Demo: Data Grid - HTML Decoration

See Also