JavaScript embedded report viewer ( Bold Reports) - cannot initialise

[John Smith]

Hello, 

I am trying to integrate the report viewer platform (Bold Reports) but it is failing due to a strange error. 

ej.web.all.min.js:10 Uncaught TypeError: Cannot set property '_zoomLevel' of undefined at Object._zoomValChange (ej.web.all.min.js:10)

I have followed the Getting Started docs and added the script and CSS files listed there:

https://help.boldreports.com/embedded-reporting/javascript-reporting/report-viewer/display-ssrs-rdl-report-in-javascript-application/

The component is initialised as follows:

$("#viewer").boldReportViewer();

I have also tried the following which is what I will need in the final deployment

$("#viewer").boldReportViewer({
  reportServiceUrl: reports.serviceUrl,
  reportServerUrl: reports.serverUrl,
  reportPath: currentReport.path,
  processingMode: "remote",
  toolbarSettings: { showToolbar: false }
  ajaxBeforeLoad: function(event) {
    event.headers.push({
      Key: "Authorization",
      Value: reports.accessToken
    });
  }
});

In both cases I get the error above. In the second case, where I pass in the report service URLs, no API is call is made to the report service. It seems the error related to __zoomLevel is blocking further script execution. The code was working with an older version of .NET report service and the JavaScript viewer. 

Can you advise what is wrong?

Thanks

 

[Muthuramana Sankaranarayanan]

Hi John, 

Thanks for contacting Bold Reports Support. 

We checked this issue. We already have faced this issue in a scenario where the Bold Report Viewer component tries to initialize twice for the same element at two different places, that is when the report viewer is initialized twice with same id as like below, 

$("#viewer").boldReportViewer(); 

… 

… 

… 

$("#viewer").boldReportViewer(); 

We suggest you to check your application if the Bold Report Viewer component is initialized twice in your application. If you still face the issue then could you please share with us an issue reproducible sample with us as it will be helpful for us to provide you a solution with this. 

 

Regards, 

Muthu Ramana S 

[John Smith]

Hi Muthu, 

I can confirm that the report viewer is only being initialised once. Here is my complete code (I am using React JS)

export const ReportViewer = (props: Props) => {
  const { url, reports, ...rest } = props;
  const loaded = useRef(false);

  const handleLoad = (ref: HTMLElement) => {
    if (ref) {
      //Only initialise once
      if (loaded.current) {
        return;
      }
      loaded.current = true;

      console.log("Init") //logged once only

      setTimeout(() => {
        $("#viewer").boldReportViewer();
      }, 2000); //Required otherwise _zoomLevel error is logged instantly and nothing is rendered
    }
  };
  return (
    <Column {...rest}>
      <Column id={"viewer"} fillParent onRef={handleLoad} />
    Column>
  );
};

I still get the error regarding _zoomLevel even when the report viewer is initialised like this. I also found that without a delay nothing is shown and I only see the _zoomLevel error in the console. After adding a delay I see the following

but this UI is unresponsive/unusable. If I also specify a report path like so

$("#viewer").boldReportViewer({
  reportServiceUrl: reports.serviceUrl,
  reportServerUrl: reports.serverUrl,
  reportPath: currentReport.path,
  processingMode: "remote",
  toolbarSettings: { showToolbar: false },
  ajaxBeforeLoad: function(event) {
    event.headers.push({
      Key: "Authorization",
      Value: reports.accessToken
    });
  }
});

then I also see the toolbar UI above but no request is made to the report server. 

For completeness, I am using the following in index.html

<link rel='nofollow' href="https://cdn.boldreports.com/2.4.10/content/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript">script>


<script src="https://cdn.boldreports.com/2.4.10/scripts/common/ej2-base.min.js">script>
<script src="https://cdn.boldreports.com/2.4.10/scripts/common/ej2-data.min.js">script>
<script src="https://cdn.boldreports.com/2.4.10/scripts/common/ej2-pdf-export.min.js">script>
<script src="https://cdn.boldreports.com/2.4.10/scripts/common/ej2-svg-base.min.js">script>



<script src="https://cdn.boldreports.com/2.4.10/scripts/common/bold.reports.common.min.js">script>
<script src="https://cdn.boldreports.com/2.4.10/scripts/common/bold.reports.widgets.min.js">script>

<script src="https://cdn.boldreports.com/2.4.10/scripts/bold.report-viewer.min.js">script>

I have also tried including all of the links from your documentation but I still get the same error. 

Any idea what is wrong?

Thank you

[Muthuramana Sankaranarayanan]

Hi John, 

We checked the reported issue but we were not able to find the cause of the issue. Hence could you please share with us a simple sample with issue reproduced as it will be helpful for us to assist you with this issue. 

 

Regards, 

Muthu Ramana S 

[John Smith]

Hi, 

It seems to work ok in isolation so the problem must be elsewhere in my app. Possible a difference in jquery version used. Here's a simple sandbox in case it is useful to anyone else facing this error.

https://codesandbox.io/s/strange-ramanujan-dtknx?file=/src/App.js

I will close this down - thanks for your help. 

[Muthuramana Sankaranarayanan]

Hi John, 

We are glad to hear that the reported issue is resolved at your end. Thanks for sharing the issue cause details with us. We have already logged the documentation for this and we will progress it and publish in future along with your provided details. 

 

Regards, 

Muthu Ramana S