Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Customization - Report Designer (Hosted Blazor WebAssembly App)

  • 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.

#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.

@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>
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();
                }
            })
        }
    }
}