xtrareports-405653-web-reporting-blazor-reporting-web-report-designer-customization-customize-toolbar-and-menu.md
This document describes how to customize commands in the Report Designer’s toolbar and menu.
Handle the CustomizeMenuActions event to add new commands or remove existing ones from the Report Designer’s menu and toolbar.
Use the event argument to access the Actions collection that contains all the available Report Designer 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 or ActionId value as a parameter.
Each command exposes the properties listed in the table below.
| Option | Description |
|---|---|
| container | Specify “menu” to display the command in the menu; “toolbar” - to display the command in the main toolbar. |
| disabled | Specifies whether the command is disabled. |
| hasSeparator | Specifies whether the command has a visual separator. |
| hotKey | Specifies the keyboard shortcut to invoke the command. |
| imageClassName | |
| imageTemplateName | Use one of these options to specify the command’s icon: |
| • imageClassName for an icon declared as a CSS class. | |
| • imageTemplateName for an icon declared as an HTML template. | |
| clickAction | Specifies the client-side action to perform when the command is invoked. |
| text | Specifies the command’s tooltip. |
| visible | Specifies whether the command is visible in the user interface. |
The following example hides the existing Validate Bindings toolbar command, adds a new Refresh command that refreshes the current report tab, and hides the New menu command:
window.DesignerCustomization = {
onCustomizeActions(s, e) {
// Get the "New" action and hide it.
var newReportAction = e.GetById(DevExpress.Reporting.Designer.Actions.ActionId.NewReport);
if (newReportAction)
newReportAction.visible = false;
// Get the "Validate Bindings" action and hide it.
var validateBindingsAction = e.GetById(DevExpress.Reporting.Designer.Actions.ActionId.ValidateBindings);
if (validateBindingsAction)
validateBindingsAction.visible = false;
// Add the new 'Refresh' action.
e.Actions.splice(15, 0, {
container: "toolbar",
text: "Refresh",
imageTemplateName: "refresh",
visible: true,
disabled: false,
hasSeparator: false,
hotKey: { ctrlKey: true, keyCode: "Z".charCodeAt(0) },
clickAction: function () {
s.GetCurrentTab().refresh();
}
});
}
}
<head>
@...@
@DxResourceManager.RegisterScripts((config) => config.Register(new DxResource("/customization.js", 900)))
@...@
<script type="text/html" id="refresh">
<svg version="1.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">
<path class="dxd-icon-fill" d="M22,2v8h-0.2h-3.09H14l2.94-2.94C15.68,5.79,13.93,5,12,5c-3.87,0-7,3.13-7,7H2C2,6.48,6.48,2,12,2
c2.76,0,5.26,1.12,7.07,2.93L22,2z M12,19c-1.93,0-3.68-0.79-4.94-2.06L10,14H5.29H2.2H2v8l2.93-2.93C6.74,20.88,9.24,22,12,22
c5.52,0,10-4.48,10-10h-3C19,15.87,15.87,19,12,19z" />
</svg>
</script>
</head>
<DxReportDesigner ReportName="SampleReport" Height="1000px" Width="100%">
<DxReportDesignerCallbacks CustomizeMenuActions="DesignerCustomization.onCustomizeActions"/>
</DxReportDesigner>
You can also handle the CustomizeElements event to hide, move, or modify UI elements in the Report Designer. The following code sample hides the Toolbar from the Report Designer’s UI:
window.DesignerCustomization = {
onCustomizeElements: function (s, e) {
// Remove Toolbar.
var toolbarPart = e.GetById(DevExpress.Reporting.Designer.Utils.ReportDesignerElements.Toolbar);
var index = e.Elements.indexOf(toolbarPart);
e.Elements.splice(index, 1);
}
}
<head>
@...@
@DxResourceManager.RegisterScripts((config) => config.Register(new DxResource("/customization.js", 900)))
@...@
</head>
<DxReportDesigner ReportName="SampleReport" Height="1000px" Width="100%">
<DxReportDesignerCallbacks CustomizeElements="DesignerCustomization.onCustomizeElements"/>
</DxReportDesigner>
Handle the Preview.CustomizeMenuActions event to customize the toolbar in the Report Designer Preview.
The following code snippet disables an existing PrintPage command and registers a custom command:
window.DesignerCustomization = {
onPreviewCustomizeMenuActions: function (s, e) {
var actions = e.Actions;
// Get the "Print Page" action and hide it.
var printPageAction = e.GetById(DevExpress.Reporting.Viewer.ActionId.PrintPage);
if (printPageAction)
printPageAction.visible = false;
// Add a new action.
actions.push({
text: "Custom Command",
imageClassName: "customButton",
imageTemplateName: "dxrd-svg-wizard-warning",
hasSeparator: false,
disabled: ko.observable(false),
visible: true,
hotKey: { ctrlKey: true, keyCode: "Z".charCodeAt(0) },
clickAction: function () {
alert('Clicked.');
}
})
}
}
<head>
@...@
@DxResourceManager.RegisterScripts((config) => config.Register(new DxResource("/customization.js", 900)))
@...@
</head>
<DxReportDesigner ReportName="SampleReport" Height="1000px" Width="100%">
<DxReportDesignerCallbacks PreviewCustomizeMenuActions="DesignerCustomization.onPreviewCustomizeMenuActions" />
</DxReportDesigner>
The image below shows the customized toolbar:
You can also handle the PreviewCustomizeElements event to customize UI elements of the Report Designer Preview.