Accessing reportDocument in MVC jsscripts

[Amit]

@(Html.TelerikReporting().ReportViewer()
     // Each report viewer must have an id - it will be used by the initialization script
     // to find the element and initialize the report viewer.
     .Id("reportViewer1")
     // The URL of the service which will serve reports.
     // The URL corresponds to the name of the controller class (ReportsController).
     // For more information on how to configure the service please check http://www.telerik.com/help/reporting/telerik-reporting-rest-conception.html.
     .ServiceUrl(Url.Content("~/api/reports"))
     // The URL for custom report viewer template. The template can be edited -
     // new functionalities can be added and unneeded ones can be removed.
     // For more information please check http://www.telerik.com/help/reporting/html5-report-viewer-templates.html.
     // .TemplateUrl(Url.Content("~/ReportViewer/templates/telerikReportViewerTemplate-11.0.17.406.html"))
     // Strongly typed ReportSource - TypeReportSource or UriReportSource.
     .ReportSource(new TypeReportSource() { TypeName = "WebApplication2.Report.Report1, WebApplication2, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" })
     // Specifies whether the viewer is in interactive or print preview mode.
     // PrintPreview - Displays the paginated report as if it is printed on paper. Interactivity is not enabled.
     // Interactive - Displays the report in its original width and height with no paging. Additionally interactivity is enabled.
     .ViewMode(ViewMode.Interactive)
     // Sets the scale mode of the viewer.
     // Three modes exist currently:
     // FitPage - The whole report will fit on the page (will zoom in or out), regardless of its width and height.
     // FitPageWidth - The report will be zoomed in or out so that the width of the screen and the width of the report match.
     // Specific - Uses the scale to zoom in and out the report.
     .ScaleMode(ScaleMode.Specific)
     // Zoom in and out the report using the scale
     // 1.0 is equal to 100%, i.e. the original size of the report
     .Scale(1.0)
     // Sets whether the viewer’s client session to be persisted between the page’s refreshes(ex. postback).
     // The session is stored in the browser’s sessionStorage and is available for the duration of the page session.
     .PersistSession(false)
     // Sets the print mode of the viewer.
     .PrintMode(PrintMode.AutoSelect)
     .ClientEvents(
             events => events
             .PrintBegin("PrintRepo")
                                     )
 )

 

 

 

using above code to host report in .cshtml 

I need to access client side api in javascript. 

var viewer = <%=ReportViewer1.ClientID%> // Not able to access reportViewer object in .cshtml

  <script type="text/javascript">
        function PrintRepo() {
           PrintDocument(); //if I get the access of reportViewer, then I can use PrintDocument() function
        }
    </script>

Any help is appreciated. Thanks 

 

[Katia]

Hi Amit,

To access the viewer's object you can use the following code:

var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");

To print the report, you can use viewer's print command:

$('#printButton').click(function () {
    var rv = $("#reportViewer1").data("telerik_ReportViewer");
    rv.commands.print.exec();
});

Another approach is to add HTML element to the page that has the viewer's data attributes responsible for printing:

<button id="printButton" data-command="telerik_ReportViewer_print" data-target-report-viewer="#reportViewer1">Print report</button>

Hope this will help.


Regards,
Katia
Progress Telerik