ActiveReports 16 .NET Edition
ActiveReports 16 User Guide / Samples and Walkthroughs / Walkthroughs / Section Report Walkthroughs / Layout / Subreports with JSON Data
In This Topic
    Subreports with JSON Data
    In This Topic

    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 DataSource in the parent report.

    This walkthrough is split up into the following activities:

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

    Design-Time Layout

    Subreport with JSON data at run time

    Run-Time Layout

    Subreports with JSON data at Run Time

    To add an ActiveReport to the Visual Studio project

    1. Create a new Visual Studio project.
    2. From the Project menu, select Add New Item.
    3. In the Add New Item dialog that appears, select ActiveReports 16 Section Report (code-based) and in the Name field, rename the file as MainReport.
    4. Click the Add button to open a new section report in the designer.
    5. From the Project menu, select Add New Item.
    6. In the Add New Item dialog that appears, select ActiveReports 16 Section Report (code-based) and in the Name field, rename the file as SubReport.
    7. Click the Add button to open a second new section report in the designer.

    See Basic Concepts for information on adding different report layouts.

    To connect the Parent Report (MainReport) 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 box that appears, 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.grapecity.com/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.grapecity.com/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.

    To create a layout for the Parent Report (MainReport)

    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 properties as follows. 
      Property Name Property Value
      Text Product Details
      Location 0, 0 in
      Size 6.5, 0.25 in
      Font Arial, 14pt, style=Bold
      Alignment Center
    4. From the toolbox, drag the controls onto the detail section and in the Properties window, set the properties of each control as follows.

      Label1

      Property Name Property Value
      Text Category Name:
      Location 0, 0 in
      Size 1.2, 0.2 in
      Font Bold True

      TextBox1

      Property Name Property Value
      DataField CategoryName
      Location 1.2, 0 in
      Size 2, 0.2 in

      Label2

      Property Name Property Value
      Text Products:
      Location 1.2, 0.25 in
      Size 1, 0.2 in
      Font Bold True

      Subreport

      Property Name Property Value
      Location 2.3, 0.25 in
      Size 4, 1 in

    To create a layout for the Child Report (SubReport)

    1. On the design surface, select the detail section and in the Properties window, set the properties as follows. 
      Property Name Property Value
      CanShrink True
      BackColor WhiteSmoke
      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 window, set the properties as follows.

      TextBox1

      Property Name Property Value
      DataField ProductName
      Name txtProductName
      Location 0, 0 in
      Size 2.9, 0.2 in

      TextBox2

      Property Name Property Value
      DataField UnitPrice
      Name txtUnitPrice
      Location 3, 0 in
      Size 1, 0.2 in
      Alignment Right
      OutputFormat $#,##0.00 (or select Currency in the dialog)

    To add code to create a new instance of the Child Report (SubReport)

    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.

    To write the code in Visual Basic

    1. Right-click the design surface of MainReport and select View Code.
    2. At the top left of the code view of the report, click the drop-down arrow and select (MainReport 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 SubReport.

    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 SubReport
    Visual Basic.NET code. Paste INSIDE the ReportStart event.
    Copy Code
    rpt = New SubReport

    To write the code in C#

    1. Click in the gray area below MainReport to select it.
    2. Click the events icon in the Properties Window 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 SubReport.

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

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

    To 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 MainReport to create a detail_Format event.
    2. Add code to the handler to:
      • Create a new GrapeCity JSONDataSource.
      • Type cast the new data source as MainReport's data source.
      • Specify a valid JSONPath expression.
      • Pass the new data source to the subreport.
      • Display SubReport in the subreport control.

    To write the code in Visual Basic

    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
    

    To write the code in C#

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

    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;
    

    To view the report

    • Click the Preview tab to view the report at design time.
    • OR
    See Also