DataGridHtmlDataCellDecorationEventArgs<T>.CssClass Property

Specifies the name of a CSS class applied to a grid cell.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll


public string CssClass { get; set; }

Property Value

Type Description

A string that specifies the name of a CSS class.


This argument is used to specify the name of a CSS class applied to a grid cell that is customized via the HtmlDataCellDecoration event.


If you assign a CSS class to this property directly (eventArgs.CssClass = "Class name";), this class overrides other CSS classes applied to the corresponding cell. To avoid this, we recommend that you use the approach demonstrated in the code below (eventArgs.CssClass += " Class name";). It applies an additional CSS class 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"
    <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

Refer to CSS Classes for more information.

See Also