Using Javascript with the HTML Viewer

Show All

Hide All

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.

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.

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 allows you access to its various properties and methods to get the current state and show/hide sidebar and sidebar panels.

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.

Walkthroughs

Customizing the HTML Viewer UI