Customization - Report Designer (Hosted Blazor WebAssembly App)

• Aug 04, 2025
• 2 minutes to read

Use the DxReportDesignerCallbacks object properties to customize the Document Viewer.

You must add JavaScript functions that use the client-side API to customize components and must also specify function names as relevant event handlers.

View Example: Reporting for Blazor (WebAssembly Hosted) -- Customize JavaScript-based Report Designer and Document Viewer

Customize Menu, Toolbar, and Report Wizard

Use the following code snippet to remove a button from the left-side menu, move the Save and New buttons to the toolbar, modify the New button action, run the Report Wizard on startup, and remove the Blank and Cross-Tab report types from the Wizard.

ReportDesigner.razor

@page "/reportdesigner"

<h1>End-User Report Designer - Customization</h1>
<ul>
    <li>Menu button is removed</li>
    <li>Save and New buttons are moved to the toolbar</li>
    <li>Report Wizard is run automatically on startup</li>
    <li>Blank and Cross-Tab report types (the first and the last in the list) are removed from the Wizard page</li>
</ul>


<DxWasmReportDesigner ReportName="TestReport" Height="650px" Width="100%">
    <DxWasmReportDesignerRequestOptions GetDesignerModelAction="DXXRD/GetReportDesignerModel">
    </DxWasmReportDesignerRequestOptions>
    <DxReportDesignerModelSettings AllowMDI="true">
    </DxReportDesignerModelSettings>
    <DxReportDesignerCallbacks CustomizeElements="ReportingDesignerCustomization.onCustomizeElements"
                               CustomizeMenuActions="ReportingDesignerCustomization.onCustomizeMenuActions"
                               BeforeRender="ReportingDesignerCustomization.onBeforeRender"
                               CustomizeWizard="ReportingDesignerCustomization.onCustomizeWizard" 
                               />
</DxWasmReportDesigner>

JavaScript Functions

window.ReportingDesignerCustomization = {
    onCustomizeElements: function(s, e) {
        //Remove Menu button
        var menuButton = e.GetById(DevExpress.Reporting.Designer.Utils.ReportDesignerElements.MenuButton)
        var menuButtonIndex = e.Elements.indexOf(menuButton);
        menuButtonIndex !== -1 && e.Elements.splice(menuButtonIndex, 1);
    },

    onCustomizeMenuActions: function(s, e) {
        var firstToolbarItem = e.Actions.filter(x => !x.container || x.container === "toolbar")[0];
        firstToolbarItem.hasSeparator = true;

        //Move New button to the toolbar
        var newReportAction = e.GetById(DevExpress.Reporting.Designer.Actions.ActionId.NewReport);
        newReportAction.container = "toolbar";
        e.Actions.splice(e.Actions.indexOf(newReportAction), 1);
        e.Actions.splice(0, 0, newReportAction);

        //Move Save button to the toolbar
        var saveAction = e.GetById(DevExpress.Reporting.Designer.Actions.ActionId.Save);
        saveAction.container = "toolbar";
        e.Actions.splice(e.Actions.indexOf(saveAction), 1);
        e.Actions.splice(0, 0, saveAction);
    },

    onBeforeRender: function(s, e) {
        s.RunWizard("NewViaReportWizard")
    },

    onCustomizeWizard: function(s, e) {
        if(e.Type === "ReportWizard") {
            e.Wizard.events.addHandler("beforePageInitialize", (args) => {
                if (args.pageId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SelectReportTypePage) {
                    args.page.typeItems.splice(0, 1);
                    args.page.typeItems.pop();
                }
            })
        }
    }
}