Working with HTML Viewer using Javascript

In order to work with HTML viewer using the Javascript, you need to follow a set of procedures. This involves calling the Loaded event first and then obtaining an instance of the ViewerViewModel. Once you have access to the ViewerViewModel, use its API methods and properties to work with the HTML Viewer.

Loaded Event

HtmlViewer raises a Loaded event to notify the listeners that the internal initialization is complete. Following is the sample code to raise a Loaded event:

$(document).ready(function () {

    $('#' + clientId).bind('loaded', function(){

    ...

    });

    });

Note: You can obtain the ClientId from the WebViewer control.

ViewerViewModel

In order to work with the API, obtain an instance of the ViewerViewModel first, using the GetViewModel(clientId) javascript function that searches ViewerViewModel array through the clientId. This function throws an exception if there is no ViewerViewModel with the requested clientId available.

Use code like the following to call an instance of the ViewerViewModel:

var viewModel = GetViewModel(clientId);

After obtaining the ViewerViewModel, the code can call API methods and properties.

Methods/Properties Example Description

Sidebar this.Sidebar Gets the Sidebar view model instance.

Toolbar this.Toolbar Gets the Toolbar view model instance.

PageLoaded this.PageLoaded(false); Gets the Boolean value indicating whether the page was loaded or not.

Export

this.Export(exportType, callback, saveAsDialog, settings) this.Export(ExportType.Pdf, callback, true, {FileName:"report.pdf"});

Exports the loaded page to a 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 in the FileName keyword that is case-sensitive.

Note: ExportType is an Enumeration.
var ExportType = { Pdf, Html, Word, Xls, Xml };

Print this.Print() Prints the report using pdf printing. In order to print without any errors the PageLoaded() property must be True.

SidebarViewModel

Methods/Properties	Example	Description
IsSidebarVisible	`this.IsSidebarVisible(false);`	Gets the Boolean value for entire sidebar visibility.
HideShowSidebar	`this.HideShowSidebar()`	Toggles Sidebar's visibility.
IsBookmarksPaneVisible	`this.IsBookmarksPaneVisible(false);`	Gets the Bookmarks Pane's visibility.
ShowBookmarksPane	`this.ShowBookmarksPane()`	Toggles Bookmarks Pane's visibility.
IsParametersPaneVisible	`this.IsParametersPaneVisible(false);`	Gets the Parameters Pane's visibility.
ShowParametersPane	`this.ShowParametersPane()`	Toggles Parameters Pane's visibility.
IsSearchPaneVisible	`this.IsSearchPaneVisible(false);`	Gets the Search Pane's visibility.
ShowSearchPane	`this.ShowSearchPane()`	Toggles Search Pane's visibility.
HideAll	`this.HideAll()`	Hides all Sidebar panes.

ToolbarViewModel

Walkthroughs

Customizing the HTML Viewer UI