Base solution for your next web application
Open Closed

abp spinner loading infinitely when calling telerik reporting #5962


User avatar
0
[email protected] created

Hi there,

I have a noob question in regards to the spinner. My project is Angular 6 + .NET Core. I'm trying to make use of Telerik reporting's REST service in our project. However, whenever I try to go to the function (generated from RAD tool) that loads telerik reports, the spinner loads infinitely. Here is a short clip to demonstrate what I describe: https://youtu.be/SFzufR5XKho

Could anyone point me to the direction on how to get this resolve? Thanks a lot!


3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @[email protected]

    Could you share the code of related component (Typescript file) ?

  • User Avatar
    0
    [email protected] created

    Hi ismcagdas,

    Here's the TS file for one of the reports:

    import { ActivatedRoute } from '@angular/router';
    import { Router } from '@angular/router';
    import { appModuleAnimation } from '@shared/animations/routerTransition';
    import { Http } from '@angular/http';
    import { General_ledgersServiceProxy, General_ledgerDto  } from '@shared/service-proxies/service-proxies';
    import { NotifyService } from '@abp/notify/notify.service';
    import { AppComponentBase } from '@shared/common/app-component-base';
    import { TokenAuthServiceProxy } from '@shared/service-proxies/service-proxies';
    import { Table } from 'primeng/components/table/table';
    import { Paginator } from 'primeng/components/paginator/paginator';
    import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
    import { FileDownloadService } from '@shared/utils/file-download.service';
    import * as moment from 'moment';
    import { Component, Injector, ViewEncapsulation, ViewChild } from '@angular/core';
    
    
    @Component({
      selector: 'app-root',
      templateUrl: './reportsmonth.component.html'
    
    })
    export class ReportsmonthComponent{
    
     constructor(
            private router: Router
        ) {}
    	
      title = "Report Viewer";
      viewerContainerStyle = {
        position: 'relative',
        width: '1000px',
        height: '800px',
        ['font-family']: 'ms sans serif'
      };
      
      
        changeTexts(startacct:string,endacct:string,periodbegin:string,periodend:string) {
    this.router.navigate(['/app/report/reportbymonth'],{queryParams:{periodbegin:startacct,periodend:endacct,periodbdate:periodbegin,periodddate:periodend,id:3}});
    
      }
    
      //ready() { console.log('read'); }
      viewerToolTipOpening(e: any, args: any) { console.log('viewerToolTipOpening ' + args.toolTip.text); }
    }
    
  • User Avatar
    0
    ryancyq created
    Support Team

    Hi @[email protected], is your /app/report/reportbymonth an angular page?

    if it is not, you won't be able to route to that url using angular router.

    see https://stackoverflow.com/q/26031748/6856176