Description: The callback that is invoked before the JSViewer opens the hyperlink, bookmark link, drill-down report, or toggles the report control visibility.

Type: function(actionType, actionParams)

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    action: (actionType, actionParams) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams)
});

Description: The animation options in report preview.

Type: The object and the properties available are:

• loadChart
  Property: enabled
  Type: Boolean (default 'false')
  
• hoverChart
  Property: enabled
  Type: Boolean (default 'false')
  
• hoverTable
  Property: enabled
       Type: Boolean (default 'false')
  
  Property: backgroundColor
      Type: String
      Accepted Value: Any
  
  Property: textColor
     Type: String
     Accepted Value: Any

See Animation topic for more information.

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    animation: {
        hoverTable: {
            enabled: true,
            backgroundColor: 'LightGray',
            textColor: 'DarkGray'
        },
        loadChart: {
            enabled: true
        },
        hoverChart: {
            enabled: true
        }
    }
});

Description: When set to 'true', the background color of the viewing area is filled with the report's body color. This property is available only for RDL Dashboard reports.

Type: Boolean

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    autoBackgroundColor: true
});

Description: The array of export types available via the Export functionality of JSViewer. By default, the Mht, Pdf, Tiff, Xls, Xlsx, Csv, Doc, Docx, Json, Xml, TextPrint, XlsxData, and CsvData exports are available for Page/RDL reports.

For Section Reports, the Mht, Pdf, Tiff, Xls, Xlsx, Rtf, and Txt exports are available by default.

Type: Array

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    availableExports: ['Xml', 'Pdf', 'XlsxData', 'CsvData', 'Rtf', 'Xls', 'Xlsx']
});

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

See Custom Export Settings topic for details on the export formats and the description.

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    defaultExportSettings: {
    xls: {
        FileName: {
            value: "Filename_1",
            visible: false
        }   
    }
}

});

Description: Set up a single page or a continuous page.

Type:  String

Accepted Value: 'Single', 'Continuous'

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    displayMode: 'Continuous'
});

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

Type: function()

Returns: Void

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    documentLoaded: () => console.log('The document is loaded entirely on the server')
});

Description: JQuery selector that specifies the element that hosts the JSViewer control.

Type: String

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer'
});

Description: 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 returns true. The error parameter is an object that has a message property, which allows the users to customize the error message.

Type: function(error)

const viewer = GrapeCity.ActiveReports.JSViewer.create({    element: '#viewerContainer',    error: (error) => {
      if(error.message) {
      // show error message.
      alert("Internal error! Please ask administrator.");
      // do not show default error message.

  return true;
      }
  }});

Description: Set up the zoom mode or the percentage value at which the report should open in the viewer.

Accepted Value: 'FitToPage' | 'FitToWidth' | Percentage

/** Set FitToWidth zoom mode */
const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    initialZoomMode: 'FitToWidth'
});
/** Set Percentage 150% zoom mode */
const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    initialZoomMode: { percentage: 150; }
});

Percentage means zoom with 'percentage' type, with the value ranging from 25 to 300.

Description: Specifies predefined locale used for displaying the viewer. If locale is not specified explicitly here, the locale corresponding to the browser preferences is used. Localization can be done in three languages:       

Type: String

Accepted Value: 'en-US' (for English), 'ja-JP' (for Japanese), and 'zh-CN' (for Chinese)

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    locale: 'ja-JP'
 });

Description: The JSON containing the localization strings. All strings are not necessary - missing values are displayed using EN localization data. It is like localeUri, but instead of the path to localization data, localization data itself via JSON object is specified.

Type: JSON

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    localeData: JSON.parse( `{
    "export":  {
      "boolTextFalse": "いいえ",
      "boolTextTrue": "はい"
    },
    "viewer": {
      "toolbar": {
        "refresh": "更新"
      }
    }
  }`
)
});

Description: The url of the file containing the localization strings (custom-locale.json file). Not all strings are necessary - missing values ​​are displayed using EN localization data.

Type: String

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    localeUri: './custom-locale.json' 
});

Sample content of 'custom-locale.json':

{
  "export": {
    "boolTextFalse": "いいえ",
    "boolTextTrue": "はい",
    ...
  },
  "exportcsv": {
    "friendlyName": "-CSV-",
    "settings": {
      "ColumnsDelimiter": {
        "label": "列の区切り",
        "category": "その他"
      },
      ...
    },
    ...
  },
  ...
}

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

The properties available are:

Properties

• horizontalAlignment
  Type: String
  Accepted Values: 'left', 'right', 'center'
  
• viewMode
  Type: String
  Accepted Values: 'standard', 'noPaper'

See Customize Page View topic for more information.

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    pageView: {
        horizontalAlignment: 'left',
        viewMode: 'standard'
     }
});

Description: Sets the location of the panels (search panel, parameters panel, etc.) to the left side ('toolbar') or to the right side ('sidebar') of JSViewer. The default value is 'toolbar'.

Type: String

Accepted Value: 'toolbar', 'sidebar'

const viewer = GrapeCity.ActiveReports.JSViewer.create({     element: '#viewerContainer',     panelsLocation: 'sidebar'});

Description: Specifies the parameters panel settings.

The properties available are:

• location
  Adjusts the position of the parameters panel.

• • Type: String
  • Accepted Value: 'default', 'top'
• open
  Sets the parameters panel to be available by default, irrespective of whether a parameter is set to a default value or requires user input.
  • Type: String
  • Accepted Value: 'auto', 'always'

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    parametersPanel: {
        location: 'top',
        open: 'always'
     }
});            

If there is a parameter in a report, in the case of 'open' property set to:

• ‘auto’ - the parameters panel is initially opened only if there are parameters that need user input. The panel closes after all parameters are resolved and the preview button is clicked.

• 'always’ - the parameters panel is open always. The panel stays open even after the preview button is clicked.

Description: Set up the render format for a Page or an RDL report to 'html' or 'svg'.

Type: String

Accepted Values: 'html', 'svg'

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    renderFormat: 'svg'
});

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

Type: String

Accepted Values: 'Galley', 'Paginated'       

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    renderMode: 'Galley'
});

Description: The id of the report to be shown by the JSViewer. 

Type: String

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    reportID: 'AnnualReport.rdlx'
});

Description: The callback that is invoked when the JSViewer obtains the information about the requested report. The reportInfo object is passed in the callback including the TOC info, Parameters info, and the link to the rendered report result.

Type: function(reportInfo)

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    reportLoaded: (reportInfo) => console.log('The report ' + reportInfo.name + ' was successfully loaded!')
});

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

Type: Array

const viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    reportParameters: [{ name: 'ReportParameter1', values: ['1']}]
});

Description: Set up the settings to connect the Web API.

Type: Object that has the following optional properties:

• url: The url to connect the Web API.
  Type: String
  Example:

• • use prefix in url:
    

    url: '/api/reporting' // default value
    

  • use full URL:
    

    url: 'http:example.com/api/reporting'
    

• securityToken: The security key required to access the Web API.
  Type: String
  Example:
  

  securityToken: 'security_token'
  

• onRequest: Callback before any request. Takes the init argument that allows you to add an option before fetch a request, for example, to change the security token.
  Type: function
  Example:
  

  onRequest: (init) => init.headers.Authorization = 'security_token' 
  

  The init argument is an object that takes the following options:

  • credentials: Set request's credentials.
  • headers: Set request's headers.
  • signal: Set request's signal.

  Please see https://fetch.spec.whatwg.org/#requestinit for more information.

const viewer = GrapeCity.ActiveReports.JSViewer.create({
     element: '#viewerContainer',
     reportService: {
         url: 'http://example.com/api/reporting', //web service url
         securityToken: 'security_token', //provide securityToken
         onRequest: (init) => {       
           init.credentials = "include",
           init.headers = { "Cache-Control": "no-cache, no-store, must-revalidate", "Expires": "0", "Pragma": "no-cache", "Accept": "application/json" },
           init.signal = new AbortController().signal
     }       
 }
});

Description: Sets the display of the Preparing Print dialog.

Type: Boolean

Example:

const viewer = GrapeCity.ActiveReports.JSViewer.create({
  element: '#viewerContainer',
  silentPrint: true,
});

Description: Makes the viewer display the parent report of the drill-down report.
Return type Description: Void

viewer.backToParent()

Description: Removes the viewer content from the element.
Return type Description: Void

viewer.destroy()

Description: Exports the currently displayed report
Argument types description:

exportType: Specifies the export format

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

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

settings: The export settings are available for RenderingExtensions

Return type description: Void

Note: In Section Reports, the export settings are not enabled when exporting files using the rendering extensions. In Page Report and RDL report, the export settings are not enabled when exporting files to PDF using the export filter.

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

Description: Obtains the report TOC.
Return type description: TOC Tree

console.log(viewer.getToc())

Description: Makes the viewer display the specific page. Page numeration starts with 1.
Argument types description:

number: The page number to show.

Return type description: Void

var pageNumber = 3;
viewer.goToPage(pageNumber);

Description: Opens a report.
Argument types description:

reportID: String(reportName)

reportParameters: Array of Reports

Return type description: Void

const reportName = "Report.rdlx";
viewer.openReport(reportName);
//Or
//viewer.openReport(reportsArray[0]);

Description: Refreshes the report preview
Return type description: Void

viewer.refresh()

Description: A string that represents the current version of the JSViewer.
Return type description: String

console.log(GrapeCity.ActiveReports.JSViewer.version)

Description: Adds a custom toolbar item (button) to the desktop's toolbar. Similarly,

For fullscreen: viewer.toolbar.fullscreen.addItem()
For mobile: viewer.toolbar.mobile.addItem()

Argument types description: Belongs to ToolbarItem type, where

type ToolbarItem = { key: string; /** * @deprecated use icon instead */ iconCssClass?: string; icon?: Icon; text?: string; title?: string; checked?: boolean; enabled?: boolean; action?: (curr?: ToolbarItem) => Partial | void; onUpdate?: (args: ChangedEventArgs, curr: ToolbarItem) => Partial | void; } ;

Return type description: item: ToolbarItem

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
var pdfExportButton = {
key: '$pdfExportButtonKey',
iconCssClass: 'fa fa-file',
enabled: true,
action: function (item) {
console.log('Export to PDF function works here');
 },
onUpdate: function (arg, item) {
console.log('Something in viewer was updated, check/update button state here');
 }
 };
viewer.toolbar.desktop.addItem(pdfExportButton);
// OR
var btn = {
key: '$openDesigner',
iconCssClass: 'fa fa-folder',
text: 'ClickToSave',
enabled: true
 };
viewer.toolbar.desktop.addItem(btn);

Description: Updates an existing item in the desktop's toolbar. Similarly,

For fullscreen: viewer.toolbar.fullscreen.updateItem()
For mobile: viewer.toolbar.mobile.updateItem()

Argument types description:

Key: String: the toolbar item key of the default button or as it was specified in the addItem parameters.
itemUpdate: ToolbarItem: the new toolbar item settings.

Return type description: Void

const myPrintButton = {
            action: function (item) {
                alert('The print button was clicked');
            },
        };
viewer.toolbar.desktop.updateItem('$print', myPrintButton);
// $print - is default toolbar button.

Description:   Removes an existing item from the desktop's toolbar. Similarly,

For fullscreen: viewer.toolbar.fullscreen.removeItem()
For mobile: viewer.toolbar.mobile.removeItem()

Argument types description: String
Return type description: String

viewer.toolbar.desktop.removeItem('$pdfExportButtonKey');
// pdfExportButtonKey is the button added using addItem() method

Description: Sets the keys of the visible desktop's toolbar items and their order. Similarly,

For fullscreen: viewer.toolbar.fullscreen.layout()
For mobile: viewer.toolbar.mobile.layout()

Argument types description: Array of layout buttons

Return type description: String

// Change the layout of the toolbar - change the positions of buttons in the toolbar
var layout = ["$navigation", "$split", "$refresh", "$split", "$history", "$split", "$mousemode", "$zoom", "$fullscreen", "$split", "$print", "$singlepagemode", "$continuousmode", "$galleymode"]
viewer.toolbar.desktop.layout(layout);

Description: Toggles the toolbar visibility (hides or shows the toolbar).

Argument types description: boolean

Return type description: Pass true to switch toolbar ON, and vise-versa. Do not pass any value to toggle visibility

viewer.toolbar.toggle(false);//hide toolbar
viewer.toolbar.toggle(true);//show toolbar

Description: Toggles the sidebar visibility (hides or shows the sidebar).

Argument types description: boolean

Return type description: Pass true to switch sidebar ON, and vise-versa. Do not pass any value to toggle visibility

viewer.sidebar.toggle(false); //hide sidebar
viewer.sidebar.toggle(true); //show sidebar

Description: Returns identifiers of default and added buttons in the order in which they will be displayed in the toolbar.

Return type description: String

// get the order of keys and reverse it
viewer.toolbar.desktop.layout(viewer.toolbar.desktop.getKeys().reverse())

Description: Gets the currently displayed page number.
Return type description: An integer representing currently displayed page number

console.log(viewer.currentPage())

Description:  Gets the page count of the currently displayed report.
Return type description: An integer representing page count

console.log(viewer.pageCount())