GridElementType Enum

Lists values that define a Grid element’s type.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public enum GridElementType

Members

Name	Description
DataRow	A data row.
DataCell	A data column cell.
CommandCell	A command column cell.
SelectionCell	A selection column cell.
GroupRow	A group row.
GroupCell	A group row cell.
EditRow	An edit row.
EditCell	A cell displayed in the edited row.
EditCommandCell	A command column cell displayed in the edited row.
EditSelectionCell	A selection column cell displayed in the edited row.
EditFormCell	An edit form cell.
PopupEditForm	A popup edit form.
DetailCell	A detail row cell.
FilterRow	The filter row.
FilterCell	A filter row‘s edit cell.
FilterCommandCell	A filter row‘s command column cell.
FilterSelectionCell	A filter row‘s selection column cell.
HeaderRow	The row that contains Grid column headers.
HeaderCell	A data column header cell.
HeaderCommandCell	A command column header cell.
HeaderSelectionCell	A selection column header cell.
GroupPanel	The group panel.
GroupPanelHeader	A column header in the group panel.
FooterRow	The footer.
FooterCell	A footer cell.
FooterCommandCell	The footer‘s command column cell.
FooterSelectionCell	The footer‘s selection column cell.
GroupFooterRow	A group footer.
GroupFooterCell	A group footer cell.
GroupFooterCommandCell	A group footer‘s command column cell.
GroupFooterSelectionCell	A group footer‘s selection column cell.
ColumnChooserItem	A column chooser item.
PagerContainer	A container that stores the Grid pager.
SearchBoxContainer	A container that stores the Grid search box.
ToolbarContainer	A container that stores the Grid toolbar.
EmptyDataArea	An empty data area.

Related API Members

The following properties accept/return GridElementType values:

• GridCustomizeElementEventArgs.ElementType

Remarks

Use this enumeration’s values to define an element type when you handle the CustomizeElement event.

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"
            CustomizeElement="Grid_CustomizeElement"
            SizeMode="Params.SizeMode" KeyboardNavigationEnabled="true">
        <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"
                              UnboundExpression="[UnitPrice] * [Quantity]"
                              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_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

Images

Grid Rows

Data Row

Empty Data Area

Edit Elements

Header and Footer

Group Elements

Filter Elements

Toolbar Container

Column Chooser

Search Box Panel