xtrareports-117150-web-reporting-asp-net-webforms-reporting-document-viewer-in-asp-net-webforms-reporting-customization-customize-the-document-viewer-toolbar.md
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:
<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>
<dx:ASPxWebDocumentViewer ClientInstanceName="WebDocumentViewer1" ID="ASPxWebDocumentViewer1" runat="server">
<ClientSideEvents CustomizeElements ="onCustomizeElements" />
</dx:ASPxWebDocumentViewer>
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.
Handle the CustomizeMenuActions event to add a custom menu item to the Export To drop-down list:
View Example: Web Document Viewer for ASP.NET Web Forms - Add PowerPoint Export Format
<script type="text/javascript">
function CustomizeMenuActions(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);
}
});
}
}
</script>
<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server">
<ClientSideEvents CustomizeMenuActions="CustomizeMenuActions" />
</dx:ASPxWebDocumentViewer>
Do the following to add a new toolbar command at design time:
Switch to the Design view, click the Document Viewer’s smart tag, and select Designer.
Activate the Menu Items tab in the invoked ASPxWebDocumentViewer Designer.
Click the Add button to add a new command. This creates a new WebDocumentViewerMenuItem object and adds it to the ASPxWebDocumentViewer.MenuItems collection. Specify the command’s settings in the Item Properties list.
Click OK to apply changes and close the dialog.
Add the slideshow image template to the page markup:
<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>
View Example: Customize the Web Document Viewer Toolbar
Handle the client-side ASPxClientWebDocumentViewer.CustomizeMenuActions event to customize 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.
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.
<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>
<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server">
<ClientSideEvents CustomizeMenuActions="customizeMenuAction" />
</dx:ASPxWebDocumentViewer>
The image below shows the resulting toolbar.
The following two techniques allow you to specify an icon for a command.
This technique 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.
<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.
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.
Create an image file (24x24 pixels) and add it to the project (for instance, SlideShow.png ).
Add a new CSS file ( SlideShow.css ) and declare the CSS class to specify the custom command icon.
Link the added CSS file in your ASPX page.
Assign the declared CSS class to the command’s ImageClassName property.