Skip to main content
All docs
V25.1
  • JSReportDesigner Class

    A client object that is the sender for the Report Designer client-side events. Provides access to the client-side Report Designer API.

    Declaration

    export class JSReportDesigner

    Remarks

    The following code enables you to call JSReportDesigner methods:

    'use client';
    import dynamic from 'next/dynamic'
    import React from 'react'
    import  {  DxReportDesignerRef } from 'devexpress-reporting-react/dx-report-designer';
    import Callbacks from 'devexpress-reporting-react/dx-report-designer/options/Callbacks'
    import RequestOptions from 'devexpress-reporting-react/dx-report-designer/options/RequestOptions';
    const ReportDesigner = dynamic(() => import('devexpress-reporting-react/dx-report-designer'), {ssr: false})
    
    function App() {
      const designerRef = React.useRef<DxReportDesignerRef>(null);
    
      function onBeforeRender(args: any): void {
        // You can adjust Report Designer settings here. 
      }
    
      function doSomething() {
        // Invokes New Report Wizard
        designerRef.current?.instance().RunWizard('NewViaReportWizard');
      }
    
      return (
        <>
          <button onClick={doSomething}>Invoke Report Wizard</button>
          <ReportDesigner ref={designerRef} reportUrl="TestReport">
            <RequestOptions host="http://localhost:5000/" getDesignerModelAction="DXXRD/GetDesignerModel" />
            <Callbacks BeforeRender={onBeforeRender} />
          </ReportDesigner>
        </>
      )
    }
    
    export default App
    

    View Example: Reporting for React - Customize a Web Report Designer in a React App (Next.js)

    Properties

    designerModel Property

    Declaration

    get designerModel(): DevExpress.Reporting.Designer.IReportDesignerRootContext
    set designerModel(newVal: DevExpress.Reporting.Designer.IReportDesignerRootContext)

    Property Value

    Type
    IReportDesignerRootContext

    Methods

    AddParameterType(parameterInfo, editorInfo) Method

    Declaration

    AddParameterType(
        parameterInfo: DevExpress.Reporting.Designer.Data.IParameterTypeValue,
        editorInfo: DevExpress.Analytics.Utils.IEditorInfo
    ): void

    Parameters

    Name Type
    parameterInfo IParameterTypeValue
    editorInfo IEditorInfo

    AddToPropertyGrid(groupName, property) Method

    Declaration

    AddToPropertyGrid(
        groupName: string,
        property: DevExpress.Analytics.Utils.ISerializationInfo
    ): void

    Parameters

    Name Type
    groupName string
    property ISerializationInfo

    AdjustControlCore Method

    Declaration

    AdjustControlCore(): void

    CloseCurrentTab Method

    Declaration

    CloseCurrentTab(): void

    CloseTab(tab) Method

    Closes the specified report tab

    Declaration

    CloseTab(
        tab: DevExpress.Reporting.Designer.Tools.INavigateTab,
        force?: boolean
    ): void

    Parameters

    Name Type Description
    tab INavigateTab
    force boolean

    True to silently close the tab; false to show the Save Report dialog. If omitted, the value is false.

    Remarks

    The CloseTab method closes the specified Report Designer tab.

    The force parameter value determines whether or not to show the Save Report dialog if the report in the tab contains unsaved changes, as follows:

    True
    the tab is closed without notification. Changes are not saved.
    False
    the Save Report dialog is invoked.

    To access all available Report Designer tabs, call the GetTabs method.

    Use the CloseCurrentTab method to close the currently active tab.

    The following code snippet demonstrates how to use the method.

    <script type="text/javascript">
      function CloseSecondTab() {
          var tabs = reportDesigner.GetTabs();
          reportDesigner.CloseTab(tabs[1]);
      }
    
      function ForceCloseSecondTab() {
          var tabs = reportDesigner.GetTabs();
          reportDesigner.CloseTab(tabs[1], true);
      }
      function CloseCurrentTab() {
          reportDesigner.CloseCurrentTab();
      }
    </script>
    
    @{
        var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
            .Height("1000px")
            .Bind("TestReport");
        @designerRender.RenderHtml()
    }
    

    Tip

    When the user closes a report tab in the Web Report Designer, the ReportTabClosing and ReportTabClosed events are raised. Call the IsModified method to determine whether a report in any tab is changed.

    GetButtonStorage Method

    Declaration

    GetButtonStorage(): any

    Returns

    Type
    any

    GetCurrentTab Method

    Declaration

    GetCurrentTab(): DevExpress.Reporting.Designer.Tools.NavigateTab

    Returns

    Type
    NavigateTab

    GetDesignerModel Method

    Provides access to the client-side model of the Web Report Designer.

    Declaration

    GetDesignerModel(): DevExpress.Reporting.Designer.IReportDesignerRootContext

    Returns

    Type Description
    IReportDesignerRootContext

    An object that is the client-side model.

    Remarks

    The client-side model allows you to get the Web Report Designer UI settings.

    The following code is the CustomizeMenuActions event handler that creates a “Save All” button to save all reports at once:

    function onCustomizeMenuActions(s, e) {
        e.Actions.push({
            text: "Save All",
            imageClassName: "dxrd-image-save",
            imageTemplateName: "dxrd-svg-menu-save",
            disabled: ko.observable(false),
            visible: true,
            hasSeparator: false,
            clickAction: function (report) {
                var designerModel = s.GetDesignerModel();
                var tabs = s.GetTabs();
                tabs.forEach(tab => {
                    if (tab.isDirty()) {
                        if (!tab.url()) {
                            //Invokes the Save dialog.  
                            designerModel.saveReportDialog.show(tab);
                        }
                        else {
                            //Saves without a dialog.  
                            s.ReportStorageSetData(tab.context().report.serialize(), tab.url())
                                .done(function (result) {
                                    tab.isDirty(false);
                                    DevExpress.Analytics.Internal.ShowMessage(
                                        DevExpress.Analytics.Utils.getLocalization(
                                            "The report has been successfully saved.",
                                            "ASPxReportsStringId.ReportDesigner_SaveReport_Message_OK"),
                                        DevExpress.Analytics.Internal.NotifyType.success);
                                });
                        }
                    }
                });
            },
            hotKey: { ctrlKey: true, keyCode: "A".charCodeAt(0) },
            container: "menu"
        });
    }
    

    GetJsonReportModel Method

    Declaration

    GetJsonReportModel(): any

    Returns

    Type
    any

    GetParameterEditor(valueType) Method

    Declaration

    GetParameterEditor(
        valueType: string
    ): DevExpress.Analytics.Utils.IEditorInfo

    Parameters

    Name Type
    valueType string

    Returns

    Type
    IEditorInfo

    GetParameterInfo(parameterType) Method

    Declaration

    GetParameterInfo(
        parameterType: string
    ): DevExpress.Reporting.Designer.Data.IParameterTypeValue

    Parameters

    Name Type
    parameterType string

    Returns

    Type
    IParameterTypeValue

    GetPreviewModel Method

    Declaration

    GetPreviewModel(): DevExpress.Reporting.Viewer.Internal.PreviewModel

    Returns

    Type
    PreviewModel

    GetPropertyInfo(controlType, path) Method

    Gets information displayed in the Properties Panel for the specified property of the specified control type.

    Declaration

    GetPropertyInfo(
        controlType: DevExpress.Reporting.Designer.Internal.ControlType,
        path: string | Array<string>
    ): DevExpress.Analytics.Utils.ISerializationInfo

    Parameters

    Name Type
    controlType string
    path string | string[]

    Returns

    Type
    ISerializationInfo

    Remarks

    Use the GetPropertyInfo method to hide or disable individual editors or sections in the Properties Panel for the specified control type (see the code snippet below):

    <script type="text/javascript" id="script">
        function onBeforeRender(s, e) {
          // Get the property of the XtraReport class with the "Border Color" display name.
          var info = event.sender.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "Border Color");
          // Disable the property's editor if its default value is "Black".
          if (info.defaultVal == "Black") info.disabled = true;
    
          // Get the "Watermarks" section.
          info = event.sender.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", ["Watermarks"]);
          // Hide the section in the Property panel.
          info.visible = false;
    
          // Hide the XtraReport.DrawWatermark property.
          info = event.sender.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "DrawWatermark");
          info.visible = false;
    
          // Hide the Separator property (located by the XtraReport.ExportOptions.Csv.Separator path).
          info = event.sender.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "ExportOptions.Csv.Separator");
          info.visible = false;
    
          // Hide the property of the XRLabel class with the "Can Grow" display name.
          info = event.sender.GetPropertyInfo("XRLabel", "Can Grow");
          info.disabled = true;
    
          // Hide the Edit Options section (the XRLabel.EditOptions property) in the XRLabel's property panel.
          info = event.sender.GetPropertyInfo("XRLabel", "EditOptions");
          info.visible = false;
    }
    </script>
    
    @{
        var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
            .Height("1000px")
            .ClientSideEvents(configure=>configure.BeforeRender("onBeforeRender"))
            .Bind("TestReport");
        @designerRender.RenderHtml()
    }
    

    View Example: Reporting for React - Customize a Web Report Designer in a React App (Next.js)

    GetTabs Method

    Returns open tabs in the Report Designer.

    Declaration

    GetTabs(): DevExpress.Reporting.Designer.Tools.INavigateTab[]

    Returns

    Type Description
    INavigateTab[]

    An array of Report Designer tabs.

    Remarks

    Use the GetTabs method to obtain all open tabs in the Web Report Designer.

    The following code gets all tabs and closes the second tab:

    <script type="text/javascript">
        function CloseSecondTab() {
            var tabs = reportDesigner.GetTabs();
            reportDesigner.CloseTab(tabs[1]);
        }
    </script>
    
    @{
        var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
            .Height("1000px")
            .Bind("TestReport");
        @designerRender.RenderHtml()
    }
    

    IsModified Method

    Indicates whether a report in the Report Designer’s active tab is changed.

    Declaration

    IsModified(): boolean

    Returns

    Type Description
    boolean

    True if the report has been modified; otherwise, false.

    Remarks

    Use the IsModified property to determine if a report in the current tab is modified. After you save the modified report (or take another action to process it), call the JSReportDesigner.ResetIsModified method to clear the modification flag.

    You can also use the NavigateTab.isModified property to determine whether a report loaded to a particular tab is modified.

    Example

    The following code demonstrates how to save a modified report in the active tab, and how to save all modified reports in the Report Designer.

    <script type="text/javascript" id="script">
        // Saves a modified report in the active tab
        // and clears the modification flag.
        function saveCurrentReport() {
            if (reportDesigner.IsModified()) {
                reportDesigner.SaveNewReport("Rep1");
                reportDesigner.ResetIsModified();
            }
        };
        // Saves modified reports in all tabs,
        // clears the modification flags,
        // displays a message when the report is successfully saved.
        function saveAllReports() {
            var tabs = reportDesigner.GetTabs();
            tabs.forEach(tab => {
                if (tab.isModified()) {
                    if (!tab.url()) tab.url('Report' + Date.now());
                    reportDesigner.ReportStorageSetData(tab.context().report.serialize(), tab.url())
                        .done(function (result) {
                            tab.resetIsModified();
                            DevExpress.Analytics.Internal.ShowMessage(DevExpress.Analytics.Utils.getLocalization("The report has been successfully saved.",
                                "ASPxReportsStringId.ReportDesigner_SaveReport_Message_OK"), DevExpress.Analytics.Internal.NotifyType.success);
                        });
                }
            });
        };
    </script>
    
    
    @{
        var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
            .Height("1000px")
            .Bind("TestReport");
        @designerRender.RenderHtml()
    }
    
    @section Scripts {
    // ...
    }
    

    View Example: Reporting for React - Customize a Web Report Designer in a React App (Next.js)

    OpenReport(url) Method

    Opens the specified report.

    Declaration

    OpenReport(
        url: string
    ): void

    Parameters

    Name Type
    url string

    Remarks

    The client-side OpenReport method uses a web report storage to resolve the report identifier passed as the method parameter. The web report storage is a ReportStorageWebExtension class descendant that returns a report instance on demand.

    The following code creates a button that loads a report with the “XtraReport1” identifier:

     

    report-designer.html

    <div>
        <button (click)="openReport()"><span>Open Report</span></button>
    </div>
    
    <dx-report-designer [reportUrl]="reportUrl" height="700px">
        <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="hostUrl"></dxrd-request-options>
    </dx-report-designer>
    

     

    report-designer.ts

    import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
    import { DxReportDesignerComponent } from 'devexpress-reporting-angular';
    
    @Component({
      selector: 'report-designer',
      encapsulation: ViewEncapsulation.None,
      templateUrl: './report-designer.html',
      styleUrls: [
        "../../../node_modules/ace-builds/css/ace.css",
        "../../../node_modules/ace-builds/css/theme/dreamweaver.css",
        "../../../node_modules/ace-builds/css/theme/ambiance.css",
        "../../../node_modules/devextreme/dist/css/dx.light.css",
        "../../../node_modules/devexpress-richedit/dist/dx.richedit.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
        "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css",
        "../../../node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css"
      ]
    })
    
    export class ReportDesignerComponent {
        @ViewChild(DxReportDesignerComponent, { static: false }) designer: DxReportDesignerComponent;
        // If you use the ASP.NET Core backend:
        //    getDesignerModelAction: "DXXRD/GetDesignerModel"
        // If you use the ASP.NET MVC backend:
        getDesignerModelAction = "ReportDesigner/GetReportDesignerModel"
        reportUrl = "TestReport";
    
        openReport() {
            this.designer.bindingSender.OpenReport("XtraReport1");
        }
    
      constructor(@Inject('BASE_URL') public hostUrl: string) { }
    }
    

    View Example: Reporting for React - Customize a Web Report Designer in a React App (Next.js)

    RemoveParameterType(parameterType) Method

    Removes the specified type from the list of available parameter types.

    Declaration

    RemoveParameterType(
        parameterType: string
    ): void

    Parameters

    Name Type
    parameterType string

    Remarks

    View Example: Customized Parameter Editor in Web Reporting Controls

    The following code removes the DateTime type from the list of parameter types available in the Web Report Designer:

    <script type="text/javascript">
        function registerParameters(s) {
            // Removes an existing parameter type.
            s.RemoveParameterType("System.DateTime");
        }
    </script>
    
    @{
        var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
            .Height("1000px")
            .ClientSideEvents(configure =>
            {
                configure.BeforeRender("registerParameters");
            })
            .Bind("TestReport");
        @designerRender.RenderHtml()
    }
    

    ReportStorageGetData(url) Method

    Gets the report layout from the report storage for a report with the specified identifier.

    Declaration

    ReportStorageGetData(
        url: string
    ): DevExpress.Analytics.Internal.DxPromise<any>

    Parameters

    Name Type
    url string

    Returns

    Type
    DxPromise<any>

    Remarks

    The ReportStorageGetData method calls the ReportStorageWebExtension.GetData method of the web report storage. The web report storage is a ReportStorageWebExtension class descendant that returns a report instance on demand. If the web report storage is not available, the ReportStorageGetData method fails.

    ReportStorageGetUrls Method

    Returns a list of report identifiers for the reports contained in the report storage.

    Declaration

    ReportStorageGetUrls(): DevExpress.Analytics.Internal.DxPromise<any[]>

    Returns

    Type
    DxPromise<any[]>

    ReportStorageSetData(reportLayout, url) Method

    Stores the report in a report storage and assigns the specified report identifier.

    Declaration

    ReportStorageSetData(
        reportLayout: string,
        url: string
    ): DevExpress.Analytics.Internal.DxPromise<any>

    Parameters

    Name Type Description
    reportLayout string

    The serialized report layout.

    url string

    A string that specifies the report name.

    Returns

    Type
    DxPromise<any>

    Remarks

    The ReportStorageSetData method calls the ReportStorageWebExtension.SetData method of the web report storage. The web report storage is a ReportStorageWebExtension class descendant that returns a report instance on demand. If the web report storage is not available, the ReportStorageSetData method fails.

    Refer to the following help topic for the code sample: IsModified.

    ReportStorageSetNewData(reportLayout, url) Method

    Declaration

    ReportStorageSetNewData(
        reportLayout: string,
        url: string
    ): DevExpress.Analytics.Internal.DxPromise<any>

    Parameters

    Name Type Description
    reportLayout string

    The serialized report layout.

    url string

    A string that specifies the report name.

    Returns

    Type
    DxPromise<any>

    Remarks

    The ReportStorageSetNewData method calls the ReportStorageWebExtension.SetNewData method of the web report storage. The web report storage is a ReportStorageWebExtension class descendant that returns a report instance on demand. If the web report storage is not available, the ReportStorageSetNewData method fails.

    ResetIsModified Method

    Clears the modification flag for the active tab in the Report Designer tab.

    Declaration

    ResetIsModified(): void

    Remarks

    Refer to the following help topic for the code sample: IsModified

    RunWizard(wizardType) Method

    Declaration

    RunWizard(
        wizardType: DevExpress.Reporting.Designer.Wizard.WizardRunType
    ): void

    Parameters

    Name Type
    wizardType WizardRunType

    SaveNewReport(reportName) Method

    Saves the current report with the specified identifier.

    Declaration

    SaveNewReport(
        reportName: string
    ): DevExpress.Analytics.Internal.DxPromise<any>

    Parameters

    Name Type Description
    reportName string

    A string that specifies the report name

    Returns

    Type
    DxPromise<any>

    Remarks

    The SaveNewReport method calls the ReportStorageSetNewData method of the web report storage. The web report storage is a ReportStorageWebExtension class descendant that returns a report instance on demand. If the web report storage is not available, the SaveNewReport method fails.

    Refer to the following topic for an example of use: JSReportDesigner.IsModified.

    SaveReport Method

    Saves the current report.

    Declaration

    SaveReport(): DevExpress.Analytics.Internal.DxPromise<any>

    Returns

    Type
    DxPromise<any>

    Remarks

    The ReportStorageSetData method calls theReportStorageSetData method of the web report storage. The web report storage is a ReportStorageWebExtension class descendant that returns a report instance on demand. If the web report storage is not available, the ReportStorageSetData method fails.

    The Save method does not reset the IsModified flag.

    The Save method saves the report with its previous name. If you want to save a report with a different name or save a new report that doesn’t have a name yet, use the SaveNewReport(reportName) method.

    The following code creates a button that saves the current report:

     

    report-designer.html

    <div>
        <button (click)="saveReport()"><span>Save</span></button>
    </div>
    
    <dx-report-designer [reportUrl]="reportUrl" height="700px">
        <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="hostUrl"></dxrd-request-options>
    </dx-report-designer>
    

     

    report-designer.ts

    import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
    import { DxReportDesignerComponent } from 'devexpress-reporting-angular';
    
    @Component({
      selector: 'report-designer',
      encapsulation: ViewEncapsulation.None,
      templateUrl: './report-designer.html',
      styleUrls: [
        // ...
      ]
    })
    
    export class ReportDesignerComponent {
        @ViewChild(DxReportDesignerComponent, { static: false }) designer: DxReportDesignerComponent;
    // If you use the ASP.NET Core backend:
    //  getDesignerModelAction = "DXXRD/GetDesignerModel"
    // If you use the ASP.NET MVC backend:
        getDesignerModelAction = "ReportDesigner/GetReportDesignerModel"
        reportUrl = "TestReport";
    
        saveReport() {
            this.designer.bindingSender.SaveReport();
        }
    
      constructor(@Inject('BASE_URL') public hostUrl: string) { }
    }
    

    View Example: Reporting for React - Customize a Web Report Designer in a React App (Next.js)

    ShowPreview Method

    Declaration

    ShowPreview(): void

    UpdateLocalization(localization) Method

    Substitutes the specified localizable strings with translations.

    Declaration

    UpdateLocalization(localization: {
        [key: string]: string;
    }): void

    Parameters

    Name Type
    localization {[key: string]: string}

    Remarks

    For a code sample, review the following help topics: