DataGridHtmlDataCellDecorationEventArgs<T> Class

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

Declaration

public class DataGridHtmlDataCellDecorationEventArgs<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 collection (IEnumerable<T> or IQueryable<T>).

Remarks

The HtmlDataCellDecoration event allows you to change cell decoration settings. 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">
    <Columns>
        <DxDataGridColumn Field="@nameof(Invoice.OrderId)" />
        @* ... *@
    <Columns>
</DxDataGrid>

@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";
        else
            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;";
            else
                eventArgs.Style += " background-color: rgb(210, 198, 233); color: black;";
            if(eventArgs.DataItem.Quantity > largeOrder) {
                eventArgs.CssClass += " font-weight-bold";
            }
        }
    }
}

Run Demo: Data Grid - HTML Decoration