Developers / Work with Reports using Code / Section Report / Work with Code-based Section Reports / Subreport in Section Reports / Subreports with JSON Data
Subreports with JSON Data

Using JSON data requires some setup that is different from other types of data. This walkthrough illustrates how to set up a subreport bound to the JSON data source in the parent report.

When you complete this walkthrough you get a layout that looks similar to the following at design time and at run time.

Subreport with JSON data at runtime time

Create Report

  1. In Visual Studio, create a new Windows Forms App (.NET Framework) project and click Next.
  2. In the Configure your new project dialog, type a name for your project, set Framework to .NET Framework 4.7 and click Create.
  3. From the Project menu, select Add New Item.
  4. In the Add New Item dialog that appears, select ActiveReports 19 Code-Based Report and in the Name field, rename the file as rptMain.
  5. Click the Add button to open a new Section Report in the designer.
  6. From the Project menu, select Add New Item.
  7. In the Add New Item dialog that appears, select ActiveReports 19 Code-Based Report and in the Name field, rename the file as rptSub.
  8. Click the Add button to open a second new Section Report in the designer.

Connect the Parent Report (rptMain) to a Data Source

  1. On the detail section band, click the Data Source Icon.
    Data Source icon
  2. In the Report Data Source dialog, select the JSON tab.
  3. Click the Build button next to the Connection String section to open the Configure JSON Data Source dialog box.
  4. Specify the following JSON file URL in the Data Path field of the dialog box.
    JSON File URL
    Copy Code
    https://demodata.mescius.io/northwind/odata/v1/Categories?$expand=Products
    
    The Connection String section displays the generated connection string as shown below.
               
    Connection String
    Copy Code
    jsondoc=https://demodata.mescius.io/northwind/odata/v1/Categories?$expand=Products
    
  5. Click OK to proceed further.
  6. In the JSON Path field, enter the below query to fetch the required data from the JSON path defined above.
               
    Query
    Copy Code
    $.value[*]
    
  7. Click OK to save the data source and return to the report design surface.

Design Report Layout for the Parent Report (rptMain)

Subreport with JSON data at runtime time

  1. On the design surface, select the pageHeader section and in the Properties window, set the Height property to 0.3.
  2. On the design surface, select the detail section and in the Properties window, set the CanShrink property to True to eliminate white space.
  3. From the toolbox, drag the Label control onto the pageHeader section and in the Properties window, set the Text property to 'Product Details'. 
  4. From the toolbox, drag the following controls onto the detail section and in the Properties panel, set the properties of each control as follows.
    • TextBox1
      DataField: CategoryName
    • Label1
      Text: Category Name:
    • Label2
      Text: Products:
    • Subreport

Design Report Layout for the Child Report (rptSub)

  1. On the design surface, select the detail section and in the Properties panel, set the BackColor to 'White Smoke'
    Tip: Even if you do not want colors in your finished reports, using background colors on subreports can help in troubleshooting layout issues.
  2. On the design surface, right-click the pageHeader or pageFooter section and select Delete. Subreports do not render these sections, so deleting them saves processing time.
  3. From the toolbox, drag the following controls to the detail section and in the Properties panel, set the properties as follows.
    Property Name Property Value
    TextBox1
    DataField ProductName
    Name txtProductName
    TextBox2
    DataField UnitPrice
    Name txtUnitPrice
    OutputFormat $#,##0.00 (or select Currency in the dialog)

Add Code to Create a new instance of the Child Report (rptSub)

Warning: Do not create a new instance of the subreport in the Format event. Doing so creates a new subreport each time the section Format code is run, which uses a lot of memory.

VB Code:

  1. Right-click the design surface of rptMain and select View Code.
  2. At the top left of the code view of the report, click the drop-down arrow and select (rptMain Events).
  3. At the top right of the code window, click the drop-down arrow and select ReportStart. This creates an event-handling method for the ReportStart event.
  4. Add code to the handler to create an instance of rptSub.

The following example shows what the code for the method looks like.

Visual Basic.NET code. Paste JUST ABOVE the ReportStart event.
Copy Code
Dim rpt As rptSub

 

Visual Basic.NET code. Paste INSIDE the ReportStart event.
Copy Code
rpt = New rptSub()

C# Code:

  1. Click in the gray area below rptMain to select it.
  2. Click the events icon in the Properties panel to display available events for the report.
  3. Double-click ReportStart. This creates an event-handling method for the report's ReportStart event.
  4. Add code to the handler to create a new instance of rptSub.

The following example shows what the code for the method looks like.

C# code. Paste JUST ABOVE the ReportStart event.
Copy Code
private rptSub rpt;
C# code. Paste INSIDE the ReportStart event.
Copy Code
rpt = new rptSub();

Add Code to Pass a subset of the Parent Report's data to the Child Report

To add code to pass a subset of the parent report's data to the subreport

  1. Double-click in the detail section of the design surface of rptMain to create a detail_Format event.
  2. Add code to the handler to:
    • Create a new JSONDataSource.
    • Type cast the new data source as rptMain's data source.
    • Specify a valid JSONPath expression.
    • Pass the new data source to the subreport
    • Display rptSub in the subreport control

The following example shows what the code for the method looks like.

Visual Basic.NET code. Paste INSIDE the Format event.
Copy Code
Dim jsonDS As New GrapeCity.ActiveReports.Data.JsonDataSource
jsonDS.JsonData = (CType(Me.DataSource, GrapeCity.ActiveReports.Data.JsonDataSource)).Field("Products").ToString()
jsonDS.JsonPath = "$.[*]"
rpt.DataSource = jsonDS
SubReport1.Report = rpt

C# code. Paste INSIDE the Format event.
Copy Code
GrapeCity.ActiveReports.Data.JsonDataSource jsonDS = new GrapeCity.ActiveReports.Data.JsonDataSource();
jsonDS.JsonData = ((GrapeCity.ActiveReports.Data.JsonDataSource)this.DataSource).Field("Products").ToString();
jsonDS.JsonPath = "$.[*]";
rpt.DataSource = jsonDS;
subReport1.Report = rpt;

Preview the report

Click the preview tab to view the report at design time.