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

ReportViewer Events Issue

3 Answers 72 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Stuart
Top achievements
Rank 1
Stuart asked on 23 Jun 2017, 03:49 PM

 

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.

 

3 Answers, 1 is accepted

Sort by
0
Stef
Telerik team
answered on 26 Jun 2017, 01:12 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Accepted
Stuart
Top achievements
Rank 1
answered on 27 Jun 2017, 09:18 AM

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.

0
Stef
Telerik team
answered on 27 Jun 2017, 10:04 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Stuart
Top achievements
Rank 1
Answers by
Stef
Telerik team
Stuart
Top achievements
Rank 1
Share this question
or