JSViewer

Interface: JSViewer

Properties

backToParent()

backToParent: () => void;

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

Returns

void

Examples

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

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

currentPage()

currentPage: () => number;

Gets the currently displayed page number.

Returns

number

An integer representing currently displayed page number.

Examples

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

// 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.

Returns

void

Examples

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

// 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.

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.

isCancelRequested?

() => boolean | Promise<boolean>

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

Returns

void

Examples

// 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;
		}
	};

// 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.

Returns

any

TOC tree.

Examples

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

// 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.

Parameters

pageNumber

number

The number of pages to go to.

Returns

void

Examples

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

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

openReport()

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

Open report.

Parameters

reportID

string

The id of the report.

reportParameters?

Parameter[]

The array of the parameters values.

Returns

void

Examples

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

// 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.

Returns

number

An integer representing page count.

Examples

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

// 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.

Returns

void

Examples

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

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

refresh()

refresh: () => void;

Refreshes the report preview.

Returns

void

Examples

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

// 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.

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.

Returns

void

Examples

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

// 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;

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

Examples

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

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

theme?

optional theme: string | ColorTheme;

Gets or sets the viewer UI theme.

Examples

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

viewer.theme = ColorThemes.defaultDark;

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

toolbar: Toolbar;

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

Examples

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

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