Customize Toolbar
- 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:
window.ViewerCustomization = {
onCustomizeExportOptions: function (s, e) {
e.HideFormat(DevExpress.Reporting.Viewer.ExportFormatID.XLS);
}
}
Add a New Export Format
Handle the CustomizeMenuActions event to add a custom menu item to the Export To drop-down list:
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);
}
});
}
}
}
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.
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);
}
}
});
}
}