ContextQMD
Back to Devexpress

Customize Toolbar

xtrareports-405648-web-reporting-blazor-reporting-web-document-viewer-customization-customize-the-toolbar.md

latest6.4 KB
Original Source

Customize Toolbar

  • Feb 09, 2026
  • 3 minutes to read

This topic lists customization scenarios for the Blazor Web Document Viewer toolbar.

Hide Export Formats

Handle the client-side CustomizeExportOptions event and use the HideFormat(format) method to remove the specified export format.

The following code snippet removes the XLS format from the Export To drop-down list and from the Export Options panel:

javascript
window.ViewerCustomization = {
    onCustomizeExportOptions: function (s, e) {
        e.HideFormat(DevExpress.Reporting.Viewer.ExportFormatID.XLS); 
    }
}
cshtml
<head>
    @...@
    @DxResourceManager.RegisterScripts((config) => config.Register(new DxResource("/customization.js", 900)))
    @...@
</head>
razor
<DxDocumentViewer ReportName="SampleReport" Height="1000px" Width="100%">
    <DxDocumentViewerCallbacks CustomizeExportOptions="ViewerCustomization.onCustomizeExportOptions" />
</DxDocumentViewer>

Add a New Export Format

Handle the CustomizeMenuActions event to add a custom menu item to the Export To drop-down list:

javascript
window.ViewerCustomization = {
    onCustomizeMenuActions: function (s, e) {
        const actionExportTo = e.GetById(DevExpress.Reporting.Viewer.ActionId.ExportTo);
        const newFormat = { format: 'powerPoint', text: 'Power Point' };
        if (actionExportTo) {
            actionExportTo.events.on('propertyChanged', (args) => {
                const formats = actionExportTo.items[0].items;
                if (args.propertyName === 'items' && formats.indexOf(newFormat) === -1) {
                    formats.push(newFormat);
                }
            });
        }
    }
}
cshtml
<head>
    @...@
    @DxResourceManager.RegisterScripts((config) => config.Register(new DxResource("/customization.js", 900)))
    @...@
</head>
razor
<DxDocumentViewer ReportName="SampleReport" Height="1000px" Width="100%">
    <DxDocumentViewerCallbacks CustomizeMenuActions="ViewerCustomization.onCustomizeMenuActions" />
</DxDocumentViewer>

Customize Toolbar Commands

Handle the client-side CustomizeMenuActions event to add 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.

The customized toolbar is shown in the image below.

javascript
window.ViewerCustomization = {
    onCustomizeMenuActions: function (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);
                }
            }
        });
    }
}
cshtml
<head>
    @...@
    @DxResourceManager.RegisterScripts((config) => config.Register(new DxResource("/customization.js", 900)))
    @...@
    <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>
</head>
razor
<DxDocumentViewer ReportName="SampleReport" Height="1000px" Width="100%">
    <DxDocumentViewerCallbacks CustomizeMenuActions="ViewerCustomization.onCustomizeMenuActions" />
</DxDocumentViewer>