All docs
V21.1
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Customize the Document Viewer Toolbar in Angular Application

  • 4 minutes to read

Remove the Toolbar

Use the CustomizeElements callback to get the Toolbar element by its PreviewElements ID and remove the Toolbar from the collection of UI elements:

 

report-viewer.html

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (CustomizeElements)="onCustomizeElements($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { PreviewElements } from 'devexpress-reporting/dx-webdocumentviewer'
import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';


@Component({
    selector: 'report-viewer',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './report-viewer.html',
    styleUrls: [
        "../../../node_modules/jquery-ui/themes/base/all.css",
        "../../../node_modules/devextreme/dist/css/dx.common.css",
        "../../../node_modules/devextreme/dist/css/dx.light.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
        "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
  ]
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "XtraReport1";
    invokeAction: string = '/DXXRDV';

    onCustomizeElements(event) {
        var toolbarPart = event.args.GetById(PreviewElements.Toolbar);
        var index = event.args.Elements.indexOf(toolbarPart);
        event.args.Elements.splice(index, 1); 
    }

    constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

Hide Export Formats

Use the CustomizeExportOptions callback and call the ASPxClientCustomizeExportOptionsEventArgs.HideFormat(format) method to remove the specified export format from the Export To drop-down list.

Customize Toolbar Commands

Use the CustomizeMenuActions callback to customize toolbar commands.

The callback event argument provides access to the JSReportViewer object that is the sender and to the ASPxClientCustomizeMenuActionsEventArgs object that is 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. Use the imageTemplateName property to specify a custom command icon - as described in the following section: SVG Image in HTML Template.

The customized toolbar is shown in the image below.

 

report-viewer.html

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (CustomizeMenuActions)="CustomizeMenuActions($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { ActionId } from 'devexpress-reporting/dx-webdocumentviewer'
import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

import * as ko from 'knockout';

@Component({
    selector: 'report-viewer',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './report-viewer.html',
    styleUrls: [
        "../../../node_modules/jquery-ui/themes/base/all.css",
        "../../../node_modules/devextreme/dist/css/dx.common.css",
        "../../../node_modules/devextreme/dist/css/dx.light.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
        "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
  ]
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "XtraReport1";
    invokeAction: string = '/DXXRDV';

    CustomizeMenuActions(event) {
        // Get the page navigation actions and hide them.
        var actionPrevPage = event.args.GetById(ActionId.PrevPage);
        if (actionPrevPage)
            actionPrevPage.visible = false;
        var actionNextPage = event.args.GetById(ActionId.NextPage);
        if (actionNextPage)
            actionNextPage.visible = false;

        // Add a new action.
        var interval;
        var selected = ko.observable(false);
        event.args.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 = event.sender.GetPreviewModel();
                if (model) {
                    selected(true);
                    interval = setInterval(function () {
                        var pageIndex = model.GetCurrentPageIndex();
                        model.GoToPage(pageIndex + 1);
                    }, 2000);
                }
            }
        });
    }

    constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

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.

<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 {
    background-image: url(../SlideShow.png);
    background-repeat: no-repeat;
    }
    
  3. Link the CSS file to the View file:

    ...
    <link href="~/SlideShow.css" rel="stylesheet" />
    
  4. Assign the slideShow CSS class to the command’s imageClassName property.