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.

  C#

  settings.Columns.Add(address => {
      address.FieldName = "Address";
      address.Columns.Add("Price");
      address.Columns.Add(features => {
          features.FieldName = "Features";
          features.Columns.Add("Beds");
          features.Columns.Add("Baths");
          features.Columns.Add("HouseSize");
      });
  });
  

  You can pass model-based properties or lambda expressions to the Columns.Add method to create data cell bands.

  Model:

  C#

  public string Address { get; set; }
  public string Country { get; set; }
  public string City { get; set; }
  public string Street { get; set; }
  

  Partial View:

  C#

  settings.Columns.Add(m => m.Address, c => {
      c.Columns.Add(m => m.Country);
      c.Columns.Add(m => m.City);
      c.Columns.Add(m => m.Street);
  });
  

  If your model class contains complex properties …

  C#

  public class Customer {
      public Address CustomerAddress { get; set; }
  }
  public class Address {
      public string Country { get; set; }
      public string City { get; set; }
      public string Street { get; set; }
  }
  

  … you can use the following lambdas in the Add method to create data cell bands:

  C#

  var cAdress = settings.Columns.Add(m => m.CustomerAddress, c => { c.Caption = "Address"; });
  cAdress.Columns.Add(m => m.CustomerAddress.Country);
  cAdress.Columns.Add(m => m.CustomerAddress.City);
  cAdress.Columns.Add(m => m.CustomerAddress.Street);
  

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

  C#

  settings.Columns.Add(address => {
      address.FieldName = "Address";
      address.Columns.Add("Price");
      address.Columns.AddBand(features => {
          features.Caption = "Features";
          features.Columns.Add("Beds");
          features.Columns.Add("Baths");
          features.Columns.Add("HouseSize");
      });
  });
  

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.