Telerik Reporting for HTML 5 Apps
•Download as PPTX, PDF•
0 likes•1,753 views
Telerik reporting is one of the best reporting tools available in the market to develop, view and export data in the form of reports. This presentation starts with basic telerik reporting overview, then it moves towards html 5 report viewer and finally it covers designing basic report with sections, datasource and parameters.
Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Similar to Telerik Reporting for HTML 5 Apps
Similar to Telerik Reporting for HTML 5 Apps (20)
Recently uploaded
Recently uploaded (20)
Telerik Reporting for HTML 5 Apps
- 2. 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
- 3. Overview
- 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 in Telerik Reporting
- 6. Sample Telerik Report in Browser
- 7. Telerik Report Visual Studio 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. Report Designing
- 15. Add New Report
- 16. Report Sections
- 17. Report Sections -> Details
- 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