GridCustomizeElementEventArgs Class

Provides data for the CustomizeElement event.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class GridCustomizeElementEventArgs

Remarks

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">
    <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

Inheritance

Object

GridCustomizeElementEventArgs