Handle the Report Designer's Client-Side Events

• Aug 18, 2023
• 3 minutes to read

The Web Report Designer includes an advanced client-side API in addition to the comprehensive server-side object model. This enables web applications based on this control to function more efficiently by combining server-side and client-side processing.

Report Designer’s Events

The ReportDesignerClientSideEventsBuilder class exposes methods that allow you to pass client-side events’ handlers. To access this class instance, use the ReportDesignerBuilder.ClientSideEvents method.

CSHTML

<script type="text/javascript" id="script"> 
    function customizeMenuActions(s, e) {
        // Get the "Save" action and hide it.
        var saveAction = e.GetById(DevExpress.Reporting.Designer.Actions.ActionId.Save);
        if (saveAction)
            saveAction.visible = false;
    }
</script>
@{
    var designer = Html.DevExpress().ReportDesigner("reportDesigner1")
        .Height("1000px")
        .Bind(Model.Report)
        .ClientSideEvents(configure => { configure.CustomizeMenuActions("customizeMenuActions"); });
}
@designer

The Report Designer’s client-side events allow you to perform the following actions:

• Customize Report Designer Elements and Actions

  Event	Description
  CustomizeWizard	Enables you to customize the Report Wizard and Data Source Wizard.
  CustomizeElements	Enables you to customize UI elements.
  CustomizeMenuActions	Allows you to customize menu actions.
  CustomizeFieldListActions	Enables you to customize actions in the Field List.

• Respond to Opening and Saving Reports

  Event	Description
  ReportOpening	Occurs when a report is about to be opened in the Report Designer.
  ReportOpened	Occurs when a report has been opened in the Report Designer.
  ReportSaving	Occurs when a report is about to be saved in the Report Designer.
  ReportSaved	Occurs when a report has been saved in the Report Designer.

• Customize the Save and Open Dialogs

  Event	Description
  CustomizeOpenDialog	Enables you to customize the Open Report dialog.
  CustomizeSaveDialog	Enables you to customize the Save dialog.
  CustomizeSaveAsDialog	Enables you to customize the Save Report dialog.

• Respond to Changing and Closing Report Tabs

  Event	Description
  TabChanged	Occurs when an active report tab was changed.
  ReportTabClosing	Occurs when a report tab is about to be closed.
  ReportTabClosed	Occurs when a report tab was closed.
  ExitDesigner	Occurs when the Report Designer is being closed.

• Customize Controls and Their Properties

  Event	Description
  CustomizeToolbox	Enables you to customize the Toolbox.
  ComponentAdded	Occurs after a component has been added to the current report.

• Localize the Report Designer

  Event	Description
  CustomizeLocalization	Enables you to substitute the Report Designer’s localization strings with custom strings.

• Customize Parameter Editors

  Event	Description
  CustomizeParameterEditors	Enables you to add custom editors for report parameters.
  CustomizeParameterLookUpSource	Allows you to customize look-up report parameter values.

• Respond to Server-Side Errors

  Event	Description
  OnServerError	Occurs on the client each time a server-side error raises.

• Initialize the Report Designer

  Event	Description
  BeforeRender	Occurs before the Report Designer’s UI is initialized.

Document Viewer’s Events

You can also handle client-side events for the Report Designer’s integrated Document Viewer.

The ReportDesignerPreviewClientSideEventsBuilder class exposes methods that allow you to pass these handlers. To access this class instance, use the ReportDesignerClientSideEventsBuilder object’s Preview method. This object is available in the ReportDesignerBuilder.ClientSideEvents method.

CSHTML

<script type="text/javascript" id="script"> 
    function previewCustomizeElements(s, e) {
        var rightPanel = e.GetById(DevExpress.Reporting.Viewer.PreviewElements.RightPanel);
        var index = e.Elements.indexOf(rightPanel);
        e.Elements.splice(index, 1);
    }
</script>
@(Html.DevExpress().ReportDesigner("reportDesigner1")
        .Height("1000px")
        .ClientSideEvents(configure => {
            configure.Preview(c => { c.CustomizeElements("previewCustomizeElements"); });
        })
        .Bind(Model.Report))

The events listed below allow you to customize the built-in Document Viewer and respond to user actions.

Event	Description
PreviewClick	Occurs when a report document is clicked.
CustomizeElements	Enables you to customize UI elements.
CustomizeMenuActions	Allows you to customize toolbar actions.
CustomizeExportOptions	Allows you to customize export formats and corresponding export options.
DocumentReady	Occurs after a report has been switched to Print Preview.
EditingFieldChanged	Occurs each time an editing field’s value changes.
ParametersReset	Occurs after report parameter values are reset to their default values.
ParametersSubmitted	Occurs after report parameter values are submitted.