Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[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
[Collapse]eXpressApp Framework
 [Expand]Fundamentals
 [Expand]Getting Started
 [Expand]Concepts
 [Expand]Design-Time Features
 [Expand]Functional Testing
 [Expand]Deployment
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]Actions
  [Expand]Navigation
  [Expand]Views
  [Collapse]List Editors
    How to: Configure Bands in a Grid List Editor (WinForms and ASP.NET)
    How to: Edit a Reference Property in the Batch Edit Mode
    How to: Implement a Custom WinForms List Editor
    How to: Implement an ASP.NET Web List Editor Using a Custom Control
    How to: Support a Context Menu for a Custom WinForms List Editor
  [Expand]Property Editors
  [Expand]Templates
  [Expand]Filtering
  [Expand]Reporting
  [Expand]Dashboards
  [Expand]Scheduler and Notifications
  [Expand]Maps
  [Expand]Security
  [Expand]Workflow
  [Expand]Localization
  [Expand]Testing
  [Expand]Miscellaneous UI Customizations
 [Expand]Frequently Asked Questions
 [Expand]API Reference
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How to: Configure Bands in a Grid List Editor (WinForms and ASP.NET)

This topic describes how to group grid columns using bands in both WinForms and ASP.NET XAF applications.

Note

If you prefer to watch a video rather than walk through these step-by-step instructions, visit the corresponding tutorial on the DevExpress YouTube Channel: XAF: Bands in Grid List Editors. You can also see a demonstration of bands in the List Editors | Grid | Banded List View section of the Feature Center demo. By default, the Feature Center demo is installed in %PUBLIC%\Documents\DevExpress Demos 17.1\Components\eXpressApp Framework\FeatureCenter. The ASP.NET version of this demo is available online at http://demos.devexpress.com/XAF/FeatureCenter/.

In this example, the Simple Project Manager demo application installed to the %PUBLIC%\Documents\DevExpress Demos 17.1\Components\eXpressApp Framework\SimpleProjectManager is used. However, you can follow the steps below in any XAF application that provides a List View with several columns, but obviously the captions will differ.

  1. Run the Model Editor for the platform-agnostic module. In the node tree to the left, find the ListView node that you are going to customize (e.g., the ProjectTask_ListView node). Focus the BandsLayout child node. In the property grid to the right, set the IModelBandsLayout.Enable property to true.

  2. After changing the Enabled value, you will notice that now it is possible to expand the child nodes of the BandsLayout node. By default, no bands are added, and this node contains columns only. To add a band, right-click BandsLayout and choose Add... | Band.

  3. Focus the newly added node and specify a meaningful Id for it (e.g., TaskDetails).

    Note

    The IModelBand.Caption of a band is filled automatically based on the Id value. However, you can change the caption when required.

  4. Select columns to be added to the TaskDetails band (hold the CTRL key and click the corresponding nodes). Then, drag the selected columns to the TaskDetails band node.

  5. Analogously, add another band (e.g., Schedule) and move the remaining columns into it. The resulting bands layout is illustrated below.

    Tip

    You can add a band inside an existing band to create a complex bands hierarchy.

  6. Run the WinForms application to see the result. According to the bands layout illustrated in the previous step, the ProjectTask List View has two bands - Schedule and TaskDetails. The Schedule band enclosures the Start Date and End Date columns. The Subject, Status and Assigned To columns are grouped into the TaskDetails band.

  7. Run the ASP.NET application to ensure that the bands layout is exactly the same.

  8. Now let us try the extra configuration options available for WinForms only. Stop debugging and run the Model editor for the WinForms module project. In the node tree to the left, find the BandsLayout node that you configured in the previous steps. Focus a column within a band (e.g., Subject). Change the IModelBandedColumnWin.RowIndex value to 1.

    Tip

    In WinForms, you can specify what customization capabilities of bands are allowed to end users and hide band/column headers using the IModelBandsLayoutWin properties.

  9. Run the WinForms application to see the result. The Subject column is now displayed below the Status and Assigned To columns that have zero RowIndex.

Important

When configuring bands, keep in mind the differences in behavior between WinForms and ASP.NET grid controls:

  • Columns that are not added to any band are visible in ASP.NET applications only. The WinForms grid control does not display such columns.
  • The IModelBandedColumnWin.RowIndex option is available for WinForms only. You cannot arrange column headers across rows in ASP.NET applications.
  • Options that restrict band configuration by users (see IModelBandsLayoutWin) are available in WinForms only.
That is why we recommend the following:
  • Setup bands separately for WinForms and ASP.NET. Configuring bands in a platform-agnostic module is suitable for very simple band layouts only.
  • Avoid merging platform-specific band configuration in a common module.

Expanded See Also

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