Telerik Product and Version
|
Telerik Reporting 2018 R2 |
|
Supported Browsers and Platforms
|
|
|
Components/Widgets used (JS frameworks, etc.)
|
|
PROJECT DESCRIPTION
(I first posted this as a regular thread under Reporting and after a few inquiries I decided maybe it needed to be in the code library. Original post is here: https://www.telerik.com/forums/passing-url-parameters-to-your-report---how-to#XTddIZ6VLEGagTmuJZaZ_A ) I looked for a long time for this information. I watched YouTube videos, went to blogs, and contacted Telerik support. I decided when I figured this out I was going to post the code so that someone else would not have to struggle with figuring this out like I did. Support helped and pointed me in the right direction to put this together but no easy example to go by. Below is the code for the HTML5 Report Viewer that I use and seems to work exactly like I wanted. It is javascript that parses the URL string and then is fed to the parameters of your report. The only part of this that you should have to change is the the section that is called "reportSource:" the parameters section. In the example below change the first part "TransMonth: " to the name of the parameter you used in your report and change the name at the end to what your URL parameter is called " getParameterByName('TransMonth') " Mine were named the same for simplicity. See the entire code below. Also some of the js and css files have custom paths in the example below. Adjust yours accordingly. I'm far from an expert at this but I know it took me a while to get this working and I thought if I could save someone else this headache I would. Also there are some attached images of setting your parameters on your datasource and your report. They must all be set for this to work.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form My Report</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="ReportViewer/js/jquery-1.9.1.min.js"></script>
<link href="ReportViewer/CSS/kendo.common.min.css" rel="stylesheet" />
<link href="ReportViewer/CSS/kendo.blueopal.min.custom.css" rel="stylesheet" />
<!--kendo.web.min.js or kendo.all.min.js can be used as well instead of the following custom Kendo UI-->
<script src="ReportViewer/js/telerikReportViewer.kendo-12.0.18.416.min.js"></script>
<script src="ReportViewer/js/telerikReportViewer-12.0.18.416.min.js"></script>
<style>
#reportViewer1 {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
overflow: hidden;
font-family: Verdana, Arial;
}
</style>
</head>
<body>
<div id="reportViewer1">
loading...
</div>
<script type="text/javascript">
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
$(document).ready(function () {
$("#reportViewer1")
.telerik_ReportViewer({
// 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: "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: 'ReportViewer/templates/telerikReportViewerTemplate_custom.html',
//ReportSource - report description
reportSource: {
// The report can be set to a report file name (trdx report definition)
// or CLR type name (report class definition).
report: "ReportApplication.FormMyReport, ReportApplication, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null", parameters: {
TransMonth: getParameterByName('TransMonth'),
TransYear: getParameterByName('TransYear'),
PrevMonth: getParameterByName('PrevMonth'),
ItemName: getParameterByName('ItemName')
},
// Specifies whether the viewer is in interactive or print preview mode.
// PRINT_PREVIEW - 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 without paging. Additionally interactivity is enabled.
viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
// Sets the scale mode of the viewer.
// Three modes exist currently:
// FIT_PAGE - The whole report will fit on the page (will zoom in or out), regardless of its width and height.
// FIT_PAGE_WIDTH - 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: telerikReportViewer.ScaleModes.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,
enableAccessibility: false,
ready: function () {
//this.refreshReport();
},
}
});
});
</script>
</body>
</html>