Report Designer Client-Side API

• Feb 12, 2026
• 9 minutes to read

General Information

ASP.NET Web Forms

The ASPxClientReportDesigner is the Report Designer client-side object.

The ASPxReportDesigner.ClientInstanceName property specifies a unique client-side identifier used to access the ASPxClientReportDesigner object programmatically.

Use the Client-Side Event Editor or the ASPxReportDesigner.ClientSideEvents property to specify client-side event handlers.

The following code snippet illustrates how to use client-side API to create a button that opens a report in the Report Designer:

• ASP.NET Web Forms

<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        function OpenOnClick(s, e) {
            ReportDesigner1.OpenReport("TestReport");
        }
</script>

<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Open Report" AutoPostBack="False">
    <ClientSideEvents Click="OpenOnClick" />
</dx:ASPxButton>

<dx:ASPxReportDesigner ClientInstanceName="ReportDesigner1" ID="ASPxReportDesigner1" runat="server" DisableHttpHandlerValidation="False">
</dx:ASPxReportDesigner>
</asp:Content>

ASP.NET MVC

The ReportDesignerExtension accepts specified settings, binds the Report Designer to the specified report, and renders the Report Designer to the View.

Refer to the following help topic for more information on DevExpress ASP.NET MVC extensions: Get Started.

To access the client-side Document Viewer, assign a string identifier to the SettingsBase.Name property.

Use the ReportDesignerSettings.ClientSideEvents property to specify client-side event handlers.

The following code snippet illustrates how to use the client-side API to create a button that opens a report in the Report Designer:

• ASP.NET MVC

<script type="text/javascript">
    function OpenOnClick(s, e) {
        ReportDesigner1.OpenReport("TestReport");
    }
</script>

@Html.DevExpress().Button(settings =>
{
    settings.Name = "dxOpenButton";
    settings.Text = "Open Report";
    settings.ClientSideEvents.Click = "OpenOnClick";
}).GetHtml()

@Html.DevExpress().ReportDesigner(settings =>
{
    settings.Name = "ReportDesigner1";
}).BindToUrl("TestReport").GetHtml()

ASP.NET Core

The Report Designer does not provide an identifier to access the client-side instance. Handle a Report Designer client-side event and store the client instance (available using the sender variable) in a JavaScript variable.

Use the ReportDesignerBuilder.ClientSideEvents method to access the ReportDesignerClientSideEventsBuilder object that allows you to specify client-side event handlers.

• CSHTML
• javascript

@(Html.DevExpress().ReportDesigner("ReportDesigner1")
    .Height("1000px")
    .ClientSideEvents(configure =>
        {
        configure.BeforeRender("GetReportDesigner");
    })
    .Bind("TestReport"))

var clientReportDesigner;
    function GetReportDesigner(s, e) {
        clientReportDesigner = s;
    }

Use the ReportDesignerClientSideEventsBuilder object’s Preview method to handle client-side events for the Report Designer’s integrated Document Viewer:

• CSHTML
• JavaScript

@(Html.DevExpress().ReportDesigner("reportDesigner1")
        .Height("1000px")
        .ClientSideEvents(configure => {
            configure.Preview(c => { c.CustomizeElements("previewCustomizeElements"); });
        })
        .Bind("TestReport"))

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

Angular

Use the DxReportDesignerComponent component’s bindingSender property to access the client-side model:

• app.component.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportDesignerComponent} from 'devexpress-reporting-angular';

@Component({
    // ...
})

export class AppComponent {
  @ViewChild(DxReportDesignerComponent, { static: false }) designer: DxReportDesignerComponent;
  // ...

  open() {  
   this.designer.bindingSender.OpenReport("HelloWorld"); 
  } 

}

Review the following help topic for a complete example: Report Designer Client-Side Configuration in an Angular Application.

React

Use the JSReportDesigner class to access the client-side API in React applications.

Client-side events in React are handled with callbacks specified in the Callbacks component.

Event names and data in event arguments passed to the React callback handler functions are the same as events in an ASP.NET Core application specified with the ReportDesignerClientSideEventsBuilder methods.

Review the following help topic for more information: Reporting for React - Client-Side API

Vue

To access the client-side Reporting API in Vue applications, use the JSReportDesigner class.

Client-side events in Vue are handled with callbacks specified in the Knockout bindings.

Event names and data in event arguments passed to the Angular callback handler functions are the same as events in an ASP.NET Core application. Review the following help topic with information on ASP.NET Core client-side events: ReportDesignerClientSideEventsBuilder methods.

Review the following help topic for more information: Reporting for Vue - Client-Side API

Client-Side API

The Report Designer’s client-side API allows you to perform the following actions:

Open and Save Reports

Use the following methods to open and save reports in the Report Designer:

Use the following events to handle ‘open’ and ‘save’ operations. You can also customize dialogs used to open and save reports.

Retrieve and Close Report Tabs

Use the following methods to retrieve and close report tabs:

Use the following events to respond to a report tab’s ‘change’ and ‘close’ operations.

Customize Controls and Their Properties

The events below allow you to customize controls available in the Report Designer Toolbox and change their properties when they are added to a report:

Use the following methods to customize properties of existing controls and add new properties for custom controls:

Customize Report Designer Elements and Actions

The events below allow you to customize Report Designer UI elements and actions available in the Toolbar, Menu, and Field List.

Localize the Report Designer

Use the following API to replace specific localization strings with custom strings programmatically:

Manage Report Parameters

Use the following methods to register custom parameter types in the End-User Report Designer and remove available parameter types:

The following events allow you to customize parameter editors in both design and preview modes:

Respond to Server-Side Errors

Use the following events to perform required actions when a server-side error occurs:

Initialize the Report Designer

Handle the following event to perform the required actions before Report Designer UI initialization:

Manage the Document Preview

Use the following method to display the Report Designer’s document preview:

The following events allow you to customize the built-in Document Viewer and respond to user actions performed in preview mode.

Obtain Client-Side Models

The following methods allow you to obtain client-side models of the Report Designer and its built-in Document Viewer.