Embed a Report Viewer in a Non-Modal Form, Page, or User Control (Tabbed MDI) Using a FireDAC DataSet

• Jul 28, 2026
• 10 minutes to read

This tutorial creates a Tabbed MDI (multiple-document interface, similar to a modern browser UI) application where a VCL Report Viewer (TdxReportControl) component is placed on a non-modal child form. Each tab allows users to preview the same parameterized report layout/template populated with different data that FireDAC components load from a relational database.

Tip

This tutorial uses a DevExpress JSON-based dataset connection component to load data from a sample SQLite database and a SQL parameter defined in the FireDAC dataset (TFDQuery) to filter the data.

The following related tutorial implements the same UI/UX with similar performance and demonstrates the same data loading and shaping scenario using report and SQL parameters configured at the TdxReportControl component level:

Read Tutorial: A Report Viewer in a Tabbed MDI (SQL Database)

---

In this topic…

• Sample SQLite Database
• Step 1 — Create & Configure a RAD Studio Project
  • Main Form
    • DevExpress Components
    • FireDAC Component
  • Child Form
    • DevExpress Components
    • FireDAC Components
• Step 2 — Configure FireDAC & Data Connection Components
  • FireDAC Connection
  • FireDAC Query — Configure SQL Query & Filter Parameter
  • Data Source
  • Bind the Report Viewer to Data
• Step 3 — Configure Data & Report Layout Using the Report Wizard
  • Data Loading Optimization
• Step 4 — Add & Configure a Tabbed MDI UI
  • MDI Form Configuration
  • Configure Bar Buttons
• Step 5 — Build & Test Your App
  • Post-Build Events for WebView2 Loader DLL Deployment
  • Run & Test the App
• Other Tutorials
  • Basic Tutorials
  • Master-Detail Report Tutorials

Sample SQLite Database

This guide uses the following SQLite database shipped with compiled DevExpress VCL demos:

Default Installation Path

%PUBLIC%\Documents\DevExpress VCL Demos\MegaDemos\Product Demos\ExpressReports\Data\nwind.db

Download: Compiled VCL Demos

Step 1 — Create & Configure a RAD Studio Project

Create a new Delphi or C++Builder Project with two forms – main (for UI element management components and a FireDAC connection) and child (for TdxReportControl and data connection components).

Main Form

Use the Tool Palette to place the following components on a form:

DevExpress Components

TdxBarManager

Creates and manages a Ribbon or Toolbar UI in an application.

TdxTabbedMDIManager

Allows you to arrange MDI child forms into a tabbed UI (similar to modern web browser apps).

FireDAC Component

TFDConnection

A standard component designed to establish a connection to a database management system.

Child Form

Add a child form. Use the Tool Palette to place the following DevExpress components on the form:

DevExpress Components

TdxReportControl

Allows users to view, print, and export report documents.

TdxBackendDataConnectionManager

Manages all data sources for all reports in your application.

Select the TdxReportControl component and set its Align property to alClient.

FireDAC Components

TFDQuery

A dataset component designed to execute SQL queries.

TDataSource

An interface component designed to connect datasets and data-aware components/controls on a form.

Step 2 — Configure FireDAC & Data Connection Components

FireDAC Connection

Switch to the main form, right-click the TFDConnection component, and select Connection Editor… to configure the database connection:

1. Select SQLite in the Driver ID combo box.
2. Click the folder icon for the Database parameter to display the Open File dialog and select the sample SQLite database file.
3. Click Test to check if the sample SQLite database (nwind.db) is accessible.
4. Leave the Password field empty and click OK in the FireDAC Login dialog to establish the connection.
5. Click OK to close the Connection Editor… dialog.

FireDAC Query — Configure SQL Query & Filter Parameter

1. Switch to the child form, double-click the TFDQuery component to display the FireDAC Query Editor dialog.

2. Paste the following SQL query into the command editor:

   SQL

   select [Customers].[CompanyName],[Customers].[ContactName],[Customers].[Address],[Customers].[Phone] from [Customers] [Customers]
   where ([Customers].[Country] =:CountrySqlParameter)
   

3. Switch to the Parameters tab and specify the following settings for the COUNTRYSQLPARAMETER parameter:

   1. Param type: ptInput
   2. Data type: ftString
   3. Data size: 15
   4. Value: Germany

   

4. Click Execute to fetch corresponding records from the sample SQLite database:

   

5. Close the FireDAC Query Editor dialog and enable the Active property in the Object Inspector.

Data Source

Select the TDataSource component and assign the configured TFDQuery component to the DataSet property using the Object Inspector.

Bind the Report Viewer to Data

Double-click the TdxBackendDataConnectionManager component on the form to open the Collection Editor dialog, click the Add button, and select the DataSet (JSON) option to create a TdxBackendDataSetJSONConnection component:

Select the created component and click the ellipsis button for the TdxBackendDataSetJSONConnection.DataSets property in the Object Inspector to display the Collection Editor dialog.

Click the Add New button to create a dataset link (TdxBackendDataSetCollectionItem) for the TdxBackendDataSetJSONConnection component:

Select the created TdxBackendDataSetCollectionItem component and use the Object Inspector to assign the previously configured TDataSource component to the TdxBackendDataSetCollectionItem.DataSource property:

Data is now accessible to the TdxReportControl component (according to the SQL query and filter parameter at the TFDQuery component level).

Step 3 — Configure Data & Report Layout Using the Report Wizard

Right-click the TdxReportControl component and select the Designer… option^[1] to display the Report Designer dialog. Click the hamburger button to display the Report Designer menu.

Select Design in Report Wizard… to display available report types:

Select Table Report on the Select Report Type page to create a tabular report and click Next.

Select JSON on the Select Data Source page to use the previously configured dataset connection component and click Next.

The Select data fields pane displays all sample data fields selected at the dataset level using a SQL query. Click Next to navigate to the Define Report Layout step.

Select DataSource1 in panes 1 and 2, and click Finish.

Review and modify the generated report layout as necessary.

Tip

Refer to the following section for detailed information on report layout customization options:

Reports for Web — Report Designer

Save the report layout definition and close the Report Designer dialog.

Data Loading Optimization

To avoid redundant data reload/JSON serialization operations when an MDI Child form with a TdxReportControl component is displayed, do the following:

1. Set the TdxReportControl.Active property to False.
2. Select the TFDQuery component, expand the ActiveStoredUsage node in the Object Inspector, and uncheck the auRunTime option to ensure that the TFDQuery.Active property is disabled at application startup.

Tip

At runtime, enable the TdxReportControl.Active property and open the TFDQuery dataset as demonstrated in the following section: Configure Bar Buttons.

Step 4 — Add & Configure a Tabbed MDI UI

MDI Form Configuration

1. Switch to the main form, right-click a TdxBarManager component (dxBarManager1), and click Add Toolbar. Add two bar buttons (TdxBarButton) using the created toolbar’s context menu:

   

2. Switch the main form’s FormStyle property from fsNormal to fsMDIForm using the Object Inspector.

3. Select the TdxTabbedMDIManager component and set its Active property to True.

4. Select the child form and switch its FormStyle property from fsNormal to fsMDIChild.

Configure Bar Buttons

Switch back to the main form, rename the first button to German Customers, double-click the button, and add the following OnClick event handler:

Delphi

procedure TMainForm.btnGermanCustomersClick(Sender: TObject);
var
  AForm: TReportChildForm;
begin
  AForm := TReportChildForm.Create(Self);  // dxReportControl1.Active is disabled at design time
  AForm.Caption := 'German Customers';
  // Apply the target filter criteria to data using the previously configured report parameter
  AForm.FDQuery1.ParamByName('CountrySqlParameter').Value := 'Germany';
  AForm.FDQuery1.Open;                     // Fetches data according to the specified filter criteria
  AForm.dxReportControl1.Active := True;   // Displays report content
end;

C++

void __fastcall TMainForm::btnGermanCustomersClick(TObject *Sender)
{
  TReportChildForm *AForm = new TReportChildForm(this);  // dxReportControl1.Active is disabled at design time
  AForm->Caption = "German Customers";
  // Apply the target filter criteria to data using the previously configured report parameter
  AForm->FDQuery1->ParamByName("CountrySqlParameter")->Value = "Germany";
  AForm->FDQuery1->Open();                 // Fetches data according to the specified filter criteria
  AForm->dxReportControl1->Active = true;  // Displays report content
}

Rename the second button to UK Customers, double-click the button, and add the following OnClick event handler:

Delphi

procedure TMainForm.btnUKCustomersClick(Sender: TObject);
var
  AForm: TReportChildForm;
begin
  AForm := TReportChildForm.Create(Self);  // dxReportControl1.Active is disabled at design time
  AForm.Caption := 'UK Customers';
  // Apply the target filter criteria to data using the previously configured report parameter
  AForm.FDQuery1.ParamByName('CountrySqlParameter').Value := 'UK';
  AForm.FDQuery1.Open;                    // Fetches data according to the specified filter criteria
  AForm.dxReportControl1.Active := True;  // Displays report content
end;

C++

void __fastcall TMainForm::btnUKCustomersClick(TObject *Sender)
{
  TReportChildForm *AForm = new TReportChildForm(this);  // dxReportControl1.Active is disabled at design time
  AForm->Caption = "UK Customers";
  // Apply the target filter criteria to data using the previously configured report parameter
  AForm->FDQuery1->ParamByName("CountrySqlParameter")->Value = "UK";
  AForm->FDQuery1->Open();                 // Fetches data according to the specified filter criteria
  AForm->dxReportControl1->Active = true;  // Displays report content
}

Step 5 — Build & Test Your App

Post-Build Events for WebView2 Loader DLL Deployment

All applications that include the TdxReportControl component require the WebView2 Runtime as a dependency.

To automatically copy a 32- or 64-bit WebView2Loader.dll file to the target build folder, do the following:

1. Open the Project Options dialog. Select the Project → Options… item in the RAD Studio menu or press Ctrl + Shift + F11).

2. Select Build → Build Events in the tree view pane on the left and select the following option in the Target combo box:

   'All Configurations - All Platforms'

   

3. Copy the command line for the target compiler and platform:

   All Delphi & C++ (Classic Compiler)

   copy /Y "$(BDS)\Redist\$(Platform)\WebView2Loader.dll" "$(OUTPUTDIR)"
   

   C++ (64-bit Modern Compiler)

   copy /Y "$(BDS)\Redist\Win64\WebView2Loader.dll" "$(OUTPUTDIR)"
   

4. Paste the DLL deployment command line into the Commands box:

   

5. Optional. This step is required only for the Modern C++ RAD Studio compiler.

   If you use Windows 64-bit (Modern) as a build target, select the Windows 64-bit (Modern) platform (1), expand the Post-build events → Commands node (2), uncheck the Inherit option (3), and paste the Modern compiler-specific command into the Commands box (4):

   

6. Click Save to apply pending changes and close the Project Options dialog.

7. Build the project. Confirm that the configured post-build event is trusted in the following dialog:

   

All build operations in the current RAD Studio project now ensure that the platform-specific WebView2Loader.dll file version is available in the target build folder (for both Debug and Release configurations).

Run & Test the App

Run the app and click bar buttons to create corresponding tabbed child MDI forms. Click tabs to switch between different data within the same report layout displayed using a TdxReportControl component.

Other Tutorials

Basic Tutorials

Read Tutorial: Create a Table Report Using JSON Data

Load JSON data from a remote source, define the report layout, and bind the data to the report at design time using the Report Wizard dialog. Display the resulting report in a VCL application.

Featured Components: TdxReport | TdxBackendDataConnectionManager | TdxBackendInMemoryJSONConnection

Read Tutorial: Bind a Table Report to FireDAC Data

Follow this tutorial to create a table report and bind it to data using standard FireDAC components (TFDQuery and TFDConnection) shipped with the RAD Studio IDE.

Featured Components: TdxReport | TdxBackendDataConnectionManager | TdxBackendDataSetJSONConnection

Master-Detail Report Tutorials

Read Tutorial: Create a Master-Detail Report (SQL Database)

Define a master-detail relationship between two tables, create the report layout in the Report Designer dialog at design time, and display the report in the Report Viewer end-user dialog at runtime.

The demonstrated solution defines SQL queries and a master-detail relationship at the TdxReport component level using the DevExpress XPO-based data connection component.

Featured Components: TdxReport | TdxBackendDataConnectionManager | TdxBackendDatabaseSQLConnection

Read Tutorial: Create a Master-Detail Report (FireDAC DataSet)

Load data from two tables in a sample SQLite database, configure the report layout using the Report Wizard, and display the resulting report in the Report Viewer end-user dialog at runtime.

The solution uses two SQL queries at the FireDAC dataset (TFDQuery) level and defines a master-detail relationship at the TdxReport component level using Data Federation.

Featured Components: TdxReport | TdxBackendDataConnectionManager | TdxBackendDataSetJSONConnection | TFDConnection | TFDQuery | TDataSource

Tip

Refer to the following topic for a complete list of TdxReport/TdxReportControl tutorials: VCL Reports: Getting Started.

Footnotes

1. Alternatively, you can double-click the TdxReportControl component.