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

TypeScript, AngularJS Telerik HTML5 Report not working...

1 Answer 134 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Eduardo
Top achievements
Rank 1
Eduardo asked on 27 Jan 2017, 05:54 PM

I downloaded the "AngularJSDemo" project and it works out of the box.  Still in my (TypeScript) AngularJS project does not.  I am using the sample directive declaration:

iapp.directive('report', function () {
   return {
      restrict: 'EA',
      transclude: 'true',
      scope: {
         name: '@',
         parameters: '@'
      },
      template: "",
      link: function (scope:any, element, attrs) {
         //create the viewer object first, can be done in index.html as well
         var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");
         if (!reportViewer) {
            $("#reportViewer1").toggle();
           
            $(document).ready(function () {
               var d: any = $("#reportViewer1");
               var f: Function = $("#reportViewer1")["telerik_ReportViewer"];
               //$("#reportViewer1").telerik_ReportViewer({
               f({
                  error: function (e, args) {
                     alert('Error from report directive:' + args);
                  },
                  reportSource: {
                     report: scope.name,
                     parameters: JSON.parse(scope.parameters),
                  },
                  serviceUrl: '/api/reports/',
                  scale: 1.0,
                  ready: function () {
                     alert("up's");
                  },
               })
            });
         }
         //on state change update the report source
         scope.$watch('name', function () {
            var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");
            if (reportViewer) {
               var rs = reportViewer.reportSource();
               if (rs && rs.report)
                  if (rs.report != scope.name &&
                     rs.parameters != scope.parameters) {
                     reportViewer.reportSource({
                        report: scope.name,
                        parameters: JSON.parse(scope.parameters),
                     });
                  }
            }
         });
      }
   }
});

and a similar template as follows:

<div class="container-fluid" ng-controller="reportViewModel">
   <!--<h2>{{Title}}</h2>-->
   <div class="spacing">Title:  {{report.settings.title}}</div>
   <div class="spacing">Name: {{report.settings.reportName}}</div>
   <div class="spacing">Params: {{report.settings.reportParams}}</div>
   <hr />
   <report name="{{report.settings.reportName}}" parameters="{{report.settings.reportParams}}"></report>
</div>

-----------------------------------------------------

All looks good, and I can see that the "link" and "$watch" functions being called as expected, still the report viewer does not show-up!  I do see that when the "$watch" (for "name") gets triggered that the "var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");" always returns "undefined" (reportViewer is undefined).  if I go to the browser and type: ".../api/reports/" I do get to the controller (as expected), but it should be called upon initialization (within link") but it never happens... 

If someone have a bit of a clue what else I should be looking for it will be nice to know, until then... thanks.

Ed.

 

1 Answer, 1 is accepted

Sort by
0
Katia
Telerik team
answered on 30 Jan 2017, 10:05 AM
Hi Ed,

You can check an update in the support ticket #1086774 you opened on the same question. We can provide more accurate suggestions after reviewing a sample project reproducing this behavior.

For other community members interested int his topic below is the reply from the ticket:
"Please check if the page has loaded the JavaScript libraries required by the viewer. In general, the page with the HTML5 Viewer must load only once jQUERY of version greater than 1.9.1, considered with Telerik Kendo UI Javascript requirements, and there must be linked Telerik Kendo UI CSS and JS files of the same version - HTML5 Viewer Requirements.
Steps how to set up the viewer are provided in Manual Setup help article.

The recommended troubleshooting approach when using the viewer is to use the browser's Console or download and install Fiddler. In Fiddler - Inspectors - Request/Response - Raw tabs will be listed information about the made request and its response, including a list of all performed requests for the page."



Regards,
Katia
Telerik by Progress
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
Eduardo
Top achievements
Rank 1
Answers by
Katia
Telerik team
Share this question
or