How to: Display a List View as a Chart (Windows Forms and ASP.NET Web Forms)

• Jul 09, 2025
• 6 minutes to read

The default List Editors that visualize Views in XAF applications are GridListEditor and ASPxGridListEditor (used in WinForms and ASP.NET Web Forms applications, respectively). These default List Editors visualize List Views as grids. This topic demonstrates the capabilities of the Chart Module you can use to visualize a List View as a chart. The List View, visualized by the ChartListEditor and ASPxChartListEditor List Editors, is defined in the Application Model. Customizations of the Chart settings using the Chart Designer are also shown.

Note

If you want to display a List View as a chart in an XAF ASP.NET Core Blazor application, refer to the following topic: Chart Module.

Tip

You can see examples with Chart List Editors in the FeatureCenter demo shipped with XAF. This demo is located in the %PUBLIC%\Documents\DevExpress Demos 25.1\Components\XAF\FeatureCenter.NETFramework.XPO folder, by default.

Follow the steps below to implement the sample application demonstrating the use of Chart List Editors.

Implement Sample Persistent Object

Consider the following Employee persistent class or similar Entity Framework Core class:

C# (EF Core)

using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl.EF;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
//...
[DefaultClassOptions,DefaultProperty(nameof(FullName)),ImageName("BO_Person")]
public class Employee : BaseObject {
    [HideInUI(HideInUI.ListViewColumn)]
    public virtual string FirstName { get; set; }
    [HideInUI(HideInUI.ListViewColumn)]
    public virtual string LastName { get; set; }
    [HideInUI(HideInUI.DetailViewEditor)]
    public string FullName {
        get { return String.Format("{0} {1}", FirstName, LastName); }
    }
    public virtual string Position { get; set; }
}

// Make sure that you use options.UseChangeTrackingProxies() in your DbContext settings.

C# (XPO)

using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl;
using DevExpress.Xpo;
using System.ComponentModel;
//...
[DefaultClassOptions, DefaultProperty(nameof(FullName)), ImageName("BO_Person")]
public class Employee : BaseObject {
    public Employee(Session session) : base(session) {}
    private string firstName;
    private string lastName;
    private string position;
    [HideInUI(HideInUI.ListViewColumn)]
    public string FirstName {
        get { return firstName; }
        set { SetPropertyValue(nameof(FirstName), ref firstName, value); }
    }
    [HideInUI(HideInUI.ListViewColumn)]
    public string LastName {
        get { return lastName; }
        set { SetPropertyValue(nameof(LastName), ref lastName, value); }
    }
    [HideInUI(HideInUI.DetailViewEditor)]
    public string FullName {
        get { return String.Format("{0} {1}", FirstName, LastName); }
    }
    public string Position {
        get { return position; }
        set { SetPropertyValue(nameof(Position), ref position, value); }
    }
}

Note

Although Employee is an XPO persistent class, the technique demonstrated here can also be used with Entity Framework.

In this example, we will create the Employee chart, which can be used to compare the number of Employees with different Positions.

Create a New List View Node

Follow the steps below to create a List View node, which defines a List View to be visualized by a Chart List Editor.

• Invoke the Model Editor for the platform-agnostic module project.

• Navigate to the Views | Employee_ListView node generated for the Employee persistent object. Right-click this node and select Clone.

  

  A copy of the List View node will be created.

• Change the new node’s IModelView.Id property to “Employee_ListView_Chart”.

  

Create the Navigation Item for the Chart List View

The Employee_ListView_Chart List View created at the previous stage should be accessible by end users. Create the Employee Chart Navigation Item and set the IModelNavigationItem.View property to “Employee_ListView_Chart”.

The creation of Navigation Items is detailed in the Add an Item to the Navigation Control tutorial.

Note

Alternatively, you can define a View Variant pointing to the Employee_ListView_Chart List View. End users will be able to choose whether to display the Employee List View as a grid or as a chart. The chart List View can also be used as a Dashboard Item (see How to: Display Several Views Side-by-Side).

Add the Chart Module

Chart List Editors are shipped with the Chart Module. Add corresponding platform-specific modules to the MySolution.Win and MySolution.Web projects.

1. Add the required platform-specific NuGet packages from the following table:

   Package	Project
   DevExpress.ExpressApp.Chart.Win	WinForms-specific application project (MySolution.Win)
   DevExpress.ExpressApp.Chart.Web	ASP.NET Web Forms-specific application project (MySolution.Web)

2. In the application constructor, add the platform-specific Charts Module to the Modules collection:

   Windows Forms

   MySolution.Win\Startup.cs

   using DevExpress.ExpressApp.Chart.Win;
   
   namespace MySolution.Win {
       public class ApplicationBuilder : IDesignTimeApplicationFactory {
           public static WinApplication BuildApplication(string connectionString) {
               var builder = WinApplication.CreateBuilder();
               builder.UseApplication<MySolutionWindowsFormsApplication>();
               builder.Modules
                   .AddCharts()
                   // ...
           }
           // ...
       }
       // ...
   }
   

   ASP.NET Web Forms

   MySolution.Web\WebApplication.cs

   using DevExpress.ExpressApp.Chart.Web;
   // ...
   public partial class MySolutionAspNetApplication : WebApplication {
       public MySolutionAspNetApplication() {
           // ...
           Modules.Add(new ChartAspNetModule());
       }
       // ...
   }
   

Change the List View’s List Editor

After the Chart Module is added, the Chart List Editor can be specified using the List View node’s IModelListView.EditorType property. As there are two platform-specific Chart List Editors, you should change settings separately for the WinForms and ASP.NET Web Forms applications.

• Invoke the Model Editor for the MySolution.Win\Model.xafml file. Navigate to the Views | Employee_ListView_Chart node. In the EditorType property’s drop-down, select “DevExpress.ExpressApp.Chart.Win.ChartListEditor”.

  

• Invoke the Model Editor for the MySolution.Web\Model.xafml file. Navigate to the Views | Employee_ListView_Chart node. In the EditorType property’s drop-down menu, select “DevExpress.ExpressApp.Chart.Web.ASPxChartListEditor”.

  

Specify Chart Settings

The Chart Module extends List View nodes with the ChartSettings (IModelChartSettings) child node. To specify chart settings for the WinForms application, invoke the Model Editor for the WinForms application project and perform the following steps.

• Navigate to the Views | Employee_ListView_Chart | ChartSettings node. Click the ellipsis button to the right of the IModelChartSettings.Settings property value.

  

  XAF displays the Chart Designer form. The form initially displays the Options page that contains appearance, behavior, and border settings.

• Click the + button next to the Series (0) item in the series list on the left-hand side. Select the Bar view type in the popup menu.

  

• Set the new series Name property to Positions.

  

• Switch to the Properties tab. To define chart data, navigate to the Data properties section and find the Argument Data Member property. Open the property’s drop-down menu and double-click the Position item.

  

• In the Data group, expand the Qualitative Summary Options sub-group. Find the Summary Function property and click the ellipsis button on the right. In the invoked window, choose Count and click OK.

  

• Click OK to close the Chart Designer. XAF sets the chart settings in XML format to the Settings property in the Model Editor.

Note

Users can invoke the Chart Designer at runtime by right-clicking a chart and selecting Invoke Wizard. You can turn this feature off by setting the ChartSettings node’s ICustomizationEnabledProvider.CustomizationEnabled property to false. For more information about the Chart Designer capabilities, refer to the following topic: Chart Designer.

To specify chart settings for the ASP.NET Web Forms application, invoke the Model Editor for the ASP.NET Web Forms application project and perform the same steps. Note that there are two additional ChartSettings node’s properties available for the ASP.NET Web Forms application - IModelWebChartSettings.PreferredWidth and IModelWebChartSettings.PreferredHeight. The PreferredWidth property specifies the minimal possible width of a chart in pixels (chart control adjusts its width automatically to fit available space). The PreferredHeight property specifies the exact height.

Run the Application

Run the WinForms application. Create several Employee objects with different positions to provide data for the chart.

Select the Employee Chart navigation item. The chart will be displayed.

Run the ASP.NET Web Forms application and check that the Employee Chart is also available.