Interface JSViewer

interface JSViewer {
    backToParent: (() => void);
    currentPage: (() => number);
    destroy: (() => void);
    export: ((exportType, callback, saveAsDialog, settings, isCancelRequested?) => void);
    getToc: (() => any);
    goToPage: ((pageNumber) => void);
    openReport: ((reportID, reportParameters?) => void);
    pageCount: (() => number);
    print: (() => void);
    refresh: (() => void);
    search: ((searchTerm, searchOptions, callback) => void);
    sidebar: Sidebar;
    theme?: UITheme;
    toolbar: Toolbar;
}

Properties

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

Properties

backToParent

backToParent: (() => void)

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

Type declaration

    • (): void

    • 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)

Gets the currently displayed page number.

Type declaration

    • (): number

    • Returns number

Returns

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)

Removes the viewer content from the element.

Type declaration

    • (): void

    • 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)

Exports the currently displayed report.

Type declaration

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

    • 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)

Obtains the report TOC.

Type declaration

    • (): any

    • Returns any

Returns

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)

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

Type declaration

    • (pageNumber): void

    • 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)

Open report.

Type declaration

    • (reportID, reportParameters?): void

    • 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)

Gets the page count of the currently displayed report.

Type declaration

    • (): number

    • Returns number

Returns

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)

Prints the currently displayed report if any.

Type declaration

    • (): void

    • 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)

Refreshes the report preview.

Type declaration

    • (): void

    • 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)

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.

Type declaration

    • (searchTerm, searchOptions, callback): void

    • 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

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

backToParentcurrentPagedestroyexportgetTocgoToPageopenReportpageCountprintrefreshsearchsidebarthemetoolbar