SubReports - Dynamically Bind data

Posted by: twoods on 3 March 2021, 12:04 pm EST

  • Posted 3 March 2021, 12:04 pm EST

    I 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.
  • Replied 3 March 2021, 9:21 pm EST

    Hello, 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 EST

    Thanks. 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 EST

    Please 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.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels