This is a migrated thread and some comments may be shown as answers.

Questions for HTML5 Report Viewer in React

2 Answers 101 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
SHING SHUN
Top achievements
Rank 1
Iron
SHING SHUN asked on 10 Feb 2021, 09:44 AM

I can load the report viewer in react following this guide:

https://docs.telerik.com/reporting/knowledge-base/how-to-use-html5-viewer-in-react-js



But when I add react route, it failed when there is any input parameter.

<Route path="/test" component={ReportViewerFunction} /> // success

<Route path="/test2/:name" component={ReportViewerFunction} /> //show TypeError: window.jQuery(...).telerik_ReportViewer is not a function



And then I found this document, says that:

Such error can occur if:
jQuery is not loaded;
jQuery is loaded more than once and with different version;
jQuery is loaded at later stage in the page life cycle.

https://docs.telerik.com/reporting/knowledge-base/getting-telerik-reportviewer-is-not-a-function-console-error



I do not know how to fix this problem. Is there a better way to implement the report viewer in React?

 

Also I would like to know how to direct print the report, instead of every time preview the report before printing.

2 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 11 Feb 2021, 02:48 PM

Hello Shing Shun,

Regarding the problem with the telerikReportViewer function, I was able to reproduce the issue. It seems the problem was related to how the path to the telerikReportViewer-15.0.21.120.js file was set up. If yours is set up the following way:

 <script src="./assets/telerikReportViewer-15.0.21.120.min.js"></script>

When you go to the nested route, the request for the file above will look something like the following:

"http://localhost:3000/test2/assets/telerikReportViewer-15.0.21.120.min.jsand the request for the file will fail. That can be solved by using a relative path:

 <script src="/assets/telerikReportViewer-15.0.21.120.min.js"></script>

 Regarding the printing of the report, the React Report Viewer is based on the HTML5 Report Viewer and as such it has access to its commands. This means that we can use the print command to trigger the report printing. And if you do not want to have the report viewer appear, you can simply set its display property to none in the CSS. The following code is an implementation example of triggering the printing on a button click:

const exportReport = () => {
    var reportViewer = window.jQuery("#report").data("telerik_ReportViewer");

    reportViewer.commands.print.exec();
  }
<button onClick={exportReport}>Printer</button>

I hope this information will help you in achieving the desired results, please let me know if you have any other questions.

Regards,
Dimitar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
SHING SHUN
Top achievements
Rank 1
Iron
answered on 13 Feb 2021, 03:27 PM

It works like a charm.

Thanks for your help.

Tags
General Discussions
Asked by
SHING SHUN
Top achievements
Rank 1
Iron
Answers by
Dimitar
Telerik team
SHING SHUN
Top achievements
Rank 1
Iron
Share this question
or