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
   [Collapse]Getting Started
    [Collapse]Walkthroughs
     [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]Grouping
     [Expand]Filter and Search
     [Expand]Sorting
     [Expand]Summaries
     [Expand]Split Presentation
     [Expand]Row Preview Sections
   [Expand]Data Binding
   [Expand]Views
   [Expand]Data Editing and Validation
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Filter and Search
   [Expand]Summaries
   [Expand]Focus and Selection Handling
    Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
    Scrolling
   [Expand]Batch Modifications
   [Expand]Hit Information
    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]ASP.NET Core 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]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Tutorial: Banded Grid View - API

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

In this tutorial, you will learn how to create a banded and advanced banded layout in code. You'll start with switching the main View to the required type. Then, you'll create first-level bands and their child bands to create a hierarchy. After bands are initialized, you will create columns and link them to parent bands. Finally, you'll switch to the Advanced Banded Grid View where you will move columns to the second row and let column headers fill the empty space under them.

Expanded Starting Point

Start with the application that has a Grid Control bound to a Car database.

Expanded Switching to the Banded Grid View

The Create Banded Layout button in the Ribbon control will initiate the code that switches the layout to the Banded View. In the Click event handler, create a BandedGridView instance, disable its ColumnViewOptionsBehavior.AutoPopulateColumns option and assign the resulting object to the grid's GridControl.MainView property.

Run the application and click the Create Banded Layout button. As you can see, the layout switched, but the newly created View is empty since automatic column generation was disabled.

Expanded Creating Top-Level Bands

Close the application and return to the handler code. Create the GridBand instances to add the Main, Performance Attributes and Notes bands at the top hierarchical level. Add the objects to the View's BandedGridView.Bands collection.

Run the application, click the button and now the View will have the bands displayed.

Expanded Creating Nested Bands

This time, create nested bands. To do this, create new band objects and add them to the Main band's GridBand.Children collection.

Run the application and click the button to see the new hierarchical band structure.

Expanded Creating Banded Columns

Return to the click handler code and create columns represented by BandedGridColumn objects. Initialize their GridColumn.FieldName properties and make them visible. Add created columns to the View's BandedGridView.Columns collection.

Format the Price column values as currency using the GridColumn.DisplayFormat property.

Run the app and click the button again. As you can see, columns are not displayed within the View and that's because they haven't been linked to bands yet.

Expanded Assigning Columns to Bands

To add a column to a band, set the columns' BandedGridColumn.OwnerBand property.

Run the application, click the buttons and see that columns are now visible under their corresponding bands.

Expanded Switching to the Advanced Banded Grid View

Return to code and modify the handler so that it creates an Advanced Banded Grid View instead of a standard Banded Grid View. You will simply have to use a different class for the view. The rest of the code will continue working.

Run the application. The layout is the same as before, only the Column Auto Width feature is now disabled.

Expanded Arranging Columns into Multiple Rows

Close the application and arrange column headers into multiple rows. To display the Category and Liter columns under other columns within their parent bands, set their BandedGridColumn.RowIndex property to 1.

Run the application again. You can see the change, but now empty spaces appear under certain column headers.

Expanded Automatically Stretching Column Headers

To automatically modify the height of column headers to fill empty spaces, enable their BandedGridColumn.AutoFillDown option.

Run the application and click the Create Banded Layout button again to see the final result.

Expanded Complete Code

Expanded See Also

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