A newer version of this page is available. Switch to the current version.

Create a Report in Visual Studio

  • 8 minutes to read

This document explains how to create a platform-independent report that you can print, save to a file, share, and reuse in different applications.

Create a New Visual Studio Project

The core Reporting functionality does not depend on a specific application platform. You can create any application with an active DevExpress subscription.

WinForms
  1. Press CTRL+SHIFT+N, or select FILE | New | Project... in the main menu.

create-new-application-windows-forms

  1. In the New Project dialog, expand the Installed category and select a programming language (Visual C# or Visual Basic). Select Windows Desktop and choose Windows Forms App (.NET Framework).

    Specify the application name and click OK.

WPF
  1. Press CTRL+SHIFT+N, or select FILE | New | Project... in the main menu.

create-new-application-windows-forms

  1. In the New Project dialog, expand the Installed category and select a programming language (Visual C# or Visual Basic) in the Templates section. Switch to the Windows Desktop section and select WPF Application.

    Specify the application name and click OK.

ASP.NET MVC
  1. Select FILE | New | Project… in the main menu or press CTRL+SHIFT+N.

create-new-application-windows-forms

  1. In the invoked New Project dialog, expand the Installed category, select a programming language (Visual C# or Visual Basic) in the Templates section, and select the DevExpress v19.2 Template Gallery.

    Specify the application name and click OK.

  2. In the invoked DevExpress Template Gallery, select Web Application With Selectable Layout under the ASP.NET MVC category and click Run Wizard.
TIP

You can also select Reporting Web Application to create an application that contains the HTML5 Document Viewer and/or Report Designer controls. See the following documents for instructions:

  1. In the DevExpress ASP.NET MVC Project Wizard, on the Choose Layout page, select Standard.

asp-net-devexpress-project-wizard-create-standard

  1. Switch to the Suites page, enable the Report suite, and click Create Project.

    asp-net-mvc-devexpress-project-wizard-suite

ASP.NET Web Forms
  1. Start Microsoft Visual Studio and press CTRL+SHIFT+N or click FILE | New | Project... in the main menu.

    create-new-application-windows-forms

You can also choose the Web Site option instead of Project. However, the Web Application project provides greater extensibility and easier maintenance.

  1. In the New Project dialog, expand the Installed category, select a programming language (Visual C# or Visual Basic) in the Templates section, and select ASP.NET Web Application. Specify the application name and click OK.

  2. Choose Web Forms and click OK to create the project.

ASP.NET Core

Perform the following steps to create a new ASP.NET Core Web Application in Visual Studio:

  1. Create a new project (select FILE | New | Project in the main menu or press CTRL+SHIFT+N).

    create-new-project-vs2017

  2. Select the Installed | Visual C# | Web | ASP.NET Core Web Application project template in the invoked New Project dialog. Specify the application name and click OK.

    new-project-dialog-asp-net-core-application

  3. Select .NET Core in the top-left drop-down box. Then, select ASP.NET Core 2.1 in the version selector drop-down list. Choose Web Application (Model-View-Controller) and click OK.

    asp-net-core-application-settings

Add a New Report

The steps in this section are similar for all application platforms.

  1. In Visual Studio, press CTRL+SHIFT+A or select PROJECT | Add New Item... in the main menu.

    add-new-item-windows-forms

    If your project is an ASP.NET Web Site

    Create the App_Code folder and select that folder to add a new item.

  2. In the invoked Add New Item dialog, click the Reporting section in the tree on the left, select the DevExpress v19.2 Report item, specify the report name (the default name is XtraReport1), and click Add.

  3. Select the report type in the invoked Report Wizard.

Select a Report Type

At this stage, you can choose a report type.

  • Blank allows you to design a report from scratch.
  • Table Report allows you to create a data-bound report.
Report Types

The Report Wizard offers seven report type options.

  • Blank. Choose this template to open the Report Designer and create a report layout.

    getting-started-blank-report

  • Table Report. This template displays your data in a tabular format. get-started-add-table-report-result-design

  • Cross-Tab Report. Displays summarized data at row and column intersections. Emulates a Microsoft Excel pivot table.

  • Vertical Report. A vertically-oriented Table Report: data fields are rows, data records are columns. This orientation is used for sources with a large number of data fields.

    VerticalBandDemoReport_WizardResult

  • Labels. Rectangular cards designed by AOne, APLI, Avery, Formtec, HERMA, Hisago, and others. You can use this template to print business cards, wedding invitations, name badges, index cards, Rolodex cards, and other labels.

  • Template. Choose from invoice templates with different layout and appearance settings.

    get-started-template-wizard

  • Inherited Report. Allows you to build a new report that inherits its layout from an existing report. You can select a report from a list or load a .dll assembly/.exe file that contains the base report. get-started-inherited-report

Blank

Select Blank and click Finish.

The Report Designer will display the newly created blank report:

Proceed to design your report. Review the Create a Report from A to Z for information on how to use report bands, add reporting controls and bind a report to data. Switch to the Preview tab to see your changes.

Table Report

Select Table Report and click Next.

Follow the directions on the Wizard pages to create a data-bound report.

  1. This page allows you to select the data source type. Choose Database and click Next.

  2. On the next page, you can specify whether to use an existing data connection from Visual Studio's Server Explorer, or create a new connection.

    report-wizard-page-visual-studio-database-02a

    Select the first option and click Next.

  3. On this page, you can define a custom connection string or select one from the list of supported data providers.

    Depending on the data provider, you will be able to specify additional connection options (such as authentication type and database name) on this page.

    This example shows how to bind a report to the sample Northwind database hosted on a Microsoft SQL Server.

    report-wizard-database-sql-server

    Click Next to proceed to the next wizard page.

  4. This page allows you to specify whether you wish to save the connection string to the application's configuration file.

    report-wizard-save-connection-string

    If you choose to save the connection string, specify its name and click Next.

  5. On this page, choose which tables, views, and/or stored procedures to add to the report.

    Select the Products data table and click Next.

    get-started-simple-report-wizard-select-table

  6. Using this page, select a data member in the left pane. Use the right pane to select the fields that should be displayed in the report.

    get-started-simple-report-wizard-select-fields

    Click Finish.

    NOTE

    You can click Next to proceed to the next wizard page and continue with further report customization.

  7. The Wizard creates a report and loads it in the designer. The report layout is shown below:

    get-started-add-table-report-result-design

Preview a Report

The Visual Studio Report Designer allows you to preview the report while working on it. Click the Preview tab to load data, create a document, and display it. If you follow the steps above to create a table report, the Preview looks like this:

Once you are done with report design, you can perform the following tasks:

Save a Report

When you create a report in Visual Studio, the project contains the following files:

WinForms, WPF, ASP.NET Web Forms, ASP.NET MVC

ASP.NET Core

  • code file (your_report_name.cs or your_report_name.vb)
  • designer file (your_report_name.Designer.cs or your_report_name.Designer.vb)
  • resource file (your_report_name.resx)
  • code file (your_report_name.cs)
  • designer file (your_report_name.Designer.cs) that creates a report initializer to retrieve the information from the .repx file
  • report layout file (your_report_name.repx) that contains information on the report structure in XML

The reason for the difference is the lack of the CodeDOM provider for ASP.NET Core. The Visual Studio Report Designer in the ASP.NET project uses a custom editor to load .repx files. The editor is based on the full .NET framework. This complicated design allows us to launch the integrated designer with limitations.

To save a report, click the report's smart tag (a button in the upper left corner of the Designer window) and select Save...:

save-report-defintion-visual-studio-design-time

In the invoked Save As dialog, specify the name of the .repx file.

After a report is saved, you can open it with the report's smart tag Open/Import... action:

open-import-report-visual-studio-design-time

To transfer a report created in Visual Studio Designer from one project to another, follow the steps below:

  1. Save a report to REPX.
  2. Open your project in Visual Studio and create a new report.
  3. Open the newly created report in the Visual Studio Designer, click the report smart tag and select Open/Import... to load the REPX file saved in step 1.

In code, use the XtraReport.SaveLayoutToXml method to save the .repx file and the XtraReport.LoadLayoutFromXml method to load the report.

For more information on methods and formats used to save the reports, review the following help topic: Store Report Layouts and Documents.

See Also