There are special cases, such as offline environments, where the data is entered locally by the user and then reassembled locally to form new data available in the presentation report, and these special cases result in the need to modify the report data source at run time. The ActiveReportsJS report itself has a JSON structure, so it is a good idea to modify the data source after reading the JSON structure of the report. ActiveReportsJS modify the data source provides the runtime instance demo.grapecity.com.cn/activerepor… However, in this case, we have another problem. When the report is drilled to the sub-report, the sub-report also needs to modify the data source at runtime, so we cannot modify the data source of the sub-report by reading the JSON string.

In this case, you can combine the Resource locator provided by ActiveReportsJS with embedded data sets to address this requirement. ResourceLocator interface: Implements resource redirection, such as subreport paths, image subsources, data source resources, and drill down subreports.

  1. Create the master sub-report, and set the embedded data source and data set, complete the report design
  2. Define functions that read the JSON string of the master and child report and modify the data source
  const mainReport = await fetch(
        '/assets/drill-mainreport.rdlx-json'
      ).then((resJson) => resJson.json());
      const mainData = await fetch(
        'https://demodata.grapecity.com/northwind/api/v1/Categories'
      ).then((resJson) => resJson.json());
      mainReport.DataSources[0].ConnectionProperties.ConnectString =
        'jsondata=' + JSON.stringify(mainData);

      const subReport = await fetch(
        '/assets/drill-subreport.rdlx-json'
      ).then((resJson) => resJson.json());
      const subData = await fetch(
        'https://demodata.grapecity.com/northwind/api/v1/Products'
      ).then((resJson) => resJson.json());
      subReport.DataSources[0].ConnectionProperties.ConnectString =
        'jsondata=' + JSON.stringify(subData);

Copy the code
  1. Define resourceLocator. This interface contains two methods getResource and getResourceId

Specify the ReportViewer.open method in getResource

const resourceLocator = { getResource: function (name) { if (name === 'productList.rdlx-json') return subReport; }}; };Copy the code
  1. Specifies that the main report is opened and the ResourceeLocator API is invoked
this.reportViewer.open(mainReport, { ResourceLocator: resourceLocator });
Copy the code