DxGridBandColumn Class

A band column that joins regular DxGrid columns into a group with a common header.

Assembly: DevExpress.Blazor.v24.1.dll

Declaration

public class DxGridBandColumn :
    DxGridColumn,
    IGridBandColumn,
    IGridColumn,
    IGridColumnsOwner,
    IParameterTrackerSettingsOwner

Remarks

The DevExpress Blazor Grid can combine columns into logical groups called bands. Each band has its own header. Users can move columns within a band but cannot drag them out.

The Grid component supports endless nesting levels of bands. The following code snippet creates a root band Order and a nested band Product:

Multi-level headers

<DxGrid @ref="Grid"
        Data="Data">
    <Columns>
        <DxGridDataColumn FieldName="SalesPerson" Caption="Salesperson" />
        <DxGridBandColumn Caption="Order">
            <Columns>
                <DxGridDataColumn FieldName="CompanyName" />
                <DxGridDataColumn FieldName="OrderDate" Caption="Date" Width="100px" />
                <DxGridBandColumn Caption="Product">
                    <Columns>
                        <DxGridDataColumn FieldName="ProductName" Caption="Name" />
                        <DxGridDataColumn FieldName="UnitPrice" 
                                          DisplayFormat="c" 
                                          CaptionAlignment="GridTextAlignment.Right" 
                                          Width="100px" />
                    </Columns>
                </DxGridBandColumn>
                <DxGridDataColumn FieldName="Quantity" Width="80px" />
            </Columns>
        </DxGridBandColumn>
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }
    IGrid Grid { get; set; }
    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,
                SalesPerson = i.Salesperson,
                UnitPrice = i.UnitPrice,
                OrderDate = i.OrderDate,
                ProductName = i.ProductName,
                Quantity = i.Quantity
            };
        });
    }
}