Document Viewer - Disable options in header

11/3/2023 at 6:46 AM

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;
    viewerWindow.$("#backPage").hide();
    viewerWindow.$("#forwardPage").hide();
}

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

Patrick

Cem Alacayir Replied

4/3/2024 at 1:49 AM

Employee Post Marked As Answer

Note that some UI elements are already hidden when denied via DocumentViewer's permissions:

https://docs.gleamtech.com/documentultimate/html/T_GleamTech_DocumentUltimate_AspNet_UI_DocumentViewerPermissions.htm

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"/>
    <title></title>

    <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
            viewerWindow.$(".ui-widget-header.toolbar").css({
                "background-color": "#f8f8f8",
                "border-bottom": "1px solid #ddd"
            });

            // toolbar size
            viewerWindow.$(".group").css({
                "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:
            viewerWindow.$("#tabMenu").css({
                "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"
            });
        }
    </script>
</head>
<body>
    <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" />

       </GleamTech:DocumentViewerControl>

    </form>
</body>
</html>

2 Replies

Reply to Thread

Related Knowledge Base Articles

2 Replies

Reply to Thread

Tags

Related Knowledge Base Articles