Back to Community Threads
2
Document Viewer - Disable options in header
Question asked by Pratik Shroff - 9/20/2023 at 8:37 AM
Answered
Hi,

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.

Thanks,
Pratik

2 Replies

Reply to Thread
0
Patrick Riehmers Replied
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
0
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:

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>

Back to Community Threads

Reply to Thread