Working with Microsoft ReportViewer

ReportViewer control is basically used to show reports on portal backed up by SQL Server Reporting Service. More information on what is ReportViewer is here and how to download and map it to Visual Studio is here.

My main reason of this blog is to help mates to overcome same issue that I faced when I dealt with this control. Thought there were many reason behind the issues that I faced, few to mention are as below:

1. Very poor usage documentation on MSDN site. Just mentioning methods and properties won’t serve a purpose when a person is stuck. An example or two shall definitely help.
2. Most the blogs or portals just show how to use the control in Visual Studio and get to start working, but hardly one or two shows properties and events that make up the rendering.

Issues that I faced:

Print Icon not appearing on ReportViewer control when report loading takes a bit longer time.

The print icon shall not appear in browser other than IE, and this is by design and MS have only consider it for IE.

We had basically three types of reports in our application.

1. One that’s light weight, means, that comes up very fast.
2. One that takes time to load as data is large.
3. A report have child reports there in.

• For report type one, everything is good and we go home by default code base that comes in with MVCReportViewer.js file.
• For report type 2, issue starts popping up as report takes longer to load and the JavaScript that loads up print icon not doing its job as main control takes time to load.
• For report type 3, the parent report takes time where in point 2 comes in and hence child report don’t get the print icon either (really don’t know what happened here).

Fix applied:

In MVCRepportViewer.aspx file.

1. AsyncRendering="false"

In MVCReportViewer.js file

1. Check if the browser is non IE
2. Below code is used when the reports which renders comparatively faster as we don’t get Load event for that report but still we need to show Print icon.

var element = document.getElementById ('PrintButton');

            if (typeof (element) == 'undefined' || element == null) {

                var buttonHtml = $('#non-ie-print-button').html();

                $('#ReportViewer_ctl05 > div').append(buttonHtml);

                $('#PrintButton').click(function (e) {

                    e.preventDefault();

                    printReport();

                });

                $('#mvcreportviewer-btn-print').hover(function () {

                    $(this).css('cursor', 'pointer').css('border', '1px solid rgb(51, 102, 153)').css('background-color', 'rgb(221, 238, 247)');

                }, function () {

                    $(this).css('cursor', 'pointer').css('border', '1px solid transparent').css('background-color', 'transparent');

                });

            }

3. Handle Load event as below

Sys.Application.add_load (function () {

                Var reportViewerID = $find ("ReportViewer");

                reportViewerID.add_propertyChanged (trackReportViewerBehaviorInNonIEBrowser);

});

4.In the function trackReportViewerBehaviorInNonIEBrowser(sender, e)

1. Get ReportViewer control context
2. Check if control is still loading by if (e.get_propertyName() === "isLoading")

1. If control is still loading, do nothing

2. If control completes loading then

1. Get controlid of PrintButton from DOM by using var element = document.getElementById('PrintButton');

2. If we get the control then do below step

if (typeof (element) == 'undefined' || element == null) {

                        var buttonHtml = $('#non-ie-print-button').html();

                        $('#ReportViewer_ctl05 > div').append(buttonHtml);

                        $('#PrintButton').click(function (e) {

                            e.preventDefault();

                            printReport();

                        });

                        $('#mvcreportviewer-btn-print').hover(function () {

                            $(this).css('cursor', 'pointer').css('border', '1px solid rgb(51, 102, 153)').css('background-color', 'rgb(221, 238, 247)');

                        }, function () {

                            $(this).css('cursor', 'pointer').css('border', '1px solid transparent').css('background-color', 'transparent');

                        });

                    }

About Author:

Hardik Dave is a consultant in Systems Plus Pvt. Ltd. Within Systems Plus, he actively contributes to the areas of Technology and Information Security. He can be contacted at: Hardik.D@spluspl.com