Customization - Report Designer for Blazor Server
- 2 minutes to read
Use the DxReportDesignerCallbacks object properties to customize the Document Viewer.
You must add the JavaScript functions that use the client-side API to customize components, and specify the function names as handlers of the appropriate events.
Customize Menu, Toolbar, and Report Wizard
The following code removes a button from the left-side menu, moves the Save and New buttons to the toolbar, modifies the New button action, runs the Report Wizard on startup, and removes the Blank and Cross-Tab report types from the Wizard.
@page "/designercustomization"
<h1>End-User Report Designer - Customization</h1>
<ul>
<li>Menu button removed</li>
<li>Save and New buttons moved into the toolbar</li>
<li>New button creates a custom report instead of an empty one</li>
<li>Wizard is run automatically on the startup</li>
<li>Some report types are removed from the wizard</li>
</ul>
<DxReportDesigner ReportName="SampleReport" Height="1000px" Width="100%">
<DxReportDesignerCallbacks CustomizeElements="ReportingDesignerCustomization.onCustomizeElements"
CustomizeMenuActions="ReportingDesignerCustomization.onCustomizeMenuActions"
ReportOpened="ReportingDesignerCustomization.onReportOpened"
BeforeRender="ReportingDesignerCustomization.onBeforeRender"
CustomizeWizard="ReportingDesignerCustomization.onCustomizeWizard"
/>
</DxReportDesigner>
[!codesnippet-js[git](XtraReports/Web/Reporting-Blazor-Customization-API /BlazorReportingEvents/BlazorReportingEvents/wwwroot/js/reporting_DesignerCustomization.js)]
window.ReportingDesignerCustomization = {
onCustomizeElements: function(s, e) {
//Remove Menu button
var menuButton = e.GetById(s.dx.Reporting.Designer.Utils.ReportDesignerElements.MenuButton)
var menuButtonIndex = e.Elements.indexOf(menuButton);
menuButtonIndex !== -1 && e.Elements.splice(menuButtonIndex, 1);
},
onCustomizeMenuActions: function(s, e) {
//Custom New Report
var newReportAction = e.GetById(s.dx.Reporting.Designer.Actions.ActionId.NewReport);
if(newReportAction) {
newReportAction.clickAction = function(report) {
s.OpenReport("CustomNewReport");
}
//Move New button to the toolbar
newReportAction.container = "toolbar";
newReportAction.hasSeparator = true;
e.Actions.splice(e.Actions.indexOf(newReportAction), 1);
e.Actions.push(newReportAction);
}
//Move Save button to the toolbar
var saveAction = e.GetById(s.dx.Reporting.Designer.Actions.ActionId.Save);
saveAction.container = "toolbar";
e.Actions.splice(e.Actions.indexOf(saveAction), 1);
e.Actions.push(saveAction);
},
//If a custom new report was opened - Update its status
onReportOpened: function(s, e) {
if(e.Url === "CustomNewReport") {
var tab = s.GetCurrentTab();
tab.url("");
tab.isModified(true);
}
},
onBeforeRender: function(s, e) {
s.RunWizard("NewViaReportWizard")
},
onCustomizeWizard: function(s, e) {
if(e.Type === "ReportWizard") {
e.Wizard.events.addHandler("beforePageInitialize", (args) => {
if (args.pageId === s.dx.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SelectReportTypePage) {
args.page.typeItems.splice(0, 1);
args.page.typeItems.pop();
}
})
}
}
}