Banded Grid Views
- 5 minutes to read
Banded Grid View (BandedGridView) displays data in a tabular form and organizes columns into bands. Advanced Banded View (AdvBandedGridView) does the same and additionally supports complex layouts of data cells.
Demo: Banded Views
Bands and Columns
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 re-arrange bands by dragging them.
Related API * BandedGridView.Bands - Provides access to the root band collection..
Add Columns to Bands
At design time, drag a column and drop it below a band.
Related API * GridBand.Columns - Provides access to columns owned by the band..
It is possible to stack bands below bands, forming a multi-level band hierarchy.
To do this at design time, drag and drop bands in the Grid Designer's "Bands" tab. In code, place child bands into parent bands' GridBand.Children collections. 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
Use the following API to modify band headers.
Specifies the band text.
Specifies the band icon.
These properties specify band heights. Use the MinBandPanelRowCount and BandPanelRowHeight properties to set the initial number of band rows and these rows' heights. Then, you can stretch a band vertically across multiple rows by setting its RowCount property. If the AutoFillDown setting is enabled, a band automatically stretches vertically to consume any available space below.
Provide access to common and individual appearance settings, applied to band headers.
Similarly to columns, you can anchor bands to left and right sides of a View. Such bands are called fixed and remain in place as end-users scroll through the View.
Related API * GridBand.Fixed - anchors a band to either side of a View.
- GridView.FixedLineWidth - specifies the width of a line that delimits fixed bands from regular ones.
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.
At design time, you can arrange columns by dragging them directly on the form surface.
Related API * BandedGridColumn.RowIndex - Places a column into a specific row.
- BandedGridColumn.RowCount - Specifies a row span, allowing a column to stretch across multiple rows.
- BandedGridColumn.OwnerBand - Gets or sets a column's parent band.
- AdvBandedGridView.SetColumnPosition - Moves a column to the specified position among visible columns belonging to the same band.
- BandedGridColumn.AutoFillDown - Allows a column to automatically fill available space below.
- BandedGridColumn.ColIndex - A read-only property that returns the position of this column within a parent band row.
using DevExpress.XtraGrid.Views.BandedGrid; // assigning columns to bands colHP.OwnerBand = bandPerfomancel; colCyl.OwnerBand = bandPerfomancel; colCapacity.OwnerBand = bandPerfomancel; colGear.OwnerBand = bandPerfomancel; colImage.OwnerBand = bandPicture; // changing the columns 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); // forcing the Image column to stretch its header if needed colImage.AutoFillDown = true;
At runtime, end-users can drag-and-drop columns and bands to customize the layout as their needs dictate. It is also possible to hide and restore bands at runtime by calling the "Customization" dialog.
- OptionsBand.AllowMove, BandedGridOptionsCustomization.AllowBandMoving - prevent users from re-arranging bands.
- GridOptionsCustomization.AllowQuickHideColumns - gets or sets whether or not users can hide a column or a band by dragging it away from the column header panel.
- BandedGridOptionsCustomization.AllowChangeBandParent, BandedGridOptionsCustomization.AllowChangeColumnParent - specify whether or not bands and columns can be moved outside their parent bands.
- OptionsBand.ShowInCustomizationForm, BandedGridOptionsCustomization.ShowBandsInCustomizationForm - allow you to hide specific bands (or all of them) from the Customization dialog.