Band Columns
- 2 minutes to read
The ASP.NET MVC GridView provides the ability to organize columns in logical groups (bands) and display them using multi-row header representation. A band is visually represented by a header displayed above the headers of the columns it combines.
Band Column Type
Each band is implemented as a specific column type - MVCxGridViewBandColumn.
A band column is a different kind of column - it is not designed to display data values directly (it does not support data operations such as sorting, grouping, etc.), but to contain other columns as children within its MVCxGridViewBandColumn.Columns collection. It is possible to have a hierarchy of nested bands by placing another band column into a band column’s MVCxGridViewBandColumn.Columns collection. Note that you can store a data column and a band column at the same hierarchy level (i.e., within the same Columns collection).
The code sample below demonstrates how to create a banded layout.
@Html.DevExpress().GridView(
settings =>
{
settings.Name = "gvBands";
settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
settings.Width = Unit.Percentage(100);
settings.Columns.Add("SalesPerson");
settings.Columns.AddBand(orderBand => {
orderBand.Caption = "Order";
orderBand.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
orderBand.Columns.AddBand(companyBand => {
companyBand.Caption = "Company";
companyBand.Columns.Add("CompanyName", "Name");
companyBand.Columns.Add("Country");
companyBand.Columns.Add("Region");
orderBand.Columns.Add("OrderDate", "Date").PropertiesEdit.DisplayFormatString = "d";
});
orderBand.Columns.AddBand(productBand => {
productBand.Caption = "Product";
productBand.Columns.Add("ProductName", "Name");
productBand.Columns.Add("UnitPrice").PropertiesEdit.DisplayFormatString = "c";
});
orderBand.Columns.Add("Quantity", "Qty");
});
}).Bind(Model).GetHtml()
Accessing Columns in a Banded Layout
Defining bands within a GridView implies having a hierarchical column structure. In this case, the GridView’s GridViewSettings.Columns property only provides access to root level columns. To make it easier to traverse through all columns, GridView introduces a specific ASPxGridView.AllColumns (via MVCxGridView.AllColumns) property. It provides access to a read-only collection containing all grid columns.
End-User Manipulations
Bands are not only used for display purposes. They can be dragged by end-users to re-order columns or hide a group of columns within the grid’s customization window. This is extremely useful if you need to provide a quick way to re-arrange or hide columns while preserving their logical grouping. Note that columns (and bands) are only allowed to be moved within their parent bands - you cannot move a child column from one parent band to another. This prevents end-users from breaking column grouping logic.
Resizing and column freezing features also work with bands. Note that you can only apply column freezing (controlled by the GridViewColumn.FixedStyle (via the MVCxGridViewColumn.FixedStyle) property to columns and bands located at the root hierarchy level (i.e., within the grid’s GridViewSettings.Columns collection).