Typescript definitions for Reporting

12 posts, 0 answers
  1. Walter
    Walter avatar
    2 posts
    Member since:
    Aug 2015

    Posted 13 Aug 2015 Link to this post

    Hi,

     I was wondering if there were any typescript definition files for the reporting js framework, and if so, where I could find them?

     Thanks,

  2.
  3. Alena
    Admin
    Alena avatar
    1049 posts

    Posted 13 Aug 2015 Link to this post

    Hello Walter,

    We do not provide typescript definition files for Telerik Reporting.
    The available approaches to implement Reporting are described in the Using Telerik Reporting in Applications help articles.

    Regards,
    Nasko
    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
  5. nick
    nick avatar
    9 posts
    Member since:
    Feb 2017

    Posted 30 Aug 2018 in reply to Alena Link to this post

    Three years later and this still seems to be the case. Are there any near term plans for TypeScript / Webpack support for the Html5 Report Viewer? Right now, I'm having to workaround the lack of typing for 'telerikReportViewer'.
  7. Alena
    Admin
    Alena avatar
    1049 posts

    Posted 30 Aug 2018 Link to this post

    Hello Nick,

    What is the type of application you are using when embedding the HTML5 viewer? Also, what kind of workaround is needed for the lack of typing? Do you create mock d.ts files or use another approach?

    Regards,
    Nasko
    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
  9. nick
    nick avatar
    9 posts
    Member since:
    Feb 2017

    Posted 30 Aug 2018 in reply to Alena Link to this post

    @Nasko

    Just a client-side JS / Typescript application built with Webpack...

    Workaround due to 'cannot find name 'telerikReportViewer' TS error:

    // k.d.ts

    declare var telerikReportViewer: any;

    // app.ts

    (<any>$("#reportViewer1")).telerik_ReportViewer({

      serviceUrl: apiDataset.reportapi,
    reportSource: {
      report: "SampleReport.trdp"

    },

    viewMode: telerikReportViewer.ViewModes.INTERACTIVE,           

    scaleMode: telerikReportViewer.ScaleModes.FIT_PAGE_WIDTH,

    scale: 1.0,
    enableAccessibility: false,
    ready: function() {
    //this.refreshReport();
    }
    });

  11. Alena
    Admin
    Alena avatar
    1049 posts

    Posted 31 Aug 2018 Link to this post

    Hi Nick,

    I'm not sure if this will help in your scenario, but you can find attached the d.ts file that is used internally for the Angular Report Viewer. You can get the package and take a look at its internal scripts from here.

    Regards,
    Nasko
    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
  13. Bharat
    Bharat avatar
    9 posts
    Member since:
    Feb 2019

    Posted 14 Mar Link to this post

    I am facing the same issue. I am using it in react-typescript project.

    I have to use type "any"(but i don't want to use any) for jquery selector to make it run.

    ($("#reportViewer1") as any).telerik_ReportViewer({
    ....
    });

     

     

     

  14.
  15. Silviya
    Admin
    Silviya avatar
    335 posts

    Posted 18 Mar Link to this post

    Hi Bharat,

    I'm not completely sure about the scenario you have and I'm not an expert in typescript, but I have an assumption that you want to use the viewer as TelerikReportViewerComponent type instead of any type.

    You might refer to this code snippet from out Localization article:
    import { AfterViewInit, Component, ViewChild } from '@angular/core';
    import { TelerikReportViewerComponent } from '@progress/telerik-angular-report-viewer';
    import { StringResources } from './stringResources';
    ...
     
    export class AppComponent implements AfterViewInit {
      @ViewChild('viewer1') viewer: TelerikReportViewerComponent;
     
      ngAfterViewInit(): void {
        const language = navigator.language;
        let resources = StringResources.english; // default
     
        if(language === 'ja-JP'){
          resources = StringResources.japanese;
        }
     
        this.viewer.viewerObject.stringResources = Object.assign(this.viewer.viewerObject.stringResources, resources);
      }
    }

    Please let us know if this helps and it not, please elaborate more on the scenario you have. We would appreciate if you open a new support ticket and attach the application to investigate further.

    Best Regards,
    Silviya
    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
  17. Bharat
    Bharat avatar
    9 posts
    Member since:
    Feb 2019

    Posted 19 Mar in reply to Silviya Link to this post

     

    I have created my own types by reading all the properties from document. I have created types for each and every property and used it. But I think you should provide the typings so users do not need to create it their selves. 

       /**
        * The Telerik HTML5 Report Viewer is a jQuery plugin - jQuery.fn.telerik_ReportViewer(options).
        */
       export default interface ITelerikReportViewerOptions {
           /**
            * Sets the unique identifier of the ReportViewer instance.
            * If not specified, the id of the target HTML element will be used (if such is set).
            * The id of the ReportViewer is used to identify the client session of the viewer
            * when persistSession is enabled (true)
            */
           id?: string;
     
           /**
            * Sets the address of the html page that contains the viewer templates.
            * If omitted, the default template will be downloaded from the REST service.
            */
           trvTemplateUrl?: string;
           /*
            ......... and so on...
           */
       }
     
       export default interface IReportViewer<T> extends JQuery<T> {
           telerik_ReportViewer: (options: ITelerikReportViewerOptions) => void;
       }
    //////////////////////////////
  19. Bharat
    Bharat avatar
    9 posts
    Member since:
    Feb 2019

    Posted 19 Mar in reply to Bharat Link to this post

    I used it in React component,

    01.export default class ReportViewerComponent extends React.PureComponent<IReportViewerProps> {
    02.    public render(): JSX.Element {
    03.        return (
    04.            <div id="reportViewer" style={{ height: "100vh" }} />
    05.        );
    06.    }
    07. 
    08.    public componentDidMount(): void {
    09.        const reportViewer1: IReportViewer<HTMLDivElement> =
    10.                       $("#reportViewer") as IReportViewer<HTMLDivElement>;
    11.        reportViewer1.telerik_ReportViewer({
    12.            serviceUrl: "https://demos.telerik.com/reporting/api/reports/",
    13.            reportSource: { report: this.props.report },
    14.            viewMode: TelrikOptions.ViewMode.INTERACTIVE,
    15.            sendEmail: { enabled: true },
    16.        });
    17.    }
    18.}
  20.
  21. Bharat
    Bharat avatar
    9 posts
    Member since:
    Feb 2019

    Posted 19 Mar in reply to Bharat Link to this post

    I used it in React like,

    01.export default class ReportViewerComponent extends React.PureComponent<IReportViewerProps> {
    02.    public render(): JSX.Element {
    03.        return (
    04.            <div id="reportViewer" style={{ height: "100vh" }} />
    05.        );
    06.    }
    07. 
    08.    public componentDidMount(): void {
    09.        const reportViewer1: IReportViewer<HTMLDivElement> =
    10.                   $("#reportViewer") as IReportViewer<HTMLDivElement>;
    11.        reportViewer1.telerik_ReportViewer({
    12.            serviceUrl: "https://demos.telerik.com/reporting/api/reports/",
    13.            reportSource: { report: this.props.report },
    14.            viewMode: TelrikOptions.ViewMode.INTERACTIVE,
    15.            sendEmail: { enabled: true },
    16.        });
    17.    }
    18.}
  23. Silviya
    Admin
    Silviya avatar
    335 posts

    Posted 21 Mar Link to this post

    Hello Bharat,

    Indeed, this is a valid feature request and it was already logged and approved in our Feedback and Ideas portal. You might vote for it to raise its priority: TypeScript definitions for the HTML5 Viewer Report. In future versions of our product we consider for implementation the most demanded features, so if it has more votes, we'll move it up in our implementation list.

    Regards,
    Silviya
    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
Back to Top