Issue with viewer.js when report is generated on the backend and passed to frontend as json
Posted: Tue Oct 12, 2021 1:16 pm
Greetings. We're developing an application where a report is generated on the backend, and then sent to the frontand as a json string.
Everything works perfectly, except for how dynamic images are handled:
in the report there's a grid, where each row shows some data. For each row there's an image (we tried both passing the image as byte array or base64 string, but the following problem is still happening):
Instead of showing the right image for each row, all the rows display the image bound to the last row
the version we're using is: "stimulsoft-reports-js": "2020.1.1" (the last one for which we have a valid license)
We've attached a sample which you can easily try to replicate the issue, following these steps:
1) unzip the file and run "npm install"
2) launch it with ng serve, then browse at the address localhost:4200
3) you will see a report already rendered, with a grid containing 2 rows, which shows the same image (last column on the right)
4) you can see the code which has been used to pass the json to the report in file src -> app -> routes -> home -> print-difetti-sessione -> print-difetti-sessione.component.ts
5) you can see the json which is passed to the report at path src -> asssets -> json -> report_data.json (in the real application, as stated, this is provided by the backend). You can also verify that the images included in such file for the two rows are indeed DIFFERENT, even if in the report it looks like they are the same (you can compare row 1129 with row 1563 of the json)
We'll wait for your feedback, thanks!
Everything works perfectly, except for how dynamic images are handled:
in the report there's a grid, where each row shows some data. For each row there's an image (we tried both passing the image as byte array or base64 string, but the following problem is still happening):
Instead of showing the right image for each row, all the rows display the image bound to the last row
the version we're using is: "stimulsoft-reports-js": "2020.1.1" (the last one for which we have a valid license)
We've attached a sample which you can easily try to replicate the issue, following these steps:
1) unzip the file and run "npm install"
2) launch it with ng serve, then browse at the address localhost:4200
3) you will see a report already rendered, with a grid containing 2 rows, which shows the same image (last column on the right)
4) you can see the code which has been used to pass the json to the report in file src -> app -> routes -> home -> print-difetti-sessione -> print-difetti-sessione.component.ts
5) you can see the json which is passed to the report at path src -> asssets -> json -> report_data.json (in the real application, as stated, this is provided by the backend). You can also verify that the images included in such file for the two rows are indeed DIFFERENT, even if in the report it looks like they are the same (you can compare row 1129 with row 1563 of the json)
We'll wait for your feedback, thanks!