Posted 3 March 2021, 12:04 pm ESTI have a report with two sub reports and we are using VueJS. We are dynamically loading the data for the main report (passing Json result set returned from API call) but how do we dynamically provide the data for the sub-reports from the VueJS code? In other words, there are 3 API calls involved to retrieve all the necessary data for the report. The main report passes in parameters to the sub-report which we are expecting at that point for the sub-report data to be filtered to show the correct values.
SubReports - Dynamically Bind data
Posted by: twoods on 3 March 2021, 12:04 pm EST
Replied 3 March 2021, 9:21 pm ESTHello, Thomas,
In that scenario, you could use a combination of 2 features
1) Load the data at runtime for subreports exactly like it's done for the main report.
2) Use the resource locator feature to retrieve the subreport's content when the main report requests it.
I don't have an example for Vue.js right now, but I will share it with you by the end of the week.
Replied 4 March 2021, 4:29 am ESTThanks. Definitely need some VueJS code samples as I don't see any documentation on resource locator feature.
Marked as Answer
Replied 5 March 2021, 12:51 am ESTPlease review the sample at https://codesandbox.io/s/vue-subreport-dynamic-data-yz4zv?file=/src/App.vue
The code loads the main report and subreport definitions and data. It then defines the method of resolving the subreport via resource locator that is passed to the 2nd argument of the viewer.open method https://www.grapecity.com/activereportsjs/api/classes/reportviewer.viewer.html#open
Let me know if you have any questions regarding this feature. We are going to document it properly soon.