Header Bands

• Aug 30, 2021
• 2 minutes to read

Header bands allow you to combine grid headers into logical groups and display them as hierarchical multi-row headers. A header band is a header displayed above headers of the columns it combines.

Band Column Type

Each header band is a column of a specific type - GridViewBandColumn.

A band column contains other child columns within its GridViewColumn.Columns collection. It does not display data values directly (so it does not support operations such as data sort or group). If you place another band column in a band column’s GridViewColumn.Columns collection, you can create a hierarchy of nested bands. Moreover, you can store a data column and a band column at the same hierarchy level (within the same Columns collection).

The code below demonstrates how header bands can be defined at design-time.

ASPX

    <dx:ASPxGridView ID="Grid" runat="server" AutoGenerateColumns="false" KeyFieldName="OrderID" DataSourceID="AccessDataSource1" Width="100%">
        <Columns>
            <dx:GridViewDataTextColumn FieldName="Salesperson" Caption="Sales Person" />
            <dx:GridViewBandColumn Caption="Order">
                <Columns>
                    <dx:GridViewBandColumn Caption="Company">
                        <Columns>
                            <dx:GridViewDataTextColumn FieldName="Customers.CompanyName" Caption="Name" />
                            <dx:GridViewDataTextColumn FieldName="Country" />
                            <dx:GridViewDataTextColumn FieldName="Region" />
                        </Columns>
                    </dx:GridViewBandColumn>
                    <dx:GridViewDataDateColumn FieldName="OrderDate" Caption="Date" />
                    <dx:GridViewBandColumn Caption="Product">
                        <Columns>
                            <dx:GridViewDataTextColumn FieldName="ProductName" Caption="Name" />
                            <dx:GridViewDataTextColumn FieldName="UnitPrice" />
                        </Columns>
                    </dx:GridViewBandColumn>
                    <dx:GridViewDataTextColumn FieldName="Quantity" Caption="Qty" />
                </Columns>
                <HeaderStyle HorizontalAlign="Center" />
            </dx:GridViewBandColumn>
        </Columns>
        <Settings ShowGroupPanel="true" />
    </dx:ASPxGridView>