[]
API DEMOS BLOG SUPPORT PRICING DOWNLOAD
(Showing Draft Content)

InitializationOptions

Interface: InitializationOptions

The following options can be set during initialization or at run time while working with the JS Viewer.

Properties

action()?

optional action: (actionType, actionParams, actionTarget) => void;

Parameters

actionType

string

actionParams

any[]

actionTarget

string

Returns

void

Deprecated

This property is deprecated and will be removed in future versions. Use the new onAction property instead.

The callback that is invoked before the JS Viewer opens the hyperlink, bookmark link, drill down report or toggles the report control visibility.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
action: (actionType, actionParams, actionTarget) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams + '; Action target: ' + actionTarget);
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
action: (actionType, actionParams, actionTarget) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams + '; Action target: ' + actionTarget);
});

animation?

optional animation: AnimationOptions;

The report view animation options.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
animation: {
	loadChart: {
		enabled: true
	},
	hoverChart: {
		enabled: true
	},
	hoverTable: {
		enabled: true,
		backgroundColor: 'LightGray',
		textColor: 'DarkGray'
	}
}
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
animation: {
	loadChart: {
		enabled: true
	},
	hoverChart: {
		enabled: true
	},
	hoverTable: {
		enabled: true,
		backgroundColor: 'LightGray',
		textColor: 'DarkGray'
	}
}
});

autoBackgroundColor?

optional autoBackgroundColor: boolean;

When true, view area background color is filled with report body color available only for dashboard reports

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
 autoBackgroundColor : true;
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
 autoBackgroundColor : true;
});

availableExports?

optional availableExports: ExportTypes[];

The array of export types available via Export functionality of JS Viewer. By default, Mht, Pdf, Tiff, Xls, Xlsx, Csv, Doc, Docx, Json, Xml, TextPrint, XlsxData and CsvData exports are available for page reports, Mht, Pdf, Tiff, Xls, Xlsx, Rtf and Txt exports are available for section reports.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
availableExports: ['Xml', 'Pdf']
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
availableExports: ['Xml', 'Pdf']
});

defaultExportSettings?

optional defaultExportSettings: DefaultExportSettings;

The object containing custom default export settings. Use to set default value and visibility of any field in the export panel. Format keys are mht, pdf, tiff, xls, xlsx, csv, doc, docx, json, xml, xlsxData, csvData, rtf and txt. Settings' keys are the export settings which are available for RenderingExtensions.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
defaultExportSettings: {
	xls: {
		FileName: {
			value: "Hihihi",
			visible: false
		}
	}
}
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
defaultExportSettings: {
	xls: {
		FileName: {
			value: "Hihihi",
			visible: false
		}
	}
}
});

displayMode?

optional displayMode: ViewMode;

Set up single page or continuous page.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
displayMode: 'Continuous'
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
displayMode: 'Continuous'
});

documentLoaded()?

optional documentLoaded: () => void;

The callback that is invoked when a document is loaded entirely on the server.

Returns

void

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
documentLoaded: () => console.log('The document is loaded entirely on the server')
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
documentLoaded: () => console.log('The document is loaded entirely on the server')
});

element

element: string;

JQuery selector that specifies the element that hosts the JS Viewer control.

Examples

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

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

error()?

optional error: (error) => boolean;

The callback that is invoked when an error occurs in the process of displaying the report. The default error panel does not appear if the callback doesn't reurn proper object. The error parameter is an object that has a message property which allows the users to customize the error message and caption property which allows to customize error caption.

Parameters

error

ErrorInfo

Returns

boolean

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
error: (error) => {
	if (error.message) {
		// show error message.
		alert("Internal error! Please ask administrator.");
		// do not show default error message.
		return true;
	}
}
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
error: (error) => {
	if (error.message) {
		// show error message.
		alert("Internal error! Please ask administrator.");
		// do not show default error message.
		return true;
	}
}
});

initialZoomMode?

optional initialZoomMode: InitialZoomMode;

Set up the initial zoom mode.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
 initialZoomMode: 'FitToWidth';
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
 initialZoomMode: 'FitToWidth';
});

locale?

optional locale: string;

Specifies locale used for displaying Viewer. If locale is not specified explicitly here, the locale corresponding to the browser preferences is used.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
locale: 'ja-JP'
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
locale: 'ja-JP'
});

localeData?

optional localeData: JSON;

The JSON containing the localization strings. Not all strings are necessary — missing values ​​will be displayed using EN localization data.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
localeData: JSON.parse( `{
    "export":  {
      "boolTextFalse": "Нет",
      "boolTextTrue": "Да"
    },
    "viewer": {
      "toolbar": {
        "refresh": "Обновить"
      }
    }
  }`
)
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
localeData: JSON.parse( `{
    "export":  {
      "boolTextFalse": "Нет",
      "boolTextTrue": "Да"
    },
    "viewer": {
      "toolbar": {
        "refresh": "Обновить"
      }
    }
  }`
)
});

localeUri?

optional localeUri: string;

The url of the file containing the localization strings. Not all strings are necessary — missing values ​​will be displayed using EN localization data.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
localeUri: './locale.json'
});

locale.json:

{
  "export": {
    "boolTextFalse": "Нет",
    "boolTextTrue": "Да",
    ...
  },
  "exportcsv": {
    "friendlyName": "-CSV-",
    "settings": {
      "ColumnsDelimiter": {
        "label": "Разделитель Столбцов",
        "category": "Прочее"
      },
      ...
    },
    ...
  },
  ...
}

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
localeUri: './locale.json'
});

locale.json:

{
  "export": {
    "boolTextFalse": "Нет",
    "boolTextTrue": "Да",
    ...
  },
  "exportcsv": {
    "friendlyName": "-CSV-",
    "settings": {
      "ColumnsDelimiter": {
        "label": "Разделитель Столбцов",
        "category": "Прочее"
      },
      ...
    },
    ...
  },
  ...
}

onAction()?

optional onAction: (action) => Promise<ActionResult>;

The callback that is triggered before the JS Viewer executes an action.

Parameters

action

ActionInfo

An object containing details about the action being triggered.

Returns

Promise<ActionResult>

A promise that resolves to an ActionResult, determining how the action should be handled.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
onAction: async (action) => {
		if (action.type === 'hyperlink') {
			return { cancel: true }; // Prevent opening the link
		}
		return { cancel: false };
	}
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
onAction: async (action) => {
		if (action.type === 'hyperlink') {
			return { cancel: true }; // Prevent opening the link
		}
		return { cancel: false };
	}
});

pageView?

optional pageView: PageViewOptions;

Defines horizontal alignment and view for report page like part of the WebPage or 'paper view'

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
pageView: {
	horizontalAlignment: 'left',
	viewMode: 'standard'
}
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
pageView: {
	horizontalAlignment: 'left',
	viewMode: 'standard'
}
});

panelsLocation?

optional panelsLocation: PanelsLocation;

The position of panels (search, parameters etc): 'toolbar' or 'sidebar'. Default value is 'toolbar'.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
panelsLocation: 'sidebar'
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
panelsLocation: 'sidebar'
});

parametersPanel?

optional parametersPanel: ParametersPanelSettings;

Set up the parameters panel settings.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
parametersPanel: {
	* location: 'top',
 * open: 'always'
}});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
parametersPanel: {
	* location: 'top',
 * open: 'always'
}});

renderFormat?

optional renderFormat: RenderFormat;

Set up render mode: 'auto', 'html' or 'svg'

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
 renderFormat : 'auto'
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
 renderFormat : 'auto'
});

renderMode?

optional renderMode: RenderMode;

Set up initial render mode: 'Paginated' or 'Galley'. Default value is 'Paginated'.

Examples

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
renderMode: 'Galley'
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
renderMode: 'Galley'
});

reportID?

optional reportID: string;

The id of the report to be shown by the JS Viewer.

Examples

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

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

reportItemsStyles?

optional reportItemsStyles: ReportItemsStyles;

Specifies custom css styles that will be applied to the report items.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
    reportItemsStyles: {
         cssUri: 'custom-styles.css'
    }
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
    reportItemsStyles: {
         cssUri: 'custom-styles.css'
    }
});

reportLoaded()?

optional reportLoaded: (reportInfo) => void;

The callback that is invoked when the JS Viewer obtains the information about the requested report.

Parameters

reportInfo

ReportInfo

Returns

void

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
reportLoaded: (reportInfo) => console.log('The report ' + reportInfo.name + ' was successfully loaded!')
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
reportLoaded: (reportInfo) => console.log('The report ' + reportInfo.name + ' was successfully loaded!')
});

reportParameters?

optional reportParameters: Parameter[];

The array of the {name, value} pairs that describe the parameters values used to run the report.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
reportParameters: [{ name: 'ReportParameter1', values: ['1']}]
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
reportParameters: [{ name: 'ReportParameter1', values: ['1']}]
});

reportService?

optional reportService: ReportServiceSettings;

Set up the settings to connect the Web API.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
reportService: {
	url: 'http://example.com/api/reporting',
	securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',
}
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
reportService: {
	url: 'http://example.com/api/reporting',
	securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',
}
});

silentPrint?

optional silentPrint: boolean;

JQuery selector that specifies the element that hosts the JS Viewer control.

Examples

// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
silentPrint: true
});

// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
silentPrint: true
});

themes?

optional themes: ThemeSettings;

Viewer's UI themes settings.

Examples

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

var viewer = GrapeCity.ActiveReports.JSViewer.create({
    themes: {
        initialTheme: 'defaultDark',
   }
});