Control Declaration

Webforms

UnoViewer control is placed inside a container DIV element. Viewer will occupy full width and height of divUnoViewer element.

<div id="unoContainer">
       <asp:UnoViewer ID="ctlUno" runat="server"
       AutoClose="true" IncludeJQuery="true" TimeOut="10" DebugMode="false" />
</div>

The height of the container div is set via CSS.

#unoContainer 
{
    height: 95vh;
    width: 98vw;
}

On resizing or rotating the browser window, following JavaScript code is executed to set the container height. And the UnoViewer DOM will follow this.

var h = "innerHeight" in window ?
            window.innerHeight : document.documentElement.offsetHeight;
$("#unoContainer").height(h - 50); // Adjust as required on your page

MVC / Razor

The declaration in Razor file is similar to the Webforms version. The only difference is that instead of the server control, there is a HTML mark-up div_ctlDoc declared where eventually the UnoViewer will render.

<div id="unoContainer">
   <div id="div_ctlDoc"></div>
</div>

Following JavaScript code will create an instance of UnoViewer passing the viewerSettings JSON.

var objUno = $("#div_ctlDoc").unoViewer(viewerSettings);

Summary

We hope that you found the declaration part pretty simple and straight forward. You can download our samples for more information and a live demo. There are lots of client side JavaScript API calls that will be discussed in the upcoming articles.