Document Viewer - Disable options in header
Question asked by Pratik Shroff - 9/20/2023 at 8:37 AM

We want to disable some option header for document viewer. Is there any properties we can enable and disable options in header or disable complete header.


2 Replies

Reply to Thread
Patrick Riehmers Replied
Hello Pratik,

i'm not sure if this an official way to do, but we use the ClientEvent "Loaded" 
ClientEvents = new DocumentViewerClientEvents
    Loaded = "pdfViewerLoadEvent"
and get into the Window over JS with jQuery to hide some Options
function pdfViewerLoadEvent(sender, e) {
    var documentViewer = sender;
    var viewerWindow = document.getElementById(documentViewer.rcId).contentWindow;
For the complete Header you can use the CSS Selector ".ui-widget-header" or ".toolbar", the div has both classes.

Hopefully that helps.

Best regards
Cem Alacayir Replied
Employee Post Marked As Answer
Note that some UI elements are already hidden when denied via DocumentViewer's permissions:

For other UI elements:
As of current version, viewer is rendered in an iframe so your CSS defined in the host page will not propagate to iframe.

So Patrick is right, you should access the iframe in DocumentViewer's client/js load event and then change CSS styles there. Here is an example:

<%@ Register TagPrefix="GleamTech" Namespace="GleamTech.DocumentUltimate.AspNet.WebForms" Assembly="GleamTech.DocumentUltimate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">;
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">
        function documentViewerLoad(sender, e) { 
            //sender parameter will be the DocumentViewer instance
            var documentViewer = sender; 

            //get reference to iframe window
            var viewerWindow = documentViewer.iframe.contentWindow;
            //or in older versions:
            //var viewerWindow = document.getElementById(documentViewer.rcId).contentWindow;

            //toolbar colors
                "background-color": "#f8f8f8",
                "border-bottom": "1px solid #ddd"

            // toolbar size
                "margin-top": "0",
                "margin-bottom": "0",
                "padding-top": "1px",
                "padding-bottom": "1px"

            //input boxes size
            viewerWindow.$(".ui-widget-header.toolbar input").css({
                "font-size": "13px",
                "height": "20px"

            //If you also want the left tab bar style to match right toolbar:
                "padding-top": "0",
                "padding-bottom": "0",
                "background-color": "#f8f8f8",
                "border-bottom": "1px solid #ddd"

            viewerWindow.$(".ui-tabs-anchor > span").css({
                "padding-top": "13px",
                "padding-bottom": "12px"
    <form id="form1" runat="server">

        <GleamTech:DocumentViewerControl ID="documentViewer" runat="server" CssClass="file-viewer"
            Width="100%" Resizable="False" DisplayMode="InPlace"  
            MobileMode="OnAny" PageFitMode="Zoom" PageLayoutMode="Continuous" PageZoomLevel="100"
            DeniedPermissions="Download, DownloadAsPdf, Print, SelectText, GoFullScreen, FillForms, ViewAttachments, NavigateHistory">

         <ClientEvents Loaded="documentViewerLoad" />



Reply to Thread