TypeScript, AngularJS Telerik HTML5 Report not working...

[Eduardo]

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.

 

[Katia]

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