Master-Detail Report using Subreport

A master-detail report can be created by using Subreport control. The Subreport control is embedded into the master report which acts as a placeholder for the details report. A parameter passed from the master report to the details report filters the details for each instance of master record and renders the record. Note that there should be a common field in the two reports to establish the master-detail relationship. This field is used to filter data in the details report based on the parameter passed from the master report.

This tutorial guides you through the steps to create a Master-detail report using subreport in ActiveReportsJS Designer.

After you complete this tutorial, you will have a report that looks similar to the following.

Create Details Report (Subreport)

We will first create report that displays the order details for employees in a tabular form.

Bind Data to Report

1. Create a new report. By default, you have a blank RDL Report.

2. Connect to a data source.

   1. Go to the Data tab and click Add.

   2. In the DataSource dialog, provide the following URL as Endpoint for the Remote JSON provider:

   https://demodata.grapecity.com/northwind/odata/v1/Orders
   

   3. Click Save Changes.

3. Add a dataset.

   1. Click Add Data Set for the added data source.

   2. In the DataSet dialog, enter the Json Path: $.value[*].

   3. Validate the query to retrieve fields and Save Changes.
      
      See Databinding for information on connecting to data sources and adding datasets.

Create Data-bound Table

1. Expand the dataset fields and enable Select Fields...

   

2. Select the fields required in the table and drag-drop onto the design area.

   

   A table with its columns bound to the fields is created. The Header row above the details row is automatically filled with labels.

Alternatively, you can first drag-drop the Table data region onto the design area of the report and then populate the data by dragging and dropping the fields onto the details row.

3. In the footer row of the table, in the extreme right cell, enter the following expression =Sum(Fields!Freight.Value). Your table should now look as shown.

   

Add Parameter to the Report

Let us add a hidden parameter to the details report. This parameter will be passed form the master report to filter the data in the details report.

To add a report parameter that filters the data based on the employee id,

1. Go to the Data tab. and click Add next to 'Parameters'. A parameter, Parameter1 is added.

2. Click Parameter1 to edit parameter properties.

3. Set the Data Type property to Integer.

4. Enable the Hidden property for the parameter to 'True'.

   

Manage Data in the Report

We want the data in the details report to filter according to the employee id parameter passed from the master report.
To filter data according to the employee id parameter (Parameter1),

1. Select the table and go to the Properties pane.

2. In the Filters property, go to Show Items, and select Add Item.

3. Click to display filter properties.

4. Click the radio button next to Filter Expression and select 'EmployeeId'.

5. From the drop-down next to Operator, select 'Equal'.

6. Click the radio button next to Value and enter the expression =Parameters!Parameter1.Value.

Create Master-Detail Report

Bind Data to Report

1. Create a new report. By default, you have a blank RDL Report.

2. Connect to a data source.

   1. Go to the Data tab and click Add.

   2. In the DataSource dialog, provide the following URL as Endpoint for the Remote JSON provider:

   https://demodata.grapecity.com/northwind/odata/v1/Employees
   

3. Add a dataset.

   1. Click Add Data Set for the added data source.

   2. In the DataSet dialog, enter the JSONPath in Json Path: $.value[*].
      
      See Databinding for information on connecting to datasources and adding datasets.

Create Master Report Layout

To create the master report, we will use the List data region. The List data region will contain TextBox controls to display the data, and a Subreport control to embed details report. The List data region repeats any report control it contains for every record in the dataset.

1. Drag-drop List data region onto the design area of the report.

2. We want employees' name, title, city, and country information in the master report. To display this information, drag-drop three TextBox controls onto the list.

3. We also want to embed details report in the master report. For this, drag-drop the Subreport control onto the list. Arrange the controls such that the report now looks like the following.
   

   Verify that the hierarchy of the controls added in the report is as shown. This can be viewed in Explorer .

   

Bind Data to the Report Controls

1. Select TextBox1 and enter the expression ="Name: " & Fields!LastName.Value & ", " & Fields!FirstName.Value.
2. Select TextBox2 and enter the expression = "Title: " & Fields!Title.Value.
3. Select TextBox3 and enter the expression =Fields!City.Value & ", " & Fields!Country.Value.

Configure Subreport

To embed the details report to the master report,

1. Select Subreport control.
2. From the Properties pane, set the Report Name property to the detail report's name.

To use the parameter (Parameter1) passed from the master report to the detail report as a filter, set the parameter properties of Subreport control as follows.

3. From the Properties pane, go to Report Parameters property.

4. Click Show Items and then select Add Item.

5. Click to view the parameter properties.

6. Set the Name property to 'Parameter1'.

7. In the Value field, enter the following expression =Fields!EmployeeId.Value.

   The subreport's report parameter will now look similar to the following.

   

Note: The parameter name in details report must match the parameter in the subreport.

Add Title

1. Drag and drop a TextBox control above the List data region. If required, relocate the table to create space for the text box.
2. Click inside the text box and enter the text 'Employee Orders Report (Master-Detail Report)'.

Customize the Appearance of Master-Detail Report

Note: You may need to resize and reposition the controls on the report to accommodate data, and for a cleaner look.

1. Set the text alignments using TEXT - Text Align (Left, Right, Center, etc.) and TEXT - Vertical Text Align (Top, Middle, or Bottom) properties.

2. Set a background color for Page Header using the Background - Color property (#f1f1f1).

3. Set a font using the Text - Font Family property (Song).

4. Set the TEXT - Font Size for the text in page header (16pt) and Text - Font Color for the font color (#3da7a8).

Preview and Save Report

1. Click Preview to view your report in the final output. See how the parameter passed from master report obtains the details using the subreport control.

2. Exit the preview mode by clicking Back on the left side of the designer.

3. Click Save to open the Save dialog box. Enter the report name as 'Master Report' and click Save Report.