HTML5 Report Viewer - Toolbar Buttons Not Functioning

[KobusVisagie]

Hello Telerik,

We've managed to setup the HTML5 report viewer, it's passing parameters, reports are loading and returning data. I've attached 2 screenshots that show the network sources all load correctly and that the export menu is populated. Everything works except the Toolbar Buttons. Any idea what it might be?

Thanks,
Greg

[Stef]

Hi Greg,

Below is quote from my reply in your support ticket #874680 on the same question:
"The provided information is not enough to determine what is causing the problem.


The best troubleshooting approach in such cases is to use the browser's console or Fiddler and check the failed requests. Thus you can see if relative paths (for JS/CSS/HTML files and the viewer's serviceUrl) in the application are resolved correctly. You can use Url.Content("~") method to get the proper base for the relative paths.
Note you have to load only one version of jQuery and Telerik Kendo Javascript files on the page, which satisfy the minimum requirements for the HTML5 Report Viewer. All Telerik Kendo UI files must be of the same version.

You can also test deploying the local demos installed by default under C:\Program Files (x86)\Telerik\Reporting Q3 2014\Examples\CSharp."


If you need further help, please use the above mentioned support ticket to send us more details which toobar's buttons are not working, if there is an error after clicking on a button. A demo project will be required to check your settings.

Regards,
Stef
Telerik

 

 

[Luke]

The problem is in the report viewer code. It assumes the viewer is always initialized with a selector like 

$('.reportcontainer').telerik_ReportViewer({</p><p>
});

If you initialize it using a dom node then you will experience this problem because the code attempts to bind these command buttons using a nonexistent selector.

 

$(document.getElementById('reportContainer')).telerik_ReportViewer({});

From the source code:

jQuery.fn[pluginName] = function(options) {
 //This is not necessary since the actual dom node is already being passed in. Give how it is being used, it will also cause conflicts if you have multiple charts on one page.
options.selector = this.selector;
    return this.each(function() {
        if (!$.data(this, pluginName)) {
            $.data(this, pluginName, new ReportViewer(this, options));
        }
    });
};

 

[Stef]

Hi Luke,

The viewer's container is a DIV element with the id of the viewer. This element must be loaded before the viewer object is created.

The issue in the case is related to the problem with the deprecated this.selector discussed in the  ReportViewer Html5 Toolbar does not work after upgrade to v9 forum thread (I notice you have already seen it, so this is just FYI for anyone concerned).

Regards,
Stef
Telerik