Interface JSViewer

Hierarchy

  • JSViewer

Properties

backToParent currentPage destroy export getToc goToPage openReport pageCount print refresh search sidebar theme? toolbar

Properties

backToParent

backToParent: (() => void)

Type declaration

    • (): void

    • Makes the viewer to display the parent report of the drill-down report.

      Returns void

      Example

      Usage example:

      // ESM usage
         * import { createViewer } from './jsViewer.min.js';
         * const viewer = createViewer({
      element: '#root',
      reportID: 'AnnualReport.rdlx'
      });
      viewer.backToParent()

      Example

      Usage example:

      // UMD usage
         * var viewer = GrapeCity.ActiveReports.JSViewer.create({
      element: '#root',
      reportID: 'AnnualReport.rdlx'
      });
      viewer.backToParent()

currentPage

currentPage: (() => number)

Type declaration

    • (): number

    • Gets the currently displayed page number.

      Returns number

      An integer representing currently displayed page number.

      Example

      Usage example:

      // ESM usage
         * import { createViewer } from './jsViewer.min.js';
         * const viewer = createViewer({
      element: '#root',
      reportID: 'AnnualReport.rdlx'
      });
      console.log(viewer.currentPage())

      Example

      Usage example:

      // UMD usage
         * var viewer = GrapeCity.ActiveReports.JSViewer.create({
      element: '#root',
      reportID: 'AnnualReport.rdlx'
      });
      console.log(viewer.currentPage())

destroy

destroy: (() => void)

Type declaration

    • (): void

    • Removes the viewer content from the element.

      Returns void

      Example

      Usage example:

      // ESM usage
         * import { createViewer } from './jsViewer.min.js';
         * const viewer = createViewer({
      element: '#root'
      });
      viewer.destroy()

      Example

      Usage example:

      // UMD usage
         * var viewer = GrapeCity.ActiveReports.JSViewer.create({
      element: '#root'
      });
      viewer.destroy()

export

export: ((exportType, callback, saveAsDialog, settings, isCancelRequested?) => void)

Type declaration

    • (exportType, callback, saveAsDialog, settings, isCancelRequested?): void

    • Exports the currently displayed report.

      Parameters

      • exportType: ExportTypes

        Specifies export format.

      • callback: ExportCallback

        Function that is invoked once the export result is available (its Url is passed in the callback).

      • saveAsDialog: boolean

        Indicates whether the save as dialog should be shown immediately once the export result is ready.

      • settings: any

        The export settings are available for RenderingExtensions.

      • Optional isCancelRequested: (() => boolean | Promise<boolean>)

        The function is periodically called with a check to cancel the export task.

          • (): boolean | Promise<boolean>

          • Returns boolean | Promise<boolean>

      Returns void

      Example

      Usage example:

      // ESM usage
         * import { createViewer } from './jsViewer.min.js';
         * const viewer = createViewer({
      element: '#root',
      reportID: 'AnnualReport.rdlx',
      availableExports: ['Pdf']
      });
      viewer.export('Pdf', downloadReport, true, { Title: '1997 Annual Report' })

      // function fetches the report from uri(callback function)
      var downloadReport = function (uri) {
              var newWin = null;
              // open uri in new window
              try {
                  newWin = window.open(uri);
              } catch (e) { }
              // if browser rejects opening new window, open uri in current window
              if (!newWin) {
                  window.location = uri;
              }
          };

      Example

      Usage example:

      // UMD usage
         * var viewer = GrapeCity.ActiveReports.JSViewer.create({
      element: '#root',
      reportID: 'AnnualReport.rdlx',
      availableExports: ['Pdf']
      });
      viewer.export('Pdf', downloadReport, true, { Title: '1997 Annual Report' })

      // function fetches the report from uri(callback function)
      var downloadReport = function (uri) {
              var newWin = null;
              // open uri in new window
              try {
                  newWin = window.open(uri);
              } catch (e) { }
              // if browser rejects opening new window, open uri in current window
              if (!newWin) {
                  window.location = uri;
              }
          };

getToc

getToc: (() => any)

Type declaration

    • (): any

    • Obtains the report TOC.

      Returns any

      TOC tree.

      Example

      Usage example:

      // ESM usage
         * import { createViewer } from './jsViewer.min.js';
         * const viewer = createViewer({
      element: '#root',
      reportID: 'AnnualReport.rdlx'
      });
      console.log(viewer.getToc())

      Example

      Usage example:

      // UMD usage
         * var viewer = GrapeCity.ActiveReports.JSViewer.create({
      element: '#root',
      reportID: 'AnnualReport.rdlx'
      });
      console.log(viewer.getToc())

goToPage

goToPage: ((pageNumber) => void)

Type declaration

    • (pageNumber): void

    • Makes the viewer to display the specific page. Page numeration starts with 1.

      Parameters

      • pageNumber: number

        The number of pages to go to.

      Returns void

      Example

      Usage example:

      // ESM usage
         * import { createViewer } from './jsViewer.min.js';
         * const viewer = createViewer({
      element: '#root',
      reportID: 'AnnualReport.rdlx'
      });
      viewer.goToPage(1)

      Example

      Usage example:

      // UMD usage
         * var viewer = GrapeCity.ActiveReports.JSViewer.create({
      element: '#root',
      reportID: 'AnnualReport.rdlx'
      });
      viewer.goToPage(1)

openReport

openReport: ((reportID, reportParameters?) => void)

Type declaration

    • (reportID, reportParameters?): void

    • Open report.

      Parameters

      • reportID: string

        The id of the report.

      • Optional reportParameters: Parameter[]

        The array of the parameters values.

      Returns void

      Example

      Usage example:

      // ESM usage
         * import { createViewer } from './jsViewer.min.js';
         * const viewer = createViewer({
      element: '#root'
      });
      viewer.openReport('Invoice.rdlx')

      Example

      Usage example:

      // UMD usage
         * var viewer = GrapeCity.ActiveReports.JSViewer.create({
      element: '#root'
      });
      viewer.openReport('Invoice.rdlx')

pageCount

pageCount: (() => number)

Type declaration

    • (): number

    • Gets the page count of the currently displayed report.

      Returns number

      An integer representing page count.

      Example

      Usage example:

      // ESM usage
         * import { createViewer } from './jsViewer.min.js';
         * const viewer = createViewer({
      element: '#root',
      reportID: 'AnnualReport.rdlx'
      });
      console.log(viewer.pageCount())

      Example

      Usage example:

      // UMD usage
         * var viewer = GrapeCity.ActiveReports.JSViewer.create({
      element: '#root',
      reportID: 'AnnualReport.rdlx'
      });
      console.log(viewer.pageCount())

print

print: (() => void)

Type declaration

    • (): void

    • Prints the currently displayed report if any.

      Returns void

      Example

      Usage example:

      // ESM usage
         * import { createViewer } from './jsViewer.min.js';
         * const viewer = createViewer({
      element: '#root',
      reportID: 'AnnualReport.rdlx'
      });
      viewer.print()

      Example

      Usage example:

      // UMD usage
         * var viewer = GrapeCity.ActiveReports.JSViewer.create({
      element: '#root',
      reportID: 'AnnualReport.rdlx'
      });
      viewer.print()

refresh

refresh: (() => void)

Type declaration

    • (): void

    • Refreshes the report preview.

      Returns void

      Example

      Usage example:

      // ESM usage
         * import { createViewer } from './jsViewer.min.js';
         * const viewer = createViewer({
      element: '#root'
      });
      viewer.refresh()

      Example

      Usage example:

      // UMD usage
         * var viewer = GrapeCity.ActiveReports.JSViewer.create({
      element: '#root'
      });
      viewer.refresh()

search

search: ((searchTerm, searchOptions, callback) => void)

Type declaration

    • (searchTerm, searchOptions, callback): void

    • Performs the search of a specific term with specific search options (match case, whole word) and invokes the specific callback with the search result passed.

      Parameters

      • searchTerm: string

        String to find.

      • searchOptions: SearchOptions

        The object optionally defines the search options.

      • callback: ((searchResult) => void)

        The function to call after performing search.

          • (searchResult): void

          • Parameters

            • searchResult: any

            Returns void

      Returns void

      Example

      Usage example:

      // ESM usage
         * import { createViewer } from './jsViewer.min.js';
         * const viewer = createViewer({
      element: '#root',
      reportID: 'AnnualReport.rdlx'
      });
      viewer.search('a', { matchCase: true, wholePhrase: false }, (results) => console.log(results))

      Example

      Usage example:

      // UMD usage
         * var viewer = GrapeCity.ActiveReports.JSViewer.create({
      element: '#root',
      reportID: 'AnnualReport.rdlx'
      });
      viewer.search('a', { matchCase: true, wholePhrase: false }, (results) => console.log(results))

sidebar

sidebar: Sidebar

The viewer's sidebar instance. The developer may use it to toggle the sidebar visibility.

Example

Usage example:

// ESM usage
   * import { createViewer } from './jsViewer.min.js';
   * const viewer = createViewer({
element: '#root'
});
viewer.sidebar.toggle(false); // hide sidebar

Example

Usage example:

// UMD usage
   * var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root'
});
viewer.sidebar.toggle(false); // hide sidebar

Optional theme

theme?: UITheme<Record<string, string>>

Gets or sets the viewer UI theme.

Example

Usage example ESM:

import {createViewer, UIThemes} from './jsViewer.min.js';
const viewer = createViewer({
    element: '#root',
});

viewer.theme = UIThemes.defaultDark;

Example

Usage example UMD:

var viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#root'
});
 viewer.theme: GrapeCity.ActiveReports.JSViewer.Themes.defaultDark

toolbar

toolbar: Toolbar

The viewer's toolbar instance. The developer may use it to add the custom elements or remove the existing ones.

Example

Usage example:

// ESM usage
   * import { createViewer } from './jsViewer.min.js';
   * const viewer = createViewer({
element: '#root'
});
viewer.toolbar.toggle(false); // hide toolbar

Example

Usage example:

// UMD usage
   * var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root'
});
viewer.toolbar.toggle(false); // hide toolbar

Settings

Member Visibility

Theme

On This Page