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