Skip to main content
All docs
V25.1
  • Customization - Report Designer for Blazor Server

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

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

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