Create BandedGridView for DevExpress XtraGrid - winforms

Question

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.

Answer 1

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.