Added in v2.3

Reporting designer

Enable design mode when users should edit the report template, move elements, edit properties, and switch between design and preview.

Designer and toolbar

The toolbar is declarative and can be grouped. Built-in commands cover persistence, designer panes, editing, history, data-source connection, PDF download, and mode switching.

<Report Data="@invoice"
        @bind-Definition="@definition"
        Editable
        PreviewFormats="ReportPreviewFormat.Html | ReportPreviewFormat.Pdf">
    <ReportViewer PreviewFormat="ReportPreviewFormat.Html | ReportPreviewFormat.Pdf"
                  DefaultPreviewFormat="ReportPreviewFormat.Html"
                  AllowDownload
                  AllowPrint />
    <ReportToolbar>
        <ReportToolbarGroup>
            <ReportToolbarPanesMenu />
        </ReportToolbarGroup>
        <ReportToolbarGroup>
            <ReportToolbarItem Command="ReportCommand.Cut" Caption="Cut" />
            <ReportToolbarItem Command="ReportCommand.Copy" Caption="Copy" />
            <ReportToolbarItem Command="ReportCommand.Duplicate" Caption="Duplicate">
                <ButtonTemplate Context="item">
                    <Button Color="Color.Warning" Outline Active="@item.Active" Disabled="@(!item.CanExecute)" Clicked="@item.Execute" title="@item.Text">
                        @if ( item.Icon is not null )
                        {
                            <Icon Name="@item.Icon.Value" Margin="Margin.Is2.FromEnd" />
                        }
                        @item.Text
                    </Button>
                </ButtonTemplate>
            </ReportToolbarItem>
            <ReportToolbarItem Command="ReportCommand.Paste" Caption="Paste" />
            <ReportToolbarItem Command="ReportCommand.Delete" Caption="Delete" />
        </ReportToolbarGroup>
        <ReportToolbarGroup>
            <ReportToolbarItem Command="ReportCommand.Undo" Caption="Undo" />
            <ReportToolbarItem Command="ReportCommand.Redo" Caption="Redo" />
            <ReportToolbarItem Command="ReportCommand.Reset" Caption="Reset" />
        </ReportToolbarGroup>
        <ReportToolbarGroup>
            <ReportToolbarItem Command="ReportCommand.ConnectDataSource" Caption="Data sources" />
            <ReportToolbarItem Command="ReportCommand.DownloadPdf" Caption="Download PDF" />
        </ReportToolbarGroup>
        <Div Margin="Margin.IsAuto.FromStart">
            <ReportToolbarGroup>
                <ReportToolbarItem Command="ReportCommand.Design" Caption="Design" ShowCaption />
                <ReportToolbarItem Command="ReportCommand.Preview" Caption="Preview" ShowCaption />
            </ReportToolbarGroup>
        </Div>
    </ReportToolbar>
    <ReportDataSources>
        <ReportObjectDataSource Name="Invoice" Data="@invoice" />
    </ReportDataSources>
    <ReportPage Name="Invoice">
        <ReportHeader Name="Toolbar sample header" Height="72">
            <ReportText Text="Designer toolbar" X="30" Y="18" Width="240" Height="24" FontSize="18" Bold FontColor="@ReportColors.Blue" />
            <ReportText Text="{Header.Number} - {Customer.Name}" X="30" Y="45" Width="360" Height="18" />
        </ReportHeader>
        <ReportPageHeader Name="Column headers" Height="32">
            <ReportText Text="Description" X="30" Y="8" Width="270" Height="18" Bold />
            <ReportText Text="Total" X="420" Y="8" Width="90" Height="18" Bold TextAlignment="TextAlignment.End" />
        </ReportPageHeader>
        <ReportDetail Name="Invoice lines" Height="30" DataSource="Invoice.Lines">
            <ReportField Field="Description" X="30" Y="6" Width="270" Height="18" />
            <ReportField Field="Total" Format="@ReportFormats.Currency()" X="420" Y="6" Width="90" Height="18" />
        </ReportDetail>
    </ReportPage>
</Report>

@code {
    private ReportDefinition definition;

    private readonly InvoiceReportModel invoice = new()
    {
        Header = new()
        {
            Number = "INV-1001",
        },
        Customer = new()
        {
            Name = "Northwind Traders",
        },
        Lines =
        [
            new() { Description = "Implementation workshop", Total = 640.50m },
            new() { Description = "Reporting module license", Total = 500.00m },
        ],
    };

    private sealed class InvoiceReportModel
    {
        public InvoiceHeaderModel Header { get; set; }

        public InvoiceCustomerModel Customer { get; set; }

        public List<InvoiceLineModel> Lines { get; set; } = [];
    }

    private sealed class InvoiceHeaderModel
    {
        public string Number { get; set; }
    }

    private sealed class InvoiceCustomerModel
    {
        public string Name { get; set; }
    }

    private sealed class InvoiceLineModel
    {
        public string Description { get; set; }

        public decimal Total { get; set; }
    }
}

The default designer toolbar includes a panes menu. When defining a custom toolbar, add <ReportToolbarPanesMenu> if users should be able to open, focus, or show flyout panes from the toolbar. The same menu contains a Status Bar checkbox. The status bar remains available in design and preview modes and shows PDF operation progress and, while designing, the current pointer coordinates and any report warnings. Use <ShowStatusBar> to define whether it is initially visible. Page tabs and the add-page button are rendered automatically above the designer surface and can be hidden with <ShowPageTabs>. Designer panes can also be pinned or unpinned from their headers.

Leave <ReportToolbar> without child content to use the default toolbar. Its command groups can be controlled with ShowPersistenceButtons, ShowEditButtons, ShowHistoryButtons, ShowDataSourceButtons, ShowExportButtons, and ShowModeButtons. Use HiddenCommands when only individual commands should be removed.

The ButtonTemplate template receives a <ReportToolbarItemContext> containing the command, text, icon, active and enabled states, and the Execute method. It can be defined for the entire toolbar or for one <ReportToolbarItem>. The Duplicate command is also available from the element context menu and with Ctrl+D.

Definition persistence

Handle save and load requests to persist the report definition as JSON in browser storage, a database, or an application service.

<Report Data="@invoice"
        @bind-Definition="@definition"
        SaveRequested="@SaveReport"
        LoadRequested="@LoadReport"
        Editable
        PreviewFormats="ReportPreviewFormat.Html | ReportPreviewFormat.Pdf">
    <ReportViewer PreviewFormat="ReportPreviewFormat.Html | ReportPreviewFormat.Pdf"
                  DefaultPreviewFormat="ReportPreviewFormat.Html" />
    <ReportDataSources>
        <ReportObjectDataSource Name="Invoice" Data="@invoice" />
    </ReportDataSources>
    <ReportPage Name="Invoice">
        <ReportHeader Name="Stateful report header" Height="72">
            <ReportText Text="Persistent report definition" X="30" Y="18" Width="270" Height="24" FontSize="18" Bold FontColor="@ReportColors.Blue" />
            <ReportText Text="Move elements, save the definition as JSON, and load it again from the toolbar." X="30" Y="45" Width="450" Height="18" />
        </ReportHeader>
        <ReportDetail Name="Invoice lines" Height="30" DataSource="Invoice.Lines">
            <ReportField Field="Description" X="30" Y="6" Width="270" Height="18" />
            <ReportField Field="Total" Format="@ReportFormats.Currency()" X="420" Y="6" Width="90" Height="18" />
        </ReportDetail>
    </ReportPage>
</Report>

@code {
    private ReportDefinition definition;

    private string reportJson;

    private readonly InvoiceReportModel invoice = new()
    {
        Lines =
        [
            new() { Description = "Implementation workshop", Total = 640.50m },
            new() { Description = "Reporting module license", Total = 500.00m },
        ],
    };

    private Task SaveReport( ReportDefinition definition )
    {
        reportJson = ReportJsonSerializer.Serialize( definition );

        return Task.CompletedTask;
    }

    private Task<ReportDefinition> LoadReport()
    {
        ReportDefinition savedDefinition = string.IsNullOrWhiteSpace( reportJson )
            ? null
            : ReportJsonSerializer.Deserialize( reportJson );

        return Task.FromResult( savedDefinition );
    }

    private sealed class InvoiceReportModel
    {
        public List<InvoiceLineModel> Lines { get; set; } = [];
    }

    private sealed class InvoiceLineModel
    {
        public string Description { get; set; }

        public decimal Total { get; set; }
    }
}

<ReportDefinition> is the persistent report model. Its ordered Pages collection contains each page's setup, bands, and elements. Data-source metadata, formulas, running totals, and designer settings such as grid size, rulers, band mode, and collision warnings remain report-wide. Runtime data objects are intentionally excluded from JSON and must be supplied again through Data or declarative data-source components after loading.

The example keeps the serialized JSON in memory for brevity. Store the same string in browser storage, a database, or an application service to preserve it across sessions.

Use GetDefinition and LoadDefinition when persistence is initiated outside the toolbar. <ReportState> additionally captures transient interaction state such as the active design page, current mode, preview format, selection, and clipboard. It can be captured with GetState and restored with LoadState, but it is not required for long-term report storage.

Designer settings

Designer settings are stored in <ReportDesignerDefinition> and can also be changed from the report properties pane. SnapToGrid and GridSize control grid-aligned movement and resizing. ShowRulers and ShowFineRulerTicks control measurement rulers, while ShowCollisionWarnings highlights overlapping sibling elements and adds them to the status-bar warnings dialog. Individual elements can disable their own ShowCollisionWarnings setting to opt out. These settings are saved with the report definition.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<Report />

Item	Formula
Description	Select a field, function, or operator to insert it into the formula.

Reporting designer

Designer and toolbar

Insert aggregate

Running total

Insert group

Connect data source

Edit formula