ReportViewer Events Issue

[Stuart]

 

Hi,

I am experiencing an issue with the MVC version of the ReportViewer control when attempting to utilise Events RenderingBegin and RenderingEnd.

The goal is to addClass to $('status') called icon-pulse that flashes a cog icon on the screen while the report renders, and returns back to solid colour when rendering finishes by removing the class.

The report is triggered via Ajax button call to replace the VisionReportDiv on the page with the following view code:

<VisionReport.cshtml>

@model Company.Trims.Hub2.Models.ViewModels.VisionViewModel

<script src="@Url.Content("~/ReportViewer/js/kendo.subset.2015.3.930.min.js")"></script>
<script src="@Url.Content("~/ReportViewer/js/telerikReportViewer-9.2.15.1126.min.js")"></script>

@if (Model.VisionReportSource != null)
{ 
    @(Html.TelerikReporting().ReportViewer()
            .Id("reportViewer1")
            .ServiceUrl(Url.Content("~/api/reports/"))
            .ReportSource(Model.VisionReportSource)
            .ViewMode(ViewMode.PrintPreview)
            .ScaleMode(ScaleMode.FitPage)
            .Scale(1.0)
            .PersistSession(false)
            .PrintMode(PrintMode.AutoSelect)
                .ClientEvents(ce => ce
                    .RenderingBegin("RenderingBegins")
                    .RenderingEnd("RenderingEnds"))
    )
}
else
{
    @Html.Partial("Homepage")
}

<script>

    $(document).ready(function () {
        $('#reportViewer1').height($(window).height() - ($('#vision-title-bar').height() + 16));
    });

    $(window).resize(function () {
        $('#reportViewer1').height($(window).height() - ($('#vision-title-bar').height() + 16));
    });

    function RenderingBegins() {
        $('#status').addClass('icon-pulse');
    };

    function RenderingEnds() {
        $('#status').removeClass('icon-pulse');
    };

</script>

 

The Model.VisionReportSource is of type TypeReportSource that is loaded via a class library as follows:

Model.VisionReportSource = new TypeReportSource() { TypeName = typeof(MyReport).AssemblyQualifiedName };

 

If I comment out the ClientEvents section from the reportViewer1 declaration, repeat pressing the ajax button works without issue.  After adding the ClientEvents centre back in (as above) - then it runs for the first call, but subsequent calls fail with the message:

jquery-1.9.1.min.js:5 Uncaught RangeError: Maximum call stack size exceeded at Function.isPlainObject (jquery.min.js:3) at Function.b.extend.b.fn.extend (jquery.min.js:3) at Function.b.extend.b.fn.extend (jquery.min.js:3) at Function.b.extend.b.fn.extend (jquery.min.js:3) at Function.b.extend.b.fn.extend (jquery.min.js:3) at Function.b.extend.b.fn.extend (jquery.min.js:3) at Function.b.extend.b.fn.extend (jquery.min.js:3) at Function.b.extend.b.fn.extend (jquery.min.js:3) at Function.b.extend.b.fn.extend (jquery.min.js:3) at Function.b.extend.b.fn.extend (jquery.min.js:3)

and the reportviewer dissapears from the page...  I'm not understanding why subscribing to the two Rendering functions to add remove a Class to $('#status') is causing this issue???  Anyone else experienced this issue?  Or does anyone have a good example of how to use the ClientEvents - I've looked pretty much everywhere and can't find a decent example.

Thanks in advance.

 

[Stef]

Hi Stuart,

Please compare your settings to these of the attached demo project. events are working correctly and a sample image is displayed on top of the viewer until the rendering ends.

Note that jQuery is loaded only once on the page, and all Kendo UI files are of the same version (kendo.subset.2015.3.930.min.js is a subset of Kendo UI widgets of version 2015.3.930) - Important Settings.



Regards,
Stef
Progress Telerik

[Stuart]

Thank you for the example, I thought I was doing the definition for ClientEvents correctly...  the issue turned out to be the way I was including the JS lines each time the ReportPageDiv was refreshed. Moving the following lines:

<script src="@Url.Content("~/ReportViewer/js/kendo.subset.2015.3.930.min.js")"></script>
<script src="@Url.Content("~/ReportViewer/js/telerikReportViewer-9.2.15.1126.min.js")"></script>

to the Index paged resolved the Uncaught RangeError I was getting.

 

Thanks Steph.

[Stef]

Hello Stuart,

Thank you for this update.
in general, the files must be loaded before the viewer is created. you can use the browser's F12 Developer Tools - Network tab or Fiddler to check if the required CSS and JS files are loaded correctly n the page.

Regards,
Stef
Progress Telerik