DataGridHtmlDataCellDecorationEventArgs<T> Class

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

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

Type Parameters

Remarks

The HtmlDataCellDecoration event allows you to change cell decoration settings. To change a specific 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.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";
            }
        }
    }
}