I am trying to display a report from Telerik Report Server in my Asp.Net MVC application via the HTML5 ReportViewer.
I am using Stand-alone Report designer and creating parameters which are set to visible. The Parameter area is visible when i view on the Report Server. But when i view the report via HTML5 ReportViewer the parameter area is hidden. I have tried to alter CSS styling but no luck. It looks like the parameters do not exist in the ReportViewer page.
Below is my jquery calling the ReportViewer
<div id="reportViewer1" class="k-widget" style="height:100em;">
loading...
</div>
<script type="text/javascript">
$(document).ready(function () {
debugger;
var URL = '@System.Configuration.ConfigurationManager.AppSettings["ReportServerUrl"]';
var param = @Html.Raw(Model.ReportParameters);
var rptStr = '@Model.ReportCategory' + '/' + '@Model.ReportName';
$("#reportViewer1").telerik_ReportViewer({
reportServer: {
url: URL,
username: null,
password: null
},
reportSource: {
// The report value should contain the Category and ReportName in the following format
// {Category/ReportName}
report:rptStr,
parameters:param
},
parametersAreaVisible: true,
printMode: telerikReportViewer.PrintModes.FORCE_PDF_FILE,
});
})
</script>
Also attached are the my designer view, HTML5 ReportViewer result and ReportServer View. Any pointers towards this would be helpful.