Log In
[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]Product Information
 [Expand]Getting Started
 [Expand]Fundamental Concepts
 [Expand]Design-Time Features
  [Expand]Create a Report in Code
  [Expand]Add a Report to an Application
  [Expand]Design a Report
  [Collapse]Provide Data to a Report
   [Expand]Connect a Report to Data
   [Collapse]Connect to Data in ASP.NET
     How to: Bind a Web Report to an MDB Database
     How to: Bind a Web Report to an Array List
     How to: Pass Parameters to a Web Report
     How to: Provide Custom Editors for Report Parameters in the ASP.NET Document Viewer
     How to: Provide Custom Editors for Report Parameters in the HTML5 Document Viewer
   [Expand]Supply Data to a Report
   [Expand]Use Calculated Fields
   [Expand]Use Report Parameters
  [Expand]Shape Data in a Report
  [Expand]Provide Navigation for Large Reports
  [Expand]Add Interactivity to Documents in Print Preview
  [Expand]Use Charts, Grids and Custom Controls
  [Expand]Use Bar Codes
  [Expand]Add Details about a Report
  [Expand]Customize the Report Appearance
  [Expand]Publish Your Reports
  [Expand]Store Your Reports
  [Expand]Create an End-User Reporting Application
  End-User Capabilities
 [Expand]Redistribution and Deployment
 [Expand]API Reference
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How to: Bind a Web Report to an Array List

This tutorial describes how to bind a web report to a custom object data source and display it on a web page. The data source is represented by the System.Collections.ArrayList object filled with data at runtime. The ArrayList implementation makes a project easier to understand, since there is no need to create a custom class implementing the IList, ITypedList or IBindingList interfaces.

Although this example demonstrates a runtime approach for binding to lists, you can use all of the advantages of design-time reporting when binding to objects that are created at runtime. For an online example on how this can be done, see the following example: How to set up binding for a web report using a collection of custom objects as a data source at design time.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E951.

To bind a web report to an array list at runtime, do the following.

Expanded Create a Web Application

To create a reporting Web Application, do the following.

  1. Start Microsoft Visual Studio 2010, 2012, 2013, 2015 or 2017 and create a new ASP.NET Web Application, or open an existing one.

  2. Add a new blank report to the application.

  3. Select the Default.aspx page in the Solution Explorer, switch to the Design view, and drop the ASPxWebDocumentViewer control from the DX.17.1: Reporting Toolbox tab onto the page.


    Do not assign a report to the document viewer at design time. It should be done in code at runtime.

Expanded Declare a Data Source

To declare a data source, do the following.

  1. Select Project | Add Class... in the main menu of Visual Studio, to add a file with a default class declaration to the project.

    In the invoked Add New Item dialog, click Add.

  2. Instead of the default class declaration, insert the code shown below. It declares a class with the ID, Name and Age public properties, which represent the data source fields.

Expanded Create a Report

To create and publish a report, do the following.

  1. Declare a method that will add data-bound controls to the report, as shown in the following code sample.

    For more information on binding report controls to data, refer to the Standard Data Binding topic.

  2. Next, you will instantiate the report, create the data source and bind it to the report, using the code below.

    This code defines the CreateReport function. It populates a System.Collections.ArrayList with records, and assigns it to the report's XtraReportBase.DataSource property. Then, it adds three XRLabel objects to the report's DetailBand and binds them to different data fields.

    Place the definition of the CreateReport function in the code-behind (the Default.aspx.cs file).

  3. For the ASP.NET application to work properly, create a report object by calling the CreateReport function and assign this object to the document viewer when the page is initialized or loaded. Use the following code in the code-behind (the Default.aspx.cs file).

Expanded Get the Result

The web report is now ready. Run the application and view the result.

Expanded See Also

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