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