ActiveReports 16 .NET Edition
ActiveReports 16 User Guide / Samples and Walkthroughs / Walkthroughs / Section Report Walkthroughs / Data / Create and Configure JSON Data Source
In This Topic
    Create and Configure JSON Data Source
    In This Topic

    This topic explains the steps involved in connecting a section report to a JSON data source at run time using code.

    This walkthrough is split up into the following activities:

    Note: This walkthrough uses the Employees demo data.

    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).
    4. Click the Add button to open a new section report in the designer.

    See Basic Concepts for information on adding different report layouts.

    To create a layout for the Section Report (SectionReport1)

    1. On the design surface, select the pageHeader section and in the Properties window, set the Height property to 0.63.
    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 controls onto the pageHeader section and in the Properties window, set the properties as follows. 

      Label1

      Property Name Property Value
      Text Employee Details
      Location 0, 0 in
      Size 4.5, 0.25 in
      Font Arial, 14pt, style=Bold
      Alignment Center
      BackColor WhiteSmoke

      Label2

      Property Name Property Value
      Text Name
      Location 0, 0.32 in
      Size 0.85, 0.2 in
      Font Arial, 12pt, style=Bold

      Label3

      Property Name Property Value
      Text Title
      Location 0.85, 0.32 in
      Size 1.65, 0.2 in
      Font Arial, 12pt, style=Bold

      Label4

      Property Name Property Value
      Text Mobile
      Location 2.5, 0.32 in
      Size 1.28, 0.2 in
      Font Arial, 12pt, style=Bold

      Label4

      Property Name Property Value
      Text Hire Date
      Location 3.78, 0.32 in
      Size 0.78, 0.2 in
      Font Arial, 12pt, style=Bold
    4. From the toolbox, drag the controls onto the detail section and in the Properties window, set the properties of each control as follows.

      TextBox1

      Property Name Property Value
      DataField FirstName
      Text txtName
      Location 0, 0.06 in
      Size 0.85, 0.2 in

      TextBox2

      Property Name Property Value
      DataField Title
      Text txtTitle
      Location 0.85, 0.06 in
      Size 1.65, 0.2 in

      TextBox3

      Property Name Property Value
      DataField HomePhone
      Text txtMobile
      Location 2.5, 0.06 in
      Size 1.28, 0.2 in

      TextBox4

      Property Name Property Value
      DataField HireDate
      Text txtHireDate
      Location 3.78, 0.06 in
      Size 0.78, 0.2 in
      OutputFormat MM/dd/yyyy

    To add a code to connect to a data source at run time

    1. Right-click the design surface of SectionReport1 and select View Code.
    2. Add the below code after the InitializeComponent() function:
      • Create a new GrapeCity JSONDataSource.
      • Specify the connection string for the JSON data source.
      • Specify a valid JSONPath expression.
      • Pass the new data source to the section report.

    To write the code in Visual Basic

    The following example shows what the code looks like.

    Visual Basic.NET code
    Copy Code
    Dim jsonDS As GrapeCity.ActiveReports.Data.JsonDataSource = New GrapeCity.ActiveReports.Data.JsonDataSource()
    jsonDS.ConnectionString = "jsondoc=https://demodata.grapecity.com/northwind/odata/v1/Employees"
    jsonDS.JsonPath = "$.value[*]"
    DataSource = jsonDS
    

    To write the code in C#

    The following example shows what the code looks like.

    C# code
    Copy Code
    GrapeCity.ActiveReports.Data.JsonDataSource jsonDS = new GrapeCity.ActiveReports.Data.JsonDataSource();
    jsonDS.ConnectionString = @"jsondoc=https://demodata.grapecity.com/northwind/odata/v1/Employees";
    jsonDS.JsonPath = "$.value[*]";
    DataSource = jsonDS;
    

    To view the report

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