How to: Display a List View as a Pivot Grid Table and Chart

This topic demonstrates how to display a default List View as a pivot table in XAF applications:

The article uses a sample Order business object with the Customer, Product Name, Product Category, Price, and Units Purchased fields.

PivotGridBefore1

You can display the Order List View as a pivot table by adding the Pivot Grid Module to your application and replacing the default Grid List Editor with the Pivot Grid List Editor. The screenshot below demonstrates the result.

PivotGridModuleResult

You can see examples with Pivot Grid List Editors in the FeatureCenter demo shipped with XAF. The Feature Center demo is installed in %PUBLIC%\Documents\DevExpress Demos 18.1\Components\eXpressApp Framework\FeatureCenter by default. The ASP.NET version of this demo is available online at http://demos.devexpress.com/XAF/FeatureCenter/.

Note
  • Mobile applications do not support the Pivot Grid module.

Add the Pivot Grid Module

  • Double click the Module.Win project's WinModule.cs file to invoke the Module Designer for this project.
  • Drag the PivotGridWindowsFormsModule item from the Toolbox onto the Required Modules panel.

    PivotGrid006-AddModuleToWin

  • Double click the Module.Web project's WebModule.cs file to invoke the Module Designer for this project.
  • Drag the PivotGridAspNetModule item from the Toolbox onto the Required Modules panel.

    PivotGrid007-AddModuleToWeb

  • Save the changes.
  • Rebuild your solution.

Change the List View's List Editor

  • Double-click the Module.Win project's Model.DesignedDiffs.xafml file to invoke the Model Editor for this project.
  • Navigate to the Views | Order_ListView node. In the EditorType (IModelListView.EditorType) property's drop-down, select "DevExpress.ExpressApp.PivotGrid.Win.PivotGridListEditor" instead of XAF's default List Editor.

    PivotGrid008-ChangeEditorWin

  • Double-click the Module.Web project's Model.DesignedDiffs.xafml file to invoke the Model Editor for this project.
  • Navigate to the Views | Order_ListView node. In the EditorType property's drop-down, select "DevExpress.ExpressApp.PivotGrid.Web.ASPxPivotGridListEditor" instead of XAF's default List Editor.

    PivotGrid-009ChangeWebEditor

Specify Pivot Grid Settings

Run the Application

  • Run the WinForms application and select the Order Navigation Item to display the pivot table.

    PivotGrid020-settings

  • Run the ASP.NET application and check that the Order pivot table is also available.

    PivotGrid016-WebApp

Tip

For more details on working with pivot tables, refer to the Pivot Grid control article (WinForms/ASP.NET) and watch the DevExpress Pivot Grid: Getting Started (WinForms/ASP.NET) videos.