[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Collapse]Get Started With Data Grid and Views
     [Expand]Appearance and Conditional Formatting
     [Expand]Data Editing
     [Expand]Hit Information
     [Expand]Data Binding and Working with Columns
     [Expand]Grid View - Columns, Rows and Cells
     [Collapse]Banded Views
       Tutorial: Banded Grid View - API
       Tutorial: Banded Grid View - Basics
       Tutorial: Banded Grid View - Fixed Bands
       Tutorial: Banded Grid View - User Customization
     [Expand]WinExplorer View
     [Expand]Tile View
     [Expand]Filter and Search
     [Expand]Split Presentation
     [Expand]Row Preview Sections
   [Expand]Data Binding
    Unbound Columns
   [Expand]Data Editing and Validation
   [Expand]Filter and Search
   [Expand]Focus and Selection Handling
    Format Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
   [Expand]Batch Modifications
    Hit Information
    Popup Menus
   [Expand]Save and Restore Layout
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Tutorial: Banded Grid View - Basics

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.

Expanded 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.

Expanded Starting Point

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

Expanded 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.

Expanded 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.

Expanded 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.

Expanded 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.

Expanded See Also

Is this topic helpful?​​​​​​​