1. We have an angular application which is going to load .trdp report from report API hosted inside the web app.
2. These .trdp file have many controls which needs dynamic and custom binding.
3. Data should be pulled from OData API
4. Data pulled from point 3 should be conditionally bind to the different controls in .trdp file in report rest API.
We are facing the following challenges.
1. How to load .trdp file in a programmatic way at the reporting API.
2. How to bind the data to the controls after loading programmatic instance of .trdp report.
3. How to bind the loaded report object in html way in report viewer in Angular.
There are ways to do same in .NET desktop application but how to do same in Web, please advise.
1 Answer, 1 is accepted
Hello Tarun,
I noticed the same questions asked in a support ticket. I will copy my replies here so that other users may find them:
1. How to load .trdp file in a programmatic way at the reporting API.
If I understood correctly, you would like to load a TRDP report definition in the code to change it. If so, you need to use a Custom ReportSource Resolver, where you may unpackage the report, modify it, and return it to the Reporting engine wrapped in an InstanceReportSource. Here are links to other resources that would help you with the implementation:
- Implementing Custom ReportSource and ReportDocument Resolvers To Fully Control the Report in Run Time
- Access Report Items Programmatically - Access items from calling application
- Class ReportPackager
2. How to bind the data to the controls after loading programmatic instance of .trdp report.
You may set the DataSource property of the corresponding data item. If this is not the Report itself, after unpackaging the latter you may find the item as explained in the above-referenced article section "Access items from calling application" and set the property value. Note that you may use a DataSource Component or any of the supported types - see Supported object types. See also how you may do this in code:
- Binding ObjectDataSource Component to a BusinessObject
- Binding ObjectDataSource Component to a DataSet
3. How to bind the loaded report object in html way in report viewer in Angular.
You don't need anything special on the client side. You may use it as with a normal TRDP report that doesn't get changed in the code. All the modifications are made server-side, and the rendered modified report is returned to the client/viewer. From the Angular Viewer, you should only pass a correct report identifier and the parameter values to render it with. This is done with the client-side reportSource - see the Options of the Viewer.
If I understood correctly, you would like to modify the appearance of your report items dynamically, based on the incoming data or other Global Objects.
I confirm that you may do the above using Bindings and Conditional Formatting in the Report Items. Most of them expose both properties, where you may use Expressions to set other property values.
Regarding the Angular client, let me introduce our brand new Native Angular Report Viewer built with Kendo UI for Angular components. We started distributing it with Telerik Reporting R3 2023. It utilizes an identical service as the older Angular viewer based on the jQuery components. That said, when you prepare the required Reporting REST Service, you will be able to use it with both viewers without any changes.
Regards,
Todor
Progress Telerik