Header Bands
- 2 minutes to read
Header bands allow you to combine grid headers into logical groups and display them using a multi-row representation. A header band is visually represented by 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 is a different kind of column - it is designed not to display data values directly (so it does not support data operations such as sorting, grouping, etc.), but to contain other columns as children within its GridViewColumn.Columns collection. It is possible to have a hierarchy of nested bands by placing another band column into a band column’s GridViewColumn.Columns collection. Moreover, you can store a data column and a band column at the same hierarchy level (i.e., within the same Columns collection).
The code below demonstrates how header bands can be defined at design-time.
<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>