Customize the Document Viewer Toolbar in ASP.NET Core Application

• Aug 23, 2023
• 3 minutes to read

Remove the Toolbar

Handle the client-side WebDocumentViewerClientSideEventsBuilder.CustomizeElements event, get the Toolbar element by its PreviewElements ID and remove the Toolbar from the collection of UI elements:

Viewer.cshtml

 <script type="text/javascript">
    function onCustomizeElements(s, e) {
        var toolbarPart = e.GetById(DevExpress.Reporting.Viewer.PreviewElements.Toolbar);
        var index = e.Elements.indexOf(toolbarPart);
        e.Elements.splice(index, 1);
    }
</script>
@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .ClientSideEvents(configure =>
        {
            configure.CustomizeElements("onCustomizeElements");
        })
        .Height("1000px")
        .Bind("XtraReport1");
    @viewerRender.RenderHtml()
}

Hide Export Formats

Handle the client-side CustomizeExportOptions event and use the ASPxClientCustomizeExportOptionsEventArgs.HideFormat(format) method to remove the specified export format from the Export To drop-down list.

Customize Toolbar Commands

Handle the client-side CustomizeMenuActions event to customize toolbar commands. In the event handler you can access the IPreviewModel object (the sender) and the ASPxClientCustomizeMenuActionsEventArgs object (the argument).

The argument’s Actions property contains the available Document Viewer commands. You can modify commands in the collection and add new commands. To get access to a built-in command, call the GetById method and pass the ActionId value as a parameter.

A command implements the IAction interface. When you get access to a command, use the IAction properties to customize the command.

The following code hides the built-in Previous Page and Next Page toolbar commands, and adds a new Run Slide Show command that navigates through the document pages.

Note

The imageTemplateName property specifies a custom command SVG icon defined in the Index.html file. For more information, review the following help topic section: SVG Image in HTML Template.

The customized toolbar is shown in the image below.

Viewer.cshtml

<script type="text/html" id="slideshow">
    <svg version="1.1" id="Layer_1"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     x="0px" y="0px" viewBox="0 0 24 24" 
     style="enable-background: new 0 0 24 24;" 
     xml:space="preserve">
        <polygon class="dxd-icon-fill" points="4,2 4,22 22,12 " />
    </svg>
</script>
<script type="text/javascript">
    function customizeMenuAction(s, e) {
        // Get the page navigation actions and hide them.
        var actionPrevPage = e.GetById(DevExpress.Reporting.Viewer.ActionId.PrevPage);
        if (actionPrevPage)
            actionPrevPage.visible = false;
        var actionNextPage = e.GetById(DevExpress.Reporting.Viewer.ActionId.NextPage);
        if (actionNextPage)
            actionNextPage.visible = false;

        // Add a new action.
        var interval;
        var selected = ko.observable(false);
        e.Actions.push({
            text: "Run Slide Show",
            imageTemplateName: "slideshow",
            visible: true,
            disabled: false,
            selected: selected,
            hasSeparator: false,
            hotKey: { ctrlKey: true, keyCode: "Z".charCodeAt(0) },
            clickAction: function () {
                if (selected()) {
                    clearInterval(interval);
                    selected(false);
                    return;
                }
                var model = s.GetPreviewModel();
                if (model) {
                    selected(true);
                    interval = setInterval(function () {
                        var pageIndex = model.GetCurrentPageIndex();
                        model.GoToPage(pageIndex + 1);
                    }, 2000);
                }
            }
        });
    }
</script>
@{
    var documentViewer = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("1000px")
        .ClientSideEvents(configure => { configure.CustomizeMenuActions("customizeMenuAction"); })
        .Bind("Report");
}
@documentViewer

Specify a Custom Command Icon

You can use one of the following methods to assign a picture to a command:

SVG Image in HTML Template

This method allows you to apply a color scheme to SVG icons and make them consistent with the Document Viewer control’s color scheme.

The following code is a sample HTML template for an SVG image. The template uses a predefined CSS class dxd-icon-fill to paint the icon according to the selected color scheme.

index.html

<script type="text/html" id="slideshow">
    <svg version="1.1" id="Layer_1"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     x="0px" y="0px" viewBox="0 0 24 24" 
     style="enable-background: new 0 0 24 24;" 
     xml:space="preserve">
        <polygon class="dxd-icon-fill" points="4,2 4,22 22,12 " />
    </svg>
</script>

Assign the template to the command’s imageTemplateName property.

CSS Classes

You can add icons as CSS classes with background images (SVG and PNG).

Note

This method does not apply color schemes to icons automatically.

Follow the steps below to specify an icon for the Run Slide Show command:

1. Create an image file (SlideShow.png - 24x24 pixels).

2. Create a CSS file (SlideShow.css) with the following content:

   SlideShow.css

   .slideShow {
   background-image: url('../SlideShow.png');
   background-repeat: no-repeat;
   }
   

3. Link the CSS file to the View file:

   CSHTML

   ...
   <link href="~/SlideShow.css" rel="stylesheet" />
   

4. Assign the slideShow CSS class to the command’s imageClassName property.