Tutorial: Banded Grid View - Basics

  • 4 minutes to read

This walkthrough is a transcript of the Banded Grid View - Basics video available on the DevExpress YouTube Channel.

The tutorial provides basic information about the Banded and Advanced Banded Grid Views. You will learn how to create and customize a banded layout at design time.

Banded Grid View Features

As you can see in the demo, the Banded Grid View displays data as a table, while organizing columns into logical groups - bands.

BandedGirdView_DemoExample

Visually, a band is represented by a header displayed above column headers. Banded Views allow you to create hierarchical structures. A higher levels Car band can be a parent to lower levels Model and Category bands. When you drag-and-drop a band header, its child bands and columns are all being moved. Hiding a band automatically hides all children as well.

The Banded View supports data sorting, filtering and other features inherited from its ancestor Grid View.

BandedGirdView_SortingAndGrouping

In the Advanced Banded Grid View, columns can be arranged one under another or occupy multiple rows. It makes rows taller, but allows you to fit more columns into the View.

AdvBandedGirdView_DemoExample

Starting Point

Start with a Grid Control that displays data using the default Grid View format. Run the application to see the initial layout.

BandedGirdView_InitialGrid

Switching to the Banded Grid View

Switch to the Banded Grid View using the grid's Level Designer.

BandedGirdView_SwitchingToBandedView

A single band containing all visible columns is automatically created.

BandedGirdView_SwitchingToBandedViewResult

Creating and Customizing a Banded Layout

To create new bands and customize them, invoke the Grid Designer and go to the Bands Page page. This page contains a preview section, a set of customization buttons and the Property grid. To append a new band, click the Add New Band... button.

BandedGirdView_DesignerBandsPageAddNewBand.png

Newly created bands can be further moved to another position by dragging their headers. To create a new band at a specific position, press and hold the Add New Band... button and move the mouse cursor to the target position within the band panel.

BandedGirdView_BandsPageAddNewBandDragging

When you drag bands, its child columns are being repositioned as well. To move columns between bands, use drag-and-drop too.

BandedGirdView_BandsPageMovingColumn

You can remove an existing band by selecting it and then clicking the Delete Selected Band button.

Click the Show Column Selector button to open the Customization Form. It contains two tabs and allows you to hide or restore bands and columns. Drag-and-drop a band's header to the Customization Form to hide that band and its columns. To restore a band, drag its header back to the band panel. Just as with columns, you can also hide bands by simply dragging their headers away from the header panel.

BandedGirdView_BandsPageColumnChooser

Bands can be resized in the same way as columns – by dragging their headers' right edges.

BandedGirdView_BandsPageBandResizing

To access a band's settings in the Property grid, click this band's header. Change the text displayed in the header using the GridBand.Caption property.

BandedGirdView_BandsPageBandCaptionProperty

Create a few more bands and add columns to them.

BandedGirdView_BandsPageResultLayout

The grid control also provides on-form access to columns and bands without the need to invoke the Designer. You can hide and display existing bands, re-order columns, move bands within their parent bands, resize bands and customize band settings.

Run the application to see the Banded Grid View layout in action.

BandedGirdView_BandedLayoutResult

Switching to the Advanced Banded Grid View

Close the application and switch to the Advanced Banded Grid View using the grid's Level Designer.

BandedGirdView_SwitchingToAdvancedBandedView

As you can see, the previously created band layout is preserved.

Customizing an Advanced Banded Layout

Arrange column headers into multiple rows. Move the Category and Liter columns to the second row within their parent bands.

AdvBandedGirdView_ColumnsInMultipleRows

As a result, empty spaces appear below column headers. Enable the BandedGridColumn.AutoFillDown option for these columns to make them occupy all available empty space.

AdvBandedGirdView_AutoFillDownProperty

By default, the auto width feature is disabled for this View type. To enable it, set the View's AdvBandedGridOptionsView.ColumnAutoWidth option to true.

Run the application to see the result.

AdvBandedGirdView_AdvBandedLayoutResult

See Also