DxGrid.CustomizeElement Event

Allows you to color grid cells and rows according to their values.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public Action<GridCustomizeElementEventArgs> CustomizeElement { get; set; }

Parameters

Type	Description
GridCustomizeElementEventArgs	A GridCustomizeElementEventArgs object that defines data for this event.

Remarks

Use the following arguments of the CustomizeElement event to customize a grid element style:

• ElementType - The element type.
• CssClass - The name of a CSS class applied to a grid element.
• Style - A standard HTML style attribute applied to a grid element.
• Attributes - A collection of standard HTML attributes applied to a grid element.
• VisibleIndex - The visible index of the processed row or row that contains the processed cell.
• Column - The column that corresponds to the processed cell or group row.
• Grid - An object that provides access to grid properties.

If you specify the CssClass property and class attribute in the Attributes collection at the same time, the Grid uses the CssClass property value. This idea also applies for the Style property and style attribute.

The code below customizes the appearance of grid elements that meet the following criteria:

• Data rows with Total > 1000 are highlighted.
• All Total values are bold.
• If the grid rows are grouped by Country, the group row’s tooltip displays group summary values.

Razor

    @implements IDisposable
    @inject NwindDataService NwindDataService

    <style>
        .highlighted-item > td {
            background-color: rgba(245, 198, 203, 0.5);
        }
    </style>

    <DxGrid @ref="Grid"
            Data="@Data"
            ShowGroupPanel="true"
            UnboundColumnData="Grid_UnboundColumnData"
            CustomizeElement="Grid_CustomizeElement"
            SizeMode="Params.SizeMode">
        <Columns>
            <DxGridDataColumn FieldName="CompanyName" MinWidth="100" />
            <DxGridDataColumn FieldName="City" Width="10%" />
            <DxGridDataColumn FieldName="Region" Width="10%" />
            <DxGridDataColumn FieldName="Country" Name="Country" Width="10%" GroupIndex="0" />
            <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" Width="10%" />
            <DxGridDataColumn FieldName="Quantity" MinWidth="80" Width="10%" />
            <DxGridDataColumn FieldName="Total" Name="Total" UnboundType="GridUnboundColumnType.Decimal" DisplayFormat="c" MinWidth="100" Width="15%" />
        </Columns>
        <GroupSummary>
            <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="Country" Visible="false" />
            <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="Total" Visible="false" />
        </GroupSummary>
    </DxGrid>

@code {
    object Data { get; set; }
    IGrid Grid { get; set; }
    readonly TaskCompletionSource<bool> dataLoadedTcs = new(TaskCreationOptions.RunContinuationsAsynchronously);

    protected override async Task OnInitializedAsync() {
        var invoices = await NwindDataService.GetInvoicesAsync();
        var customers = await NwindDataService.GetCustomersAsync();
        Data = invoices.OrderBy(i => i.OrderDate).Join(customers, i => i.CustomerId, c => c.CustomerId, (i, c) => {
            return new {
                CompanyName = c.CompanyName,
                City = i.City,
                Region = i.Region,
                Country = i.Country,
                UnitPrice = i.UnitPrice,
                Quantity = i.Quantity
            };
        });
        dataLoadedTcs.TrySetResult(true);
    }
    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if(firstRender) {
            await dataLoadedTcs.Task;
            Grid.ExpandGroupRow(1);
        }
    }

    void Grid_UnboundColumnData(GridUnboundColumnDataEventArgs e) {
        if(e.FieldName == "Total") {
            decimal price = (decimal)e.GetRowValue("UnitPrice");
            short quantity = (short)e.GetRowValue("Quantity");
            e.Value = price * quantity;
        }
    }
    void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
        if(e.ElementType == GridElementType.DataRow && (System.Decimal)e.Grid.GetRowValue(e.VisibleIndex, "Total") > 1000) {
            e.CssClass = "highlighted-item";
        }
        if(e.ElementType == GridElementType.DataCell && e.Column.Name == "Total") {
            e.Style = "font-weight: 800";
        }
        if(e.ElementType == GridElementType.GroupRow && e.Column.Name == "Country") {
            var summaryItems = e.Grid.GetGroupSummaryItems().Select(i => e.Grid.GetGroupSummaryDisplayText(i, e.VisibleIndex));
            e.Attributes["title"] = string.Join(", ", summaryItems);
        }
    }
    public void Dispose() {
        dataLoadedTcs.TrySetCanceled();
    }
}

Invoice

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public class Invoice {
        public string ShipName { get; set; }
        public string ShipAddress { get; set; }
        public string ShipCity { get; set; }
        public string ShipRegion { get; set; }
        public string ShipPostalCode { get; set; }
        public string ShipCountry { get; set; }
        public string CustomerId { get; set; }
        public string CustomerName { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Salesperson { get; set; }
        public int OrderId { get; set; }
        public DateTime? OrderDate { get; set; }
        public DateTime? RequiredDate { get; set; }
        public DateTime? ShippedDate { get; set; }
        public string ShipperName { get; set; }
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
        public short Quantity { get; set; }
        public float Discount { get; set; }
        public decimal? ExtendedPrice { get; set; }
        public decimal? Freight { get; set; }
    }
}

Customer

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public partial class Customer {
        public Customer() {
            Orders = new HashSet<Order>();
        }

        public string CustomerId { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string ContactTitle { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Phone { get; set; }
        public string Fax { get; set; }

        public virtual ICollection<Order> Orders { get; set; }
    }
}

NwindDataService.Invoices

using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using BlazorDemo.Data.Northwind;
using BlazorDemo.DataProviders;

namespace BlazorDemo.Services {
    public partial class NwindDataService {
        public Task<IEnumerable<Invoice>> GetInvoicesAsync(CancellationToken ct = default) {
            // Return your data here
        }
    }
}

NwindDataService.Customers

using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using BlazorDemo.Data.Northwind;
using BlazorDemo.DataProviders;

namespace BlazorDemo.Services {
    public partial class NwindDataService {
        public Task<IEnumerable<Customer>> GetCustomersAsync(CancellationToken ct = default) {
            // Return your data here
        }
    }
}

Program.cs

// ...
builder.Services.AddScoped<NwindDataService>();

Run Demo: Conditional Formatting

Run Demo: Alternating Row Style

View Example: Conditional Formatting

View Example: Show the Context Menu and Customize its Appearance

Watch Video: Grid - Add the Context Menu