This is a migrated thread and some comments may be shown as answers.

Using Kendo UI together with Reporting

3 Answers 215 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Thao
Top achievements
Rank 1
Thao asked on 22 Jun 2017, 05:20 PM

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,

3 Answers, 1 is accepted

Sort by
0
Stef
Telerik team
answered on 23 Jun 2017, 09:26 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Thao
Top achievements
Rank 1
answered on 27 Jun 2017, 03:18 AM

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'];
  
}

0
Stef
Telerik team
answered on 29 Jun 2017, 02:36 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Thao
Top achievements
Rank 1
Answers by
Stef
Telerik team
Thao
Top achievements
Rank 1
Share this question
or