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.
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.
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.
Starting Point
Start with a Grid Control that displays data using the default Grid View format. Run the application to see the initial layout.
Switching to the Banded Grid View
Switch to the Banded Grid View using the grid’s Level Designer.
A single band containing all visible columns is automatically created.
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.
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.
When you drag bands, its child columns are being repositioned as well. To move columns between bands, use drag-and-drop too.
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.
Bands can be resized in the same way as columns – by dragging their headers’ right edges.
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.
Create a few more bands and add columns to them.
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.
Switching to the Advanced Banded Grid View
Close the application and switch to the Advanced Banded Grid View using the grid’s Level Designer.
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.
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.
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.
