Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Banded Grid Views

  • 5 minutes to read

Banded Grid View (BandedGridView) displays data in a tabular form and organizes columns into bands.

BandedGridView - Overview

Advanced Banded View (AdvBandedGridView) does the same and additionally supports complex layouts of data cells.

AdvBandedGridView---Overview

#Online Video

Accept "Target Cookies" to watch embedded YouTube videos Open cookie settings
Or
Watch this video on Youtube Watch on youtube

#Demos

#Bands and Columns

BandedGridView and AdvBandedGridView Views feature bands — stripes that organize grid columns into categories.

Data Grid - Bands - Overview

Columns in banded Views are instances of the BandedGridColumn class and inherit most of their settings from the parent GridColumn class.

#Add, Remove, Reorder and Modify Bands

Run the Grid Designer and switch to the “Bands” tab. This tab has buttons to add and remove bands, and a property grid to modify band settings. You can also drag bands to rearrange them.

Data Grid - Bands - Drag Bands

In code, create GridBand objects and place them into the BandedGridView.Bands collection.

Related API

#Add Columns to Bands

At design time, drag a column and drop it below a band.

In code, either access the band’s GridBand.Columns collection and call its “Add”, “AddRange”, and “Insert” methods, or specify the BandedGridColumn.OwnerBand property for a column.

gridBand2.Columns.Add(colFreight);
// or
colFreight.OwnerBand = gridBand2;

Related API

#Multi-Level Bands

It is possible to stack bands below bands, forming a multi-level band hierarchy.

Data Grid - Bands - Multilevel

Drag and drop bands in the Grid Designer’s “Bands” tab to do this at design time. In code, place child bands into the GridBand.Children collections of the parent bands. To retrieve a parent band, use the GridBand.ParentBand property.

// Organize bands 2 and 3 under the first one
gridBand2.ParentBand.Children.Add(gridBand3);
// or

#Band Headers

Use the following API to modify band headers.

#Fixed Bands

Similar to columns, you can anchor bands to the left and right sides of a View. Such bands are called fixed bands, and they remain in place as users scroll through the View.

Related API

#Column Layout in Advanced Banded Views

In an Advanced Banded View, a single row can display vertically stacked cells that belong to different columns. The figure below is a screenshot of the Banded Views demo with eight columns stacked into four rows with the “Performance” band above them.

Data Grid - Bands - Columns in AdvBanded

At design time, you can arrange columns by dragging them directly onto the form surface.

Related API

using DevExpress.XtraGrid.Views.BandedGrid;

// Assign columns to bands
colHP.OwnerBand = bandPerfomancel;
colCyl.OwnerBand = bandPerfomancel;
colCapacity.OwnerBand = bandPerfomancel;
colGear.OwnerBand = bandPerfomancel;
colImage.OwnerBand = bandPicture;
// Change the column layout within bands
AdvBandedGridView View = colHP.View
view.SetColumnPosition(colHP, 0, 0);
view.SetColumnPosition(colCyl, 0, 1);
view.SetColumnPosition(colCapacity, 1, 0);
view.SetColumnPosition(colGear, 1, 1);
view.SetColumnPosition(colImage, 0, 0);
// Force the Image column to stretch its header if needed
colImage.AutoFillDown = true;

BandedGridView - Overview

#End-User Customization

At runtime, users can drag and drop columns and bands to customize the layout as their needs dictate. Users can also hide and restore bands in the “Customization” dialog.

Data Grid - Bands - Customization

Related API

See Also