Back in 2017 version of Telerik Reporting, I could create a .NET Web API with Telerik Reports where the report viewer is a series of js files that would realize any report I gave it.
In the MVC Model I'd have code (C#) like
public static Telerik.Reporting.TypeReportSource [Report Source Name]()
{
Telerik.Reporting.TypeReportSource oReportSrc = null;
try
{
oReportSrc = new Telerik.Reporting.TypeReportSource();
oReportSrc.TypeName = typeof(MyReports.[Report Name]).AssemblyQualifiedName;
}
catch (SystemException ex)
{
}
return oReportSrc;
}
In the MVC View (CSHTML) I would have code like
@section scripts
{
<script src="ReportViewer/js/telerikReportViewer-[version].js"></script>
<!--kendo.all.min.js can be used as well instead of kendo.web.min.js and kendo.mobile.min.js-->
<script src="~/Scripts/kendo/[version]/kendo.web.min.js"></script>
}
@{
var typeReportSource = [My App].Models.[Report Source Name] ();
typeReportSource.Parameters.Add(new Telerik.Reporting.Parameter("[variable name]", ViewBag..[variable name]));
}
@(Html.TelerikReporting().ReportViewer()
.Id("reportViewer1")
.ServiceUrl("/api/reports/")
.ReportSource(typeReportSource)
.ViewMode(ViewModes.INTERACTIVE)
.ScaleMode(ScaleModes.SPECIFIC)
.Scale(1.0)
//.PersistSession(false)
)
I'm a bit stymied by all the current examples and logic of Telerik Reporting where it all seems generic (not specific to the actual report) up until the report viewer is HTML containing javascript with hardcoded values specific to a single report (such as report: "Barcodes Report.trdp")
This is tedious and makes the product much less desirable because it (a) forces the developer to know/work with JavaScript and (b) adds an additional layer of complexity and development to every report.
I see the older style js in the install
Program Files (x86)\Progress\Telerik Reporting R2 2022\Html5\ReportViewer\js
Are the any demo/documentation on how to use what i would call the "older style" - for a Web API - where the report and properties are not hardcoded?
1 Answer, 1 is accepted
Rank 1
Iron
I stumbled upon sample code from a user that used .NET Core 3.1 and noted that the "style" (again, for lack of better word) differences and that the style of
@section scripts
{
<script src="/api/reports/resources/js/telerikReportViewer"></script>
<script type="text/javascript">
$(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/",
can be used in an CSHTML that is based on .NET Core such as .Net 6.0 and is NOT dependent upon .net Framework
I guess one take away is the myriad of demos and documentation for MVC are mainly .Net framework and involve steps such as ".... select the Telerik MVC Report Viewer View" which as far as I can tell is not applicable to .Net 6.0
How to Use HTML5 ASP.NET MVC Report Viewer With REST Service | Telerik Reporting
Here is my full index.cshtml that I used in my .net 6.0 test project
@using Telerik.Reporting
@{
ViewData["Title"] = "Sample Report Quack";
}
@*<p>Hello...I'm finding using the HTML5 report viewer especially in .NET 6.0 to have a very steep learning curve - especially since the documentation and demos are all over the place with respect to .Net Framework vs Core vs etc....</p>
*@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css" rel="stylesheet" id="common-css" />
<link href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.blueopal.min.css" rel="stylesheet" id="skin-css" />
<style>
body {
margin: 5px;
font-family: Verdana, Arial, sans-serif;
}
#reportViewer1 {
position: absolute;
left: 5px;
right: 5px;
top: 160px;
bottom: 5px;
overflow: hidden;
clear: both;
}
</style>
<title>Telerik HTML5 Report Viewer Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<div id="reportViewer1">
loading...
</div>
</body>
</html>
@section scripts
{
<script src="/api/reports/resources/js/telerikReportViewer"></script>
<script type="text/javascript">
$(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 the 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.html',
//ReportSource - report description
reportSource: {
report: "SampleReport.trdp"
},
//parameters: {
// editors: {
// singleSelect: telerikReportViewer.ParameterEditorTypes.COMBO_BOX,
// multiSelect: telerikReportViewer.ParameterEditorTypes.COMBO_BOX,
// }
//},
// 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,
//Enables or disables the accessibility features of the report viewer and its contents.
enableAccessibility: false,
//If set to true shows the Send Mail Message toolbar button
sendEmail: { enabled: true }
});
});
</script>
}
Hi Al,
You can still set the report and the parameters dynamically. The approach and a sample project can be found in the Pass parameter value to MVC report viewer KB article.
I downloaded and ran the demo - it does do a better job at showing how the report and viewer do not have to have hardcoded values (to a certain degree.... it still assumes the same Report model)
I see the demo is .Net Framework 4.6.1 - I will try to build the same from scratch using .Net 6.0 (and if I get it working post it here for others?)
Hmmm... I'm stuck on porting the values in the .Net Framework type of Report Viewer to the .Net 6.0 style (at least as seen in all the latest demos)
@(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 the 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.
//
// Strongly typed ReportSource - TypeReportSource or UriReportSource.
.ReportSource(Model.ReportName, Model.Parameters)
// 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)
//If set to true shows the Send Mail Message toolbar button
.SendEmail(new SendEmail { Enabled = false })
//Switches accessibility mode ON or OFF.
.EnableAccessibility(false)
)
To the .Net 6.0 style
<script type="text/javascript">$(document).ready(function () {
$("#reportViewer1")
.telerik_ReportViewer({
????
});
});
</script>
Doing more research, I think I can see the difference in "style" (for lack of a better word) such as
<script type="text/javascript">
$(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: "https://localhost:44360/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-16.1.22.622.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: "SampleReport.trdp"
},
// 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,
//If set to true shows the Send Mail Message toolbar button
sendEmail: { enabled: false },
ready: function () {
//this.refreshReport();
},
});
});
</script>
However, now I'm stumped in trying to create a View (cshtml) that contains HTML5 report viewer in a .Net 6.0 ASP MVC application. All the documentation and demos I'm finding are for .Net Framework.... overall I'm finding switching from the old style report viewer to the new HTML5 report viewer very frustrating. I can successfully create and proof an HTML page that holds a viewer such as pasted - but it doesn't work when I paste it into a CSHTML such as index.cshtml for a View