Exploring Nested Data Regions in JavaScript Reports

In this blog, we will explore the concept of using Nested Data Regions. Nesting, as a concept, is useful for repeating structures in a report and for properly using the several data regions that ActiveReports offers. Specifically in this blog, we will focus on ActiveReportsJS (ARJS).

Ready to Use JavaScript Reporting Tools? Download ActiveReportsJS today!

What is a Data Region?

 A data region is a control on your report that you can add data to, whose contents change depending on the data input, is more complex in structure, and can be used to show more than one row of data at a time.

Growth vs. Static Data Regions

ARJS has several different data regions. There are two basic groupings of them: Growth and Static. Growth data regions can grow with the data and typically have a row or grouping for each row in the data table that drives them. They include: Tables, Tablix (commonly known as Matrix), Banded Lists, and Lists, all of which are controls that allow nesting of other data regions within them. Static data regions do not grow with the data you input and remain consistent in size. Typically, they are chart and image style controls, including Charts, Sparklines, and Bullet charts. But they can only be nested, along with all Data Visualizers.

Understanding the Master-Detail Concept

The general concept of nesting is that you have a repeating structure of the main data region, within which you want to show more detail for the main data region. This layout is commonly referred to as Master-Detail.

Below is a sample of nesting that we will be making as a walk-through of the concept. Please note that there is a List and a Table inside it. This is the nesting structure we will focus on in this blog, though you can combine any of the growth-style data regions as the primary or nested controls.

Now that we have reviewed the concept, let us put it to use. To start, there needs to be data to produce a report. To use a common sample database as an example for this blog, Northwind and the Customers/Orders tables from it will be used for this walkthrough.

In the example, we have two main controlling data values that, in many cases, would relate to two separate datasets. In this case, they are CustomerID and OrderID, each of which will serve as the Primary Key in its respective dataset. In this blog, the Customer table will be the master and control the Order table via the Customer ID as the foreign key in the Orders table.

Choosing the Report Type

What type should be used? In this case, the order ledger is not something that needs to be formatted as much as an invoice does to fit a certain shape. So the Continuous style of report will work best (which is the default report type for ARJS). Once the report is created, we then need to connect the database to the report via a data source and datasets (one for each table).

Building the Report Structure

In this sample, we will nest a table within a list, but there are several options for nesting data regions. To add a list, double-click in the toolbox or drag and drop it. [In the case of using a table as the master, in some cases, there needs to be some offset or a larger cell to contain the nested data region. Select multiple cells and use the "Merge" option.] Once you add the detailed data region and nest by dragging into the master, it is time to hook into the data we added.

When it comes to the data on the report, we can look at the use case mentioned earlier, customers, and the orders they have made. Some may have one order, but most will have many. As a result, the Customer is the outer table, and Orders is the nested table. Start to drag some values from Customer into the list. This will bind the list control to the Customer dataset, and do likewise for the Orders table till you have the rough structure you want.

Now, if the report is run in this state, it will show every order in the database for each customer.

What needs to be done to resolve that is the use of Filters. Filters will allow values from one data region to interact with those in the other. In this case, Orders have CustomerIDs attached to them, so we will use that foreign key as the filter control between the tables, as there is that relationship. The filter is set on the Nested table, since it will relate the incoming ID to its own data.

To do this, click the nested data region, select the filters, and add a filter. In the filter, please select the ID shared between the datasets; in our case, CustomerID. When selected on the left side, that is from the Orders Dataset. The right side will have a 0. Add an expression to it, then go to Data Sets, and select the same value from CustomerTable. This will hook up the filtering so that when the List has X customers, the Table will show X customers’ orders.

If set up correctly, the report will now show only the orders made by a specific customer. Thus making this a functioning nested data region with a master-detail setup.

By implementing nested data regions in ActiveReportsJS, you can transform flat datasets into structured, master-detail reports that are easier to read and analyze. With the right combination of data binding, nesting, and filtering, you can build scalable, dynamic JavaScript reports that adapt to real-world data relationships and deliver more meaningful insights to your users.

Next Steps

Continue exploring ActiveReportsJS data regions and advanced nesting scenarios to build more dynamic, interactive JavaScript reports and dashboards.

• Overview page for Data Regions: Data Regions

• Demo of a Master-Detail report: Master-detail table | ActiveReportsJS Demos | Javascript Reporting Solution for Web Applications

  Ready to Use JavaScript Reporting Tools? Download ActiveReportsJS today!