Customize the Document Viewer Toolbar in an Angular Application
- 5 minutes to read
For information on general techniques that allows you to customize Reporting component UI elements, review the following help topic: Use Custom HTML Templates.
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/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
The following code snippet removes the XLS format from the Export To drop-down list and from the Export Options panel:
report-viewer.html
<div>
<dx-report-viewer [reportUrl]="reportUrl" height="800px">
<dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
</dxrv-request-options>
<dxrv-callbacks (CustomizeExportOptions)="OnCustomizeExportOptions($event)">
</dxrv-callbacks>
</dx-report-viewer>
</div>
report-viewer.ts
import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'
import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';
@Component({
// ...
})
export class ReportViewerComponent {
@ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
reportUrl: string = "TestReport";
invokeAction: string = '/DXXRDV';
OnCustomizeExportOptions(event) {
e.HideFormat(ExportFormatID.XLS);
}
constructor(@Inject('BASE_URL') public hostUrl: string) { }
}
Customize Toolbar Commands
Use the CustomizeMenuActions callback to customize toolbar commands.
The callback event argument provides access to the JSReportViewer object (the sender) and to 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.
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';
@Component({
selector: 'report-viewer',
encapsulation: ViewEncapsulation.None,
templateUrl: './report-viewer.html',
styleUrls: [
"../../../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 = 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:
Create an image file (SlideShow.png - 24x24 pixels).
Create a CSS file (SlideShow.css) with the following content:
.slideShow { background-image: url('../SlideShow.png'); background-repeat: no-repeat; }Link the CSS file to the View file:
... <link href="~/SlideShow.css" rel="stylesheet" />Assign the slideShow CSS class to the command’s imageClassName property.
A general technique that allows you to customize the UI elements in Reporting components: Use Custom HTML Templates.
Disable Command Hotkey
Use the CustomizeMenuActions callback to obtain the desired command and set its hotKey property to null to release the shortcut associated with this command:
report-viewer.html
<dx-report-viewer [reportUrl]="reportUrl">
<dxrv-callbacks (CustomizeMenuActions)="CustomizeMenuActions($event)"></dxrv-callbacks>
</dx-report-viewer>
report-viewer.ts
import { ActionId } from 'devexpress-reporting/dx-webdocumentviewer'
...
CustomizeMenuActions(e) {
var searchAction = e.args.GetById(ActionId.Search);
if (searchAction)
searchAction.hotKey = null;
}