Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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
   [Expand]Getting Started
   [Expand]Binding to Data
   [Expand]Grid View
   [Collapse]View Technology
    [Collapse]Banded Grid Views
      Banded Grid View
      Advanced Banded Grid View
      Bands Overview
      Advanced Banded Grid Views - Column Layouts
      Tutorial: Banded Grid View - API
      Tutorial: Banded Grid View - Basics
      Tutorial: Banded Grid View - Fixed Bands
      Tutorial: Banded Grid View - User Customization
      Customizing the Band Layout
      Fixed Bands
    [Expand]Card View
    [Expand]Layout View
    [Expand]Tile View
    [Expand]WinExplorer View
     View Hierarchy
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Summaries
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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

How would you rate this topic?​​​​​​​