ActiveReports 12
Using Javascript with the HTML Viewer
ActiveReports 12 > ActiveReports User Guide > Viewing Reports > ASP.NET > Using Javascript with the HTML Viewer

To use JavaScript with the WebViewer, initialize the WebViewer's view model using the clientId returned from the WebViewer, and subscribe to its Loaded event. Once you initialize the view model, you can access its API methods and properties to modify the WebViewer. You can also use the same view model to access the API for the side bar search panel and the toolbar.

Loaded Event

The WebViewer raises the Loaded event to notify listeners that internal initialization is complete. The following code subscribes to the Loaded event of the viewer with the specified clientId.

$(document).ready(function () {
  $('#' + clientId).bind('loaded', function(){
Note: You can get the ClientId from the WebViewer control. By default, it's WebViewer1.


To work with the API, first initialize the viewer's view model using the GetViewModel(clientId) function. The clientId is the WebViewer control's name, by default, WebViewer1. If there is no ViewerViewModel with the requested clientId, an exception occurs.

Use code like the following to initialize the ViewerViewModel:

var viewModel = GetViewModel(clientId);

Now you can access API methods and properties using the viewModel variable.

Methods/Properties Example Description
Sidebar viewModel.Sidebar; Gets the Sidebar view model.
Toolbar viewModel.Toolbar; Gets the Toolbar view model.
PageLoaded viewModel.PageLoaded; Gets a Boolean value indicating whether the page is loaded.
Export viewModel.Export(exportType, callback, saveAsDialog, settings);viewModel.Export(ExportType.Pdf, callback, true, {FileName:"report.pdf"});

Exports the loaded page to the specified format. In order to export without any errors, the PageLoaded() property must be True.

  • exportType: Requested output format.
  • callback: Function which obtains the URI of the exported document.
  • saveAsDialog: Optional request to show save as dialog after export.
  • settings: Optional export settings. Here you can specify the exported file name. Note that the FileName keyword is case sensitive.
Note: ExportType is an Enumeration.
var ExportType = { Pdf, Html, Word, Xls, Xml };
Print viewModel.Print(); Prints the report using pdf printing. In order to print without any errors the PageLoaded() property must be True.
RenderMode viewModel.RenderMode = "Galley";

Provides viewer mode:

  • Paginated: displays a report in which data is displayed in discrete pages
  • Galley: displays an RDL report by removing automatic page breaks from a report and displaying data in a single scrollable page. This mode maintains page breaks you create in the report.


The SidebarViewModel allows you to use its properties and methods to get the current state and show or hide the sidebar and panels within the sidebar.

Use code like the following to get the SidebarViewModel from the ViewerViewModel:

var sideBarModel = viewModel.Sidebar;

Now you can access API methods and properties using the sideBarModel variable.

Methods/Properties Example Description
IsSidebarVisible sideBarModel.IsSidebarVisible = false; Gets or sets a Boolean value indicating whether the Sidebar is visible.
HideShowSidebar sideBarModel.HideShowSidebar(); Toggles the visibility of the Sidebar.
IsBookmarksPaneVisible sideBarModel.IsBookmarksPaneVisible = false; Gets or sets a Boolean value indicating whether the Bookmarks Pane is visible.
ShowBookmarksPane sideBarModel.ShowBookmarksPane(); Toggles the visibility of the Bookmarks Pane.
IsParametersPaneVisible sideBarModel.IsParametersPaneVisible = false; Gets or sets a Boolean value indicating whether the Parameters Pane is visible.
ShowParametersPane sideBarModel.ShowParametersPane(); Toggles the visibility of the Parameters Pane.
IsSearchPaneVisible sideBarModel.IsSearchPaneVisible = false; Gets or sets a Boolean value indicating whether the Search Pane is visible.
ShowSearchPane sideBarModel.ShowSearchPane(); Toggles the visibility of the Search Pane.
HideAll sideBarModel.HideAll(); Hides all Sidebar Panes.
See Also