Using Kendo UI together with Reporting

[Thao]

Hi All,

I have a .Net Core + AngularJS project using Kendo UI. And now I want to use Telerik Reporting for reports. But I'm facing an issue with the integration. When I include the  javascript file : ReportViewer/js/telerikReportViewer.kendo-11.1.17.614.min.js, the existing application is not working anymore. The existing application is using kendo.all.min.js version : v2017.1.330.

 

Thanks,

[Stef]

Hi Thao,

Telerik Reporting provides a subset of Telerik Kendo UI widgets of version 2015.3.930. This subset can be removed if you are already using Kendo Ui libraries.
Please check the requirements and the files you need to updated, listed in HTML5 Viewer: Important Settings.

Regards,
Stef
Progress Telerik

[Thao]

Hi Stef,

I just noticed and fixed that issue. Now I'm able to run the application using javascript code. But when I use that code in the controller to load the report, the report doesn't show up. I don't know what wrong. Please help.

Below is my code:

html file:

<div id="reportViewer1">
    loading...
</div>
<div ui-view=""></div>
<div id="ReportMain" ng-controller="app.report.ReportMainController as vm">
    <!--<div class="btn"><a ng-click="vm.loadReport();">Load Report</a></div>-->
</div>
<style>
    #reportViewer1 {
        width: 100%;
        height: 600px;
    }

    .btn {
        display: inline-block;
        margin-right: 10px;
        background-color: #a0a0a0;
        border-radius: 20px;
        padding: 5px;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        //$("#reportViewer1")
        //    .telerik_ReportViewer({
        //        serviceUrl: "api/reports/",
        //        reportSource: {
        //            // The report can be set to a report file name (.trdx or .trdp report definition)
        //            // or CLR type name (report class definition).
        //           // report: "Barcodes Report.trdp",
        //            report: "Telerik.Reporting.Examples.CSharp.ReportCatalog, CSharp.ReportLibrary",
        //           // report:1
        //            // Parameters name value dictionary
        //            parameters: {}
        //        },

        //        scale: 1.0,
        //    });
        var scope = angular.element($('#ReportMain')).scope();
        scope.vm.loadReport();
    });
     
        //    //Theme switcher
        //    //themeSwitcher(
        //    //    '#theme-switcher',
        //    //    '#common-css',
        //    //    '#skin-css');
</script>

 

Controller:

module app.report {
    'use strict';

    class ReportMainController {
        static $inject = ['$rootScope'];
        settings: any;
        constructor(
            private $rootScope: ng.IRootScopeService
        ) {
            var vm = this;
           
            // vm.settings = $state.current.reportSettings;
            //$rootScope.$on('$stateChangeStart', function (event, toState) {
            //    vm.settings = toState.reportSettings;

            //});

        }
        loadReport(): void {
            var vm = this;
            var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");
            if (!reportViewer) {
                $("#reportViewer1").toggle();
                $("#reportViewer1").telerik_ReportViewer({
                    error: function (e, args) {
                        alert('Error from report directive:' + args);
                    },
                    reportSource: {
                        report: "Barcodes Report.trdp",
                        parameters: {}

                    },
                    serviceUrl: '/api/reports/',
                    scale: 1.0,
                    ready: function () {
                       // this.refreshReport();
                    },
                });

            } 
        }
    }
    //function config($urlRouterProvider, $stateProvider):void {

    //   // $urlRouterProvider.otherwise("/reporthome");

    //    $stateProvider
    //        .state("reporthome", {
    //            url: "/reporthome",
    //            template: "<div> Click on a report above !  </div>",
    //        })

    //        .state("reports", {
    //            url: "/reports",
    //            templateUrl: "/reports/reports.template.html",
    //            controller: "app.report.ReportMainController",
    //            controllerAs: "report",
    //            reportSettings: {
    //                title: "Sample Report",
    //                reportName: "SampleReport.trdx",
    //                reportParams: { 'Parameter1': 'test parameters' }
    //            }
    //        })

    //        .state("reports.barcodes", {
    //            url: "/barcodes",
    //            reportSettings: {
    //                title: "Barcodes Report",
    //                reportName: "BarcodesReport.trdx",
    //                reportParams: {}
    //            },

    //        })

    //        .state("reports.sample", {
    //            url: "/sample",
    //            reportSettings: {
    //                title: "Sample Report",
    //                reportName: "SampleReport.trdx",
    //                reportParams: { 'Parameter1': 'test parameters' }
    //            }
    //        })
                        
    //}
    angular
        .module("app.report")
        .controller("app.report.ReportMainController", ReportMainController);
    //    .config(config);
    //config.$inject = ['$urlRouterProvider', '$stateProvider'];
  
}

[Stef]

Hi Thao,

Please check the example in HTML5 Viewer in AngularJS project and compare your settings to it. In loadReport you are toggling the DIV element of the viewer, which may hide the UI from the page if it is initially visible. If there are errors in the execution of the JavaScript, they will be listed in the browser's console (F12 Developer tools).

If you decide to use newer version of angular, we recommend you to switch to the newly introduced Angular Viewer.

Regards,
Stef
Progress Telerik