How to Create Multi-Level Headers (Bands) in a .NET Datagrid

There’s often a need to organize the columns of a grid into groups to present the data more clearly. The ComponentOne 2021v3 release unveiled FlexGrid capabilities to organize columns into logical groups known as Column Bands, which lets you create Banded Grid View using the new C1FlexGridBandedView component.

The Banded Grid View makes your data look more organized and easier to view by allowing you to manage the columns under a related column band.

Let’s say you need to show data related to Cars, you can create bands like Performance, Engine, Transmission, MPG, and group-related columns. This blog shows you how to use the C1FlexGridBandedView component and the design-time BandEditor to create BandedGridView and present your data in a more organized way.

Setting up the Application

Create a WinForms Application

Create a new project by following the steps below:

1. Create a .NET Framework WinForms Application
2. Add FlexGrid to the form from the toolbox
3. Add Data Source to C1FlexGrid

Add C1FlexGridBandedView and Binding it to FlexGrid

The Column Bands feature of the FlexGrid uses the C1FlexGridBandedView class of C1.Win.C1FlexGrid namespace of C1.Win.C1FlexGrid.BandedView assembly. To add the C1FlexGridBandedView component and bind it to the FlexGrid, follow these steps:

1. Add C1.Win.C1FlexGrid.BandedView package using the NuGet Package Manager. This will add the NuGet packages under the Dependencies section in the Solution Explorer.
2. When switching to the Design View, you will find the C1FlexGridBandedView component in the Toolbox, drag-and-drop the component on the form and it will get added to the component tray.
3. To bind the C1FlexGridBandedView component to the C1FlexGrid, open the C1FlexGridBandedView smart tag and set the FlexGrid property, as shown in the GIF below:

Creating the Bands

Open the Band Editor

To create the bands at design-time, we will use the Band Editor. It allows you to create new bands and customize them at design-time. The Bands Editor has two panes, one on the left side and the other on the right side of it.

The left pane provides two tabs, Band settings, and Fields. The Band settings tab lets you customize properties like Caption, ColSpan, RowSpan, Image, and Visibility for each band.

The Fields tab lets you check or uncheck the band names. The right pane has two parts: a toolbar and a grid. The toolbar displays all band operation buttons towards the top, such as Add Band, Add Child Band, Add Parent Band, and Remove Band.

Just below the toolbar, there is a grid with all the data columns or fields. All changes post the addition, deletion, or customization of bands and are reflected in the grid area.

To open the Band Editor, click the “Edit Bands” option of the Tasks menu of the C1FlexGridBandedView component.

Creating Bands Layout

When the Band Editor opens for the first time, it shows a band for each field. You do not have to create one for every column. To create the layout shown in the image above, follow these steps:

1. Create parent bands that group related columns. Let’s create an “MPG” column band to group columns related to MPG by following the steps given below:
   • Right-click the “MPG_City” band
   • Click on “Add parent band” in the context menu
   • Set the Name of the newly added band using the property grid on the left panel of the BandEditor
   • Add other related bands either dragging to the left corner of the band or by “Add Child Band” option
   • Follow the same steps as above to add Column Bands for Performance and Basic Details to group-related columns

A layout like the one shown below will be created:

Since the field in the performance band can be further categorized into Engine and Transmission related fields. We will create one more level of Column Bands, in this case, Engine and Transmission column band.

To create multi-level bands, we will create a column Band under another band using the steps below:

1. Create an “Engine” Band under the “Performance” Band
2. Add a parent band to the “Cyl” band
3. Set the name of the newly added band to Engine
4. Add other related bands like Liter and HP
5. Similarly, create the following bands:
   • “Transmission” Band under Performance, including the TransmissionSpeedCount and TransmissionAutomatic bands
   • “Make” band under Basic Details, including Brand and Model bands

You will get a layout like the one shown below:

If a band has a child band, you can also make that Band collapsible. To make a multi-level band collapse, set the CollapseTo property to the column name of your choice.

1. Set the IsCollapsed property to change the collapse/expand state of the band
2. Set the CollapseTo property for the column bands to make them collapsible to one column i.e. the “Engine” band can be collapsed to “HP”

Once all the collapsible columns are set, our layout is complete. You will get a BandedGridView like the one shown below:

To read more about FlexGrid’s Column Bands, please refer to the documentation. See Column Bands in action by checking out the ColumnBands sample.