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

• Jun 26, 2026
• 11 minutes to read

This tutorial creates a Tabbed MDI (multiple-document interface, similar to a modern browser UI) application where a VCL Report Viewer component (TdxReportControl) is placed on a non-modal child form. Different tabs allow users to preview the same report layout/template populated with different data from a sample SQLite database using a SQL Data connection component.

In this topic…

• Sample SQLite Database
• Step 1 — Create & Configure a RAD Studio Project
  • Main Form
  • Child Form
  • Create & Configure a SQL Data Source
• Step 2 — Configure Data & Report Layout Using the Report Wizard
• Step 3 — Create & Configure SQL Queries and Parameters
  • Create a Report Parameter
  • Create a SQL Query Parameter
  • Bind Created Report and SQL Query Parameters
  • Create an Additional SQL Query as a Country Lookup Field/List
    • Bind the Country Lookup List to the Report Parameter
• Step 4 — Generate a Table Report Layout
  • Preview & Test Report Layout and Parameter
  • Adjust Report Settings & Save the Report Layout Definition
• Step 5 — Add & Configure a Tabbed MDI UI
  • Main Form Configuration
    • Configure Bar Buttons
  • MDI Child Form Configuration
    • Display Unique Content in Different TdxReportControl Instances
    • Handle Child MDI Form Close Operations
• Step 6 — Build & Test Your App
  • Post-Build Events for WebView2 Loader DLL Deployment
  • Run & Test the App
• Other Tutorials

Sample SQLite Database

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

Tip

%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 data connection and UI element management components) and child (for a TdxReportControl component).

Main Form

Place the following components on the form (using the Tool Palette):

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).

TdxBackendDataConnectionManager

Manages all data sources for all reports in your application.

Child Form

Add a child form, place a Report Viewer (TdxReportControl) component in the this form, and set its Align property to alClient.

Create & Configure a SQL Data Source

1. Switch back to the main form and copy the following connection string^[1] for the sample SQLite database:

   Connection String

   XpoProvider=SQLite;Data Source=C:\Users\Public\Documents\DevExpress VCL Demos\MegaDemos\Product Demos\ExpressReports\Data\nwind.db
   

2. Double-click the TdxBackendDataConnectionManager component. In the Collection Editor dialog, select Add → Database (SQL). This menu item creates a TdxBackendDatabaseSQLConnection component designed to load data from a relational database and bind it to your report.

   

3. Select the created component in the Collection Editor dialog. Paste the copied string to the ConnectionString property editor^[2] in the Object Inspector.

   

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

Switch to the child form and right-click the TdxReportControl component and select the Designer… option^[3] to display the Report Designer dialog. Click the hamburger button to display the Report Designer menu.

Select Add Data Source… to add the configured data source to the current report layout definition.

Select Database^[2] and click Next to navigate to the Specify Data Source Settings wizard page:

Select Customers in the Tables node displayed in pane 2 and click Finish:

Step 3 — Create & Configure SQL Queries and Parameters

Create a Report Parameter

Select the FIELD LIST pane (1) in the Report Designer dialog and click the Add parameter (plus sign) button (2).

Specify Name (1), Description (2), and Value (3) fields in the Add Parameter dialog and click OK (4) to create a report parameter:

Create a SQL Query Parameter

Expand the sqlDataSource1 node and click the Edit query (pencil) button for the Categories table.

The Data Source Wizard dialog displays the current SQL query for the Customers table selected during data source configuration. Click Run Query Builder… to display the corresponding dialog.

Expand the QUERY PROPERTIES group and click the Filter field’s ellipsis button to display the Filter Editor dialog:

Add a condition, select the target field (Customers.Country) and create a SQL parameter (CountryParameter) as follows:

Bind Created Report and SQL Query Parameters

Expand the PARAMETERS group and the created parameter’s node (CountryParameter). Switch the parameter type to Expression and click the Value field’s ellipsis button.

Expand the Parameters node (1), double-click CountryReportParameter (2) to create the ?CountryReportParameter expression for the SQL query parameter, and click the OK button (3).

Click OK to close the Query Builder dialog. The Data Source Wizard displays the following SQL query:

SQL

select [Customers].[CustomerID],[Customers].[CompanyName],[Customers].[ContactName],[Customers].[ContactTitle],[Customers].[Address],[Customers].[City],[Customers].[Region],[Customers].[PostalCode],[Customers].[Country],[Customers].[Phone],[Customers].[Fax] from [Customers] [Customers]
where ([Customers].[Country] = @CountryParameter)

Click Finish to close the Data Source Wizard dialog.

Create an Additional SQL Query as a Country Lookup Field/List

Click the Add query button for the sqlDataSource1 node to display the Data Source Wizard dialog.

Specify Countries as the query name and click Run Query Builder…

Drag the Customers table to the main Query Builder area (1), check the Country field (2), set the Select distinct query property to Yes (3), and click OK (4) to create the Countries query:

The Data Source Wizard displays the following SQL query:

SQL

select distinct [Customers].[Country] from [Customers] [Customers]

Click the Finish button to close the Data Source Wizard dialog.

Bind the Country Lookup List to the Report Parameter

Expand the FIELD LIST pane and click the Edit parameter button for the previously configured CountryReportParameter:

Specify parameter settings as follows:

Click the OK button to close the Edit Parameters dialog.

Step 4 — Generate a Table Report Layout

Open the Report Designer menu and select the Design in Report Wizard… option.

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

Select sqlDataSource1 and click Next.

Select the Customers query (pane 1), all required fields within it (pane 2) – CompanyName, ContactName, Address, and Phone, 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

Preview & Test Report Layout and Parameter

Switch the Report Designer dialog to Preview mode^[4] and click the SUBMIT button in the PREVIEW PARAMETERS pane. The dialog generates a preview document where the report table is populated with customer records from the specified country.

You can use the Country combo box and the SUBMIT button to preview data for different countries.

Adjust Report Settings & Save the Report Layout Definition

Switch back to Designer mode^[4]. You can modify the report header depending on the currently selected country. Select the Customers by Country header (1), display the PROPERTIES pane (2), click the Function (f) button for the Text property (3), and select BeforePrint in the TEXT EXPRESSION menu (4):

Specify 'Customers — ' as a constant expression and add a plus (+) operator. Select Fields in the Report Items pane, double-click CountryReportParameter within the Parameters node, and click OK to close the Expression Editor dialog.

Switch to the REPORT EXPLORER pane and select Report.

Switch back to the PROPERTIES pane (1), expand the BEHAVIOR group (2), and uncheck the Request Parameters option (3):

Click the hamburger button, select the Save^[5] option and specify a report layout name (CustomersByCountry, for example).

Close the Report Designer dialog. Set the TdxReportControl component’s Active property to False using the Object Inspector and switch to the main application form.

Step 5 — Add & Configure a Tabbed MDI UI

Main Form Configuration

1. 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 TdxTabbedMDIManger component and set its Active property to True.

4. Expand the TdxTabbedMDIManager component’s TabProperties node and set the TabProperties.CloseButtonMode property to cbmEveryTab.

Configure Bar Buttons

Rename the first button to German 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);
  AForm.Caption := 'German Customers';
  AForm.dxReportControl1.Parameters['CountryReportParameter'].Value := 'Germany';
  AForm.dxReportControl1.Active := True;
  AForm.Show;
end;

C++

void __fastcall TMainForm::btnUKCustomersClick(TObject *Sender)
{
  TReportChildForm *AForm = new TReportChildForm(this);
  AForm->Caption = "German Customers";
  AForm->dxReportControl1->ParamByName("CountryReportParameter")->Value = "Germany";
  AForm->dxReportControl1->Active = true;
  AForm->Show();
}

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);
  AForm.Caption := 'UK Customers';
  AForm.dxReportControl1.Parameters['CountryReportParameter'].Value := 'UK';
  AForm.dxReportControl1.Active := True;
  AForm.Show;
end;

C++

void __fastcall TMainForm::btnUKCustomersClick(TObject *Sender)
{
  TReportChildForm *AForm = new TReportChildForm(this);
  AForm->Caption = "UK Customers";
  AForm->dxReportControl1->ParamByName("CountryReportParameter")->Value = "UK";
  AForm->dxReportControl1->Active = true;
  AForm->Show();
}

MDI Child Form Configuration

To embed the child form into the main MDI form at runtime, switch the child form’s FormStyle from fsNormal to fsMDIChild using the Object Inspector.

Display Unique Content in Different TdxReportControl Instances

A configured data connection component initially maps the same data to all TdxReportControl component instances in the same application. To display different data according to the current filter criteria, you need to associate each TdxReportControl instance with unique group names. Select the MDI child form and handle its OnCreate event as follows:

Delphi

procedure TReportChildForm.dxFormCreate(Sender: TObject);
var
  G: TGUID;
begin
  CreateGUID(G);
  dxReportControl1.GroupName := GUIDToString(G);
end;

C++

void __fastcall TReportChildForm::dxFormCreate(TObject *Sender)
{
  TGUID G;
  CreateGUID(G);
  dxReportControl1->GroupName = System::Win::Comobj::GUIDToString(G);
}

Handle Child MDI Form Close Operations

To allow users to close created MDI Child tabs, handle the child form’s OnClose event as follows:

Delphi

procedure TReportChildForm.FormClose(Sender: TObject; var Action: TCloseAction);
begin
  Action := caFree;
end;

C++

void __fastcall TReportChildForm::FormClose(TObject *Sender, TCloseAction &Action)
{
  Action = caFree;
}

Step 6 — 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 place a 32 or 64-bit WebView2Loader.dll file into the target build folder, you must:

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 following command line:

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

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

   

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

6. 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

Read Tutorial: Bind a 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.

Read Tutorial: Bind a Report to a Stored Procedure

Follow this tutorial to create a table report, bind it to a stored database procedure, and pass a report parameter to that procedure using Report Designer and Report Wizard dialogs at design time.

Read Tutorial: Create a Master-Detail Report with a Detail Band

Follow this tutorial to create a master-detail relationship between two tables in a relational SQL database and display hierarchical data in a table report.

Footnotes

1. The demonstrated connection string includes the default installation path of the sample Northwind database file (nwind.db). The actual path to the sample database file depends on the installation path you selected for the compiled DevExpress VCL demos. Update the path within the connection string as necessary.

2. If source data is unavailable to the TdxReportControl component (the Database item is not displayed in the Data Source Wizard), make sure that the connection string is correct, and uncheck and check the connection component’s Active property in the Object Inspector.

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

4. You can switch to Preview mode at any moment to ensure that the resulting report document looks as intended.

5. If you attempt to close the Report Designer dialog, you will be prompted to save pending report layout and data binding changes.