Bands

  • 3 min 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.

// 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:

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.

    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:

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

    Partial View:

    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 ...

    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:

    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).

    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.

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 columns 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.

settings.SettingsBehavior.ColumnMoveMode = GridColumnMoveMode.ThroughHierarchy;