DxDataGrid<T>.HtmlDataCellDecoration Event
Allows you to change an individual cell’s decoration settings.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v22.1.dll
Declaration
[Parameter]
public Action<DataGridHtmlDataCellDecorationEventArgs<T>> HtmlDataCellDecoration { get; set; }
Parameters
Type | Description |
---|---|
DataGridHtmlDataCellDecorationEventArgs<T> | A DataGridHtmlDataCellDecorationEventArgs<T> object that defines data for to this event. Here, |
Remarks
Important
The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.
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";
}
}
}
}