How to add multiple tables dynamically based on the data source

Environment

Product

Progress® Telerik® Reporting

Description

The requirement is to create Tables dynamically based on the incoming data. Each table may have different columns in terms of count and names.

Solution

Let's consider the following JSON data attached as DataSource to the Report:

[
    {
        "Name": "It",
        "Data": [
            {
                "ColumnName": "ColItId",
                "Values": [
                    45,
                    46
                ]
            }
        ]
    },
    {
        "Name": "Part",
        "Data": [
            {
                "ColumnName": "Sales Order",
                "Values": [
                    171165,
                    171166
                ]
            },
            {
                "ColumnName": "Order No",
                "Values": [
                    227654,
                    227655
                ]
            }
        ]
    }
]

To generate a separate table for each item of the root array object we can add a separate Report Group grouped by the Name property of these objects. The title for the particular table is displayed in the corresponding Report Group Header section.

The Data property represents the columns and the values for each individual table. For the purpose it gets set with Bindings as a data source for a dedicated Crosstab item. Each column has ColumnName (a String representing the column name) and Values (an Array with the actual row data). The former is used as Column Grouping property for the Crosstab, which results in generating the necessary number of columns with the desired names.

In the detail section of the Crosstab, there is a List item bound to the Values property of the Crosstab (its parent) data source with Bindings. The List contains a single TextBox, which value is set to '=Fields.Item' that will display the content of its data source (the array with the actual row data) in the detail section of the List.

Check the reprot definition and the screenshot that shed more light on the approach.