Embed Size (px)
Citation preview
Telerik Reporting
Road Map
These are some basic implementation concepts discussed in this slide.
• Telerik Reporing for HTML 5 Apps• Initializing Viewer
• Utilizing Viewer
• Report Viewer Options
• Report Designer• Report Sections
• Report Datasources
• Report Parameters
Overview
Telerik Reporting
• Telerik Reporting is a reporting solution for all .NET cloud, web, and desktop platforms that provides a full range of ready-to-use tools and services to help people throughout your organization create, deploy, and use reports quickly and easily.
• With Telerik Reporting, you can retrieve data from relational, multidimensional, ORM or custom data layer based data sources; The ready reports can be viewed in various formats (including PDF, Microsoft Office Word and Excel and PowerPoint documents); and can be viewed with a dedicated viewer in a Web or .NET Desktop application.
What’s Included in Telerik Reporting
Sample Telerik Report in Browser
Telerik Report Visual Studio Designer
Telerik Reporting for
HTML 5 Apps
HTML5 Report Viewer
To see HTML 5 Report viewer in action…
• Prerequisites• A running web site that hosts the REST service at address /api/reports.
• Kendo UI in folder /kendo/.
• Initializing HTML5 Report Viewer in HTML page
• Utilizing HTML5 Report Viewer
Utilizing HTML5 Viewer
window.open(App.ROOT + "report/viewer/creditmemoviewer.html", "_blank");
Initializing HTML5 Viewer (1 -> Head)
• <head>
• <title>Report Viewer</title>
• <meta http-equiv="X-UA-Compatible" content="IE=edge" />
• <link href="/Content/css/font-awesome.css" rel="stylesheet" />
• <script src="/Scripts/libs/jquery.min.js"></script>
• <link href="/kendo/styles/kendo.common.min.css" rel="stylesheet" />
• <link href="/kendo/styles/kendo.blueopal.min.css" rel="stylesheet" />
• <link href="/kendo/report/styles/kendo.report.css" rel="stylesheet" />
• <script src="/kendo/js/kendo.all.min.js"></script>
• <script src="/kendo/report/js/kendo.report.js"></script>
• <script src="/Scripts/libs/screenfull.js"></script>
• </head>
Initializing HTML5 Viewer (2 -> Body)
• <body>
• <div id="reportViewer1" class="k-widget">
Loading Report...
• </div>
• </body>
Initializing HTML5 Viewer (3 -> Script)• <script type="text/javascript">
• var repOptions = {
• serviceUrl: "/api/reports/",
• templateUrl: "/kendo/report/templates/kendo.report.html",
• viewMode: "PRINT_PREVIEW",
• reportSource: {
• report: "ReportLib.xyzReport, ReportLib",
• parameters: {
• CultureID: "en",
• SectionID: 123,
}
• }
• };$("#reportViewer1").telerik_ReportViewer(repOptions).data("telerik_ReportViewer");
• </script>
Report Designing
Add New Report
Report Sections
Report Sections -> Details
Report Parameters
Report Data Source
Report Data Source -> Type
Report Data Source -> Connection
Report Data Source -> Command
Report Data Source -> Parameters
Report Data Source -> Execution Result
REFERNCES
• http://www.telerik.com/help/reporting/html5-report-viewer.html
• http://www.telerik.com/help/reporting/html5-report-viewer-embedding.html
• http://www.telerik.com/help/reporting/ui-report-designer.html
• http://www.telerik.com/help/reporting/designing-reports-understanding-report-structure.html
• http://www.telerik.com/help/reporting/connecting-to-data-data-source-components.html
