Customize the Document Viewer Toolbar

• Mar 15, 2024
• 4 minutes to read

Remove the Toolbar

Handle the client-side ASPxClientWebDocumentViewer.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>
@Html.DevExpress().WebDocumentViewer(settings =>
{
    settings.Name = "WebDocumentViewer1";
    settings.ClientSideEvents.CustomizeElements = "onCustomizeElements";
}).Bind("XtraReport1").GetHtml()

Hide Export Formats

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

Add and Remove Commands

Note

The complete sample project is available in the following DevExpress Examples repository on GitHub: How to customize the Web Document Viewer toolbar.

Handle the client-side CustomizeMenuActions event to customize toolbar commands at runtime.

The event argument provides access to the Actions collection that contains all the available Document Viewer commands. You can add new commands to the collection and modify the existing commands. To obtain an existing command, call the event argument’s GetById method and pass the corresponding ActionId value as a parameter.

Each command exposes the properties listed in the table below.

Option	Description
Disabled	Specifies whether the command is disabled.
HasSeparator	Specifies whether the command has a visual separator.
HotKey	Specifies the keyboard shortcut to invoke the command
ImageClassName ImageTemplateName	Use one of these options to specify the command’s icon: ImageClassName for an icon declared as a CSS class. ImageTemplateName for an icon declared as an HTML template.
JSClickAction	Specifies the client-side action to perform when the command is invoked.
Text	Specifies the command’s tooltip.
Visible	Specifies whether the command is visible in the user interface.

The following example demonstrates how to hide the existing Highlight Editing Fields toolbar command and add a new Run Slide Show command that navigates through document pages.

Razor

<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 "Highlight Editing Fields" action and hide it.
        var highlightEditingFieldsAction = e.GetById(DevExpress.Reporting.Viewer.ActionId.HighlightEditingFields);
        if (highlightEditingFieldsAction)
            highlightEditingFieldsAction.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>

@Html.DevExpress().WebDocumentViewer(settings => {
    settings.Name = "WebDocumentViewer1";
    settings.ClientSideEvents.CustomizeMenuActions = "customizeMenuAction";
}).Bind(new MyReport()).GetHtml()

The image below shows the resulting toolbar.

Declare a Custom Command’s Icon

You can use two ways to provide a command’s icon.

HTML Templates for SVG Images (Recommended)

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

The following example demonstrates how to declare a sample HTML template. This template uses the predefined dxd-icon-fill CSS class to color the icon automatically according to the selected scheme.

Razor

<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 declared template to the command’s ImageTemplateName property.

CSS Classes

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

Note

This approach does not allow you to apply color schemes to icons.

1. Create an image file (24x24 pixels) and add it to the project (for instance, SlideShow.png).

2. Add a new CSS file (SlideShow.css) and declare the CSS class to specify the custom command icon.

   CSS

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

3. Link the added CSS file in your View file.

   Razor

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

4. Assign the declared CSS class to the command’s ImageClassName property.