Create BandedGridView for DevExpress XtraGrid

I would like to know how the XtraGrid and the BandedGrid play togehter and are bound to the underlaying data. The documentation has some explanatory tl;dr-text but i am missing a full working example to set it up in code. So it took me about 2 hours to figure it out. Based on this blog entry i would like to post my answer here.

If there is a better way to put the pieces together as in my answer below i would love to know about it.

First you have to know that you can bind a plain DataTable to the XtraGrid and that the creation of the banded grid is independent.

Below you can see a new instance of XtraGrid is created. It MainView is set to be a BandedGridView

private void LoadAndFillXtraGrid() // object sender, EventArgs e
{
    grid = new DevExpress.XtraGrid.GridControl(); 
    grid.Dock = DockStyle.Fill;                        
    // set the MainView to be the BandedGrid you are creating
    grid.MainView = GetBandedGridView();                
    // set the Datasource to a DataTable
    grid.DataSource = GetDataTable(); 
    // add the grid to the form      
    this.Controls.Add(grid);
    grid.BringToFront();
} 

Above the line grid.MainView = GetBandedGridView(); set a BandedGridView as the MainView of the Xtragrid. Below you see how to create this BandedGridView

//Create a Banded Grid View including the grindBands and the columns
private BandedGridView GetBandedGridView()
{                        
    BandedGridView bandedView = new BandedGridView();            
    // Set Customer Band
    SetGridBand(bandedView, "Customer", 
             new string[3] { "CustomerId", "LastName", "FirstName" });
    SetGridBand(bandedView, "Address", new string[3] { "PLZ", "City", "Street" });
    return bandedView;
}

To set up the GridBand you have to create a GridBand and attach it to the bandedGridView by calling bandedView.Columns.AddField for each column

private void SetGridBand(BandedGridView bandedView, string gridBandCaption
   , string[] columnNames)
{        
    var gridBand = new GridBand();
    gridBand.Caption = gridBandCaption;        
    int nrOfColumns = columnNames.Length;
    BandedGridColumn[] bandedColumns = new BandedGridColumn[nrOfColumns];            
    for (int i = 0; i < nrOfColumns; i++)
    {
        bandedColumns[i] = (BandedGridColumn)bandedView.Columns.AddField(columnNames[i]);
        bandedColumns[i].OwnerBand = gridBand;
        bandedColumns[i].Visible = true;
    }        
}

The DataSource can be a plain DataTable that contains some columns. If the name of the column in the datatable matches the names of the BandedGridColumn the will be automatically mapped. As you can see i added a column NotMapped in the datatable which is not visible in the screenshot above:

private DataTable GetDataTable()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { 
        new DataColumn("CustomerId", typeof(Int32)), 
        new DataColumn("NotMapped", typeof(Int32)), 
        new DataColumn("LastName", typeof(String)), 
        new DataColumn("FirstName", typeof(String)),
        new DataColumn("PLZ", typeof(Int32)),
        new DataColumn("City", typeof(String)),
        new DataColumn("Street", typeof(String))
    });
    dt.Rows.Add(1, 0, "John", "Barista", 80245, "Manhatten", "Broadway");
    dt.Rows.Add(2, 0, "Mike", "Handyman", 87032, "Brooklyn", "Martin Luther Drive");
    dt.Rows.Add(3, 0, "Jane", "Teacher", 80245, "Manhatten", "Broadway 7");
    dt.Rows.Add(4, 0, "Quentin", "Producer", 80245, "Manhatten", "Broadway 15");
    return dt;
}

If someone has a more elegant way to put the pieces together i would love to know about it.