Customization - Report Designer for Blazor Server

• Aug 14, 2024
• 2 minutes to read

Use the DxReportDesignerCallbacks object properties to customize the Report Designer.

You must add the JavaScript functions that use the client-side API to customize components and specify the function names as handlers of the corresponding 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.

DesignerCustomization.razor

@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>

JavaScript Functions

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

View Example: Blazor Reporting (JavaScript-Based) - UI Customization API