Bands

• Feb 28, 2023
• 4 minutes to read

The ASP.NET MVC GridView allows you to arrange columns and data cells in logical groups (bands) across multiple rows - with cells that can occupy multiple rows.

Header Bands

A header band is a non-data column (MVCxGridViewBandColumn) that serves as a container to arrange two or more columns (Columns) under one header.

Online demo: Grid View - Header Bands

Create a Header Band

Use the AddBand() method to add a band column (MVCxGridViewBandColumn) to the grid’s column collection (Columns). The header band can contain data columns or/and child header bands.

Note

You can place header bands and data columns at the same hierarchical level.

• C#

// Parent header band
settings.Columns.AddBand(orderBand => {
    orderBand.Caption = "Order";
    // Child header band
    orderBand.Columns.AddBand(companyBand => {
        companyBand.Caption = "Company";
        // The 'Company' header band's child data columns
        companyBand.Columns.Add("CompanyName");
        companyBand.Columns.Add("Country");
    });
    // Child data column
    orderBand.Columns.Add("TotalSum");
});

Use the following APIs to specify a header band’s settings:

• MVCxGridViewBandColumn.Caption - Specifies a band’s caption.

• MVCxGridViewColumn.FixedStyle - Set this property to Left to anchor the band column to the grid’s left edge. Note that you can fix only bands that are located at the root hierarchy level.

• C#

settings.Columns.AddBand(orderBand => {
    orderBand.Caption = "Order";
    orderBand.FixedStyle = GridViewColumnFixedStyle.Left;
});

Data Cell Bands

Data cell bands allow you to arrange column headers and cells in multiple rows.

Online demo: Data Cell Bands

Create a Data Cell Band

Use the following methods to add child columns to the MVCxGridViewColumn.Columns collection:

• The MVCxGridViewColumnCollection.Add method - Adds a data or command column.

• The MVCxGridViewColumnCollection.AddBand method - Adds a band column (MVCxGridViewBandColumn).

Access Columns in a Banded Layout

The MVCxGridView.AllColumns property provides access to a read-only collection of all grid columns including bands. To traverse only through data columns, use the MVCxGridView.DataColumns property.

• C#

settings.CustomJSProperties = (s, e) =>
{
    var Grid = s as MVCxGridView;

    // Through all columns including bands.
    foreach (var column in Grid.AllColumns)
    {
        // your code
    }

    // Only through all data columns.
    foreach (var column in Grid.DataColumns)
    {
        // your code
    }
};

Move Banded Columns

The grid’s ColumnMoveMode property allows you to specify the column’s move mode:

• AmongSiblings (default) - Users can move any columns within their parents. If you move a parent column band, the grid also moves its child columns.

• ThroughHierarchy - Users can move any column between parents and hierarchy levels.

The code below illustrates how to allow users to change column hierarchy in bands.

• C#

settings.SettingsBehavior.ColumnMoveMode = GridColumnMoveMode.ThroughHierarchy;

Data Cell Band Limitations

The GridView layout with data cell bands has certain feature limitations described in the list below:

• Responsive layout mode is not supported.
• The ASPxGridViewSettings.GridLines property is not in effect. Both grid lines (vertical and horizontal) are always displayed.
• The cell merging is not supported.