Downloaded 18 times
Uploaded byMuhammad Umar
Telerik Reporting for HTML 5 Apps
The document outlines the implementation concepts and features of Telerik Reporting, which is a reporting solution for .NET platforms, enabling quick report creation and deployment. It includes details about using the HTML5 report viewer, initializing it, and code snippets for report integration. Additional resources for learning and reference are also provided.
Telerik Reporting for HTML 5 Apps
- 1.
- 2. Road Map Theseare 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
- 3.
- 4. 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.
- 5. What’s Included inTelerik Reporting
- 6. Sample Telerik Reportin Browser
- 7. Telerik Report VisualStudio Designer
- 8. Telerik Reporting for HTML 5 Apps
- 9. 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
- 10. Utilizing HTML5 Viewer window.open(App.ROOT + "report/viewer/creditmemoviewer.html", "_blank");
- 11. 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>
- 12. Initializing HTML5 Viewer(2 -> Body) • <body> • <div id="reportViewer1" class="k-widget"> Loading Report... • </div> • </body>
- 13. 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>
- 14.
- 15.
- 16.
- 17. Report Sections ->Details
- 18.
- 19.
- 20. Report Data Source-> Type
- 21. Report Data Source-> Connection
- 22. Report Data Source-> Command
- 23. Report Data Source-> Parameters
- 24. Report Data Source-> Execution Result
- 25. 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