Refresh report on a separate tab using JQuery.

[Braden]

     I have a page that has 5 separate tabs. The first tab is set to active so it will load first. The Telerik Report is on the 5th tab so it will not load automatically. It will only load automatically if it's the first tab. I've tested this by setting the tab with the report as the first tab and it will load just fine.

Previously we were using 2016 R3 version and using the command:

$("[data-command='telerik_ReportViewer_refresh']").first().click();

This never gave us issues. We recently upgraded to 2020 R1 and now this command will not work. Is there a way to refresh the page manually by JQuery?

 

 

[Neli]

Hi Braden,

We need to know which report viewer do you use. In addition,  does the component that is used for that tabs support lazy loading? A similar issue is described in Angular Report Viewer in Multiple Tabs KB article.

An option is to test to use our refreshReport() function.

Regards,
Neli
Progress Telerik

[Braden]

Hello Neli,

I am using the report viewer in an ASP.NET MVC 5 application. I believe it's the HTML 5 viewer.
https://www.telerik.com/products/reporting.aspx

The view is a Razor view with bootstrap. I've been researching lazy loading for a bit but I'm unable to find a solution.
When using the command 

$('a[data-command=telerik_ReportViewer_refresh]').first().click();


I can see in the dev tools the refresh command activate but the DOM does not update.

When I use the refresh report command in the documentation you supplied I get an error saying

Uncaught TypeError: Cannot read property 'refreshReport' of undefined

[Braden]

So amazingly I actually got it to work. I attached a listener on the tab and once the tab is shown it clicks the data-command refresh button.

<script>
       $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
           $('*[data-command="telerik_ReportViewer_refresh"]').first().click();
       });
</script>