ContextQMD
Back to Devexpress

JSReportDesigner Class

xtrareports-js-devexpress-dot-reporting-dot-designer.md

latest46.8 KB
Original Source

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

ts
export class JSReportDesigner

Remarks

The following code enables you to call JSReportDesigner methods:

typescript
'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
typescript
<template>
    <div
        ref="designer"
        style="position: absolute; left: 0; right: 0"
        data-bind="dxReportDesigner: $data"
    ></div>
</template>

<script>
import ko from "knockout";
import 'devexpress-reporting/dx-reportdesigner';

export default {
    name: "ReportDesignerComponent",
    data() {
        return {
            varJSReportDesigner: null
        };
    },
    // ...
    mounted() {
        var self = this;
        var reportUrl = ko.observable("TestReport");
        var requestOptions = {
            // ...
        };
        var callbacks = {
            BeforeRender: function(s) {
                self.varJSReportDesigner = s;
            }
        };
        ko.applyBindings(
            {
                reportUrl: reportUrl,
                requestOptions: requestOptions,
                callbacks: callbacks,
            },
            this.$refs.designer
        );
    }
    // ...
};
</script>

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

Properties

designerModel Property

Declaration

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

Property Value

Type
IReportDesignerRootContext

Methods

AddParameterType(parameterInfo, editorInfo) Method

Declaration

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

Parameters

NameType
parameterInfoIParameterTypeValue
editorInfoIEditorInfo

AddToPropertyGrid(groupName, property) Method

Declaration

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

Parameters

NameType
groupNamestring
propertyISerializationInfo

AdjustControlCore Method

Declaration

ts
AdjustControlCore(): void

CloseCurrentTab Method

Declaration

ts
CloseCurrentTab(): void

CloseTab(tab) Method

Closes the specified report tab

Declaration

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

Parameters

NameTypeDescription
tabINavigateTab
forceboolean

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.

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

ts
GetButtonStorage(): any

Returns

Type
any

GetCurrentTab Method

Declaration

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

Returns

Type
NavigateTab

GetDesignerModel Method

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

Declaration

ts
GetDesignerModel(): DevExpress.Reporting.Designer.IReportDesignerRootContext

Returns

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

javascript
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

ts
GetJsonReportModel(): any

Returns

Type
any

GetParameterEditor(valueType) Method

Declaration

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

Parameters

NameType
valueTypestring

Returns

Type
IEditorInfo

GetParameterInfo(parameterType) Method

Declaration

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

Parameters

NameType
parameterTypestring

Returns

Type
IParameterTypeValue

GetPreviewModel Method

Declaration

ts
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

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

Parameters

NameType
controlTypestring
pathstring

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

html
<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()
}

report-designer.html

html
<dx-report-designer [reportUrl]="reportUrl" height="700px">
    <dxrd-callbacks (BeforeRender)="onBeforeRender($event)">
    </dxrd-callbacks>
    <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="hostUrl">
    </dxrd-request-options>
</dx-report-designer>

report-designer.ts

typescript
import { Component } from '@angular/core';

@Component({
  selector: 'report-designer',
  templateUrl: './report-designer.html'
// ...
})

export class ReportDesignerComponent {
    // ...

    onBeforeRender(event) {
      // 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;
    }
    // ...
}
typescript
'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(event: any): void {
    // 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;
  }

  return (
    <ReportDesigner ref={designerRef} reportUrl="TestReport">
      <RequestOptions host="http://localhost:5000/" getDesignerModelAction="DXXRD/GetDesignerModel" />
      <Callbacks BeforeRender={onBeforeRender} />
    </ReportDesigner>
  )
}

export default App
javascript
import ko from "knockout";

var componentData = {
    name: "ReportDesignerComponent",
    mounted() {
    // ...
    var callbacks = {  
          BeforeRender: function(s){
          // 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;
                    }
            };  
        ko.applyBindings({
      // ..
            callbacks: callbacks
        }, this.$refs.designer);
    },
  // ...
};
export default componentData;

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

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

Returns

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

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

ts
IsModified(): boolean

Returns

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

js
<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 {
// ...
}

report-designer.html

html
<div>
    <button (click)="saveCurrentReport()"><span>Save Current Report</span></button>
    <button (click)="saveAllReports()"><span>Save All Reports</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

typescript
import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportDesignerComponent } from 'devexpress-reporting-angular';
import { ShowMessage, NotifyType } from '@devexpress/analytics-core/analytics-internal';
import { getLocalization } from '@devexpress/analytics-core/analytics-utils';

@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";
    // Saves a modified report in the active tab
    // and clears the modification flag.
    saveCurrentReport() {
        var designer = this.designer.bindingSender;
        if (designer.IsModified()) {
            designer.SaveNewReport("Rep1");
            designer.ResetIsModified();
        }
    };
    // Saves modified reports in all tabs,
    // clears the modification flags,
    // and displays a message when the report is successfully saved.
    saveAllReports() {
        var designer = this.designer.bindingSender;
        var tabs = designer.GetTabs();
        tabs.forEach(tab => {
            if (tab.isModified()) {
                if (!tab.url()) tab.url('Report' + Date.now());
                designer.ReportStorageSetData(tab.context().report.serialize(), tab.url())
                    .done(function (result) {
                        tab.resetIsModified();
                        ShowMessage(getLocalization("The report has been successfully saved.",
                            "ASPxReportsStringId.ReportDesigner_SaveReport_Message_OK"), NotifyType.success);
                    });
            }
        });
    };

  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}
typescript
'use client';
import dynamic from 'next/dynamic'
import React from 'react';
import { ShowMessage, NotifyType } from '@devexpress/analytics-core/core/utils/_infoMessageHelpers';
import { getLocalization } from '@devexpress/analytics-core/property-grid/localization/localization_utils';
import { NavigateTab } from 'devexpress-reporting/dx-reportdesigner'
import RequestOptions from 'devexpress-reporting-react/dx-report-designer/options/RequestOptions';
import { DxReportDesignerRef } from 'devexpress-reporting-react/dx-report-designer';
const ReportDesigner = dynamic(() => import('devexpress-reporting-react/dx-report-designer'), {ssr: false})

function App() {
    const designerRef = React.useRef<DxReportDesignerRef>(null);

    // Saves a modified report in the active tab
    // and clears the modification flag.
    function saveCurrentReport() {
        if (designerRef.current?.instance().IsModified()) {
            designerRef.current?.instance().SaveNewReport("Rep1");
            designerRef.current?.instance().ResetIsModified();
        }
    };
    // Saves modified reports in all tabs,
    // clears modification flags,
    // and displays a message when the report is successfully saved.
    function saveAllReports() {
        var tabs = designerRef.current?.instance().GetTabs() as NavigateTab[];
        tabs?.forEach((tab => {
            if (tab.isModified()) {
                if (!tab.url()) tab.url('Report' + Date.now());
                designerRef.current?.instance().ReportStorageSetData(tab.context().report.serialize(), tab.url())
                    .done(function (result) {
                        tab.resetIsModified();
                        ShowMessage(getLocalization("The report has been successfully saved.",
                            "ASPxReportsStringId.ReportDesigner_SaveReport_Message_OK"), NotifyType.success);
                    });
            }
        }));
    };

    return (
        <>
            <button onClick={saveCurrentReport}>Save Current Report</button>
            

            <button onClick={saveAllReports}>Save All Reports</button>
            <ReportDesigner ref={designerRef} reportUrl="TestReport">
                <RequestOptions host="http://localhost:5000/" getDesignerModelAction="DXXRD/GetDesignerModel" />
            </ReportDesigner>
        </>
    )

}

export default App
typescript
<template>
    <div>
        <div>
            <button @click="saveCurrentReport">Save Current Report as Rep1</button>
            <button @click="saveAllReports">Save All Reports</button>
        </div>
        <div
            ref="designer"
            style="position: absolute; left: 0; right: 0"
            data-bind="dxReportDesigner: $data"
        ></div>
    </div>
</template>

<script>
import ko from "knockout";
import 'devexpress-reporting/dx-reportdesigner';
import { ShowMessage, NotifyType} from '@devexpress/analytics-core/analytics-internal';
import { getLocalization } from '@devexpress/analytics-core/analytics-utils';

export default {
name: "ReportDesignerComponent",
    data() {
        return {
            reportDesignerBinding: null
        };
    },
    methods: {
      // Saves a modified report in the active tab
      // and clears the modification flag.
        saveCurrentReport() {
            var designer = this.reportDesignerBinding;
            if (designer.IsModified()) {
                designer.SaveNewReport("Rep1");
                designer.ResetIsModified();
            }
        },
        // Saves modified reports in all tabs,
        // clears the modification flags,
        // and displays a message when the report is successfully saved.
        saveAllReports() {
            var designer = this.reportDesignerBinding;
            var tabs = designer.GetTabs();
            tabs.forEach(tab => {  
                if (tab.isModified()) {  
                    if (!tab.url()) tab.url('Report' + Date.now());
                    designer.ReportStorageSetData(tab.context().report.serialize(), tab.url())  
                        .done(function () {  
                            tab.resetIsModified();  
                            ShowMessage(getLocalization("The report has been successfully saved.", 
                                "ASPxReportsStringId.ReportDesigner_SaveReport_Message_OK"), NotifyType.success);  
                        });  
                }  
            });
        }
    },

mounted() {
    var self = this;
    var designerOptions = {
        reportUrl: ko.observable("TestReport"), // The URL of a report that is opened in the Report Designer when the application starts.
        requestOptions: {
    // If you use the ASP.NET Core backend:
    // host: "https://localhost:5001/",
    // getDesignerModelAction: "DXXRD/GetDesignerModel"
    // If you use the ASP.NET MVC backend:
        host: "http://localhost:44370/",
        getDesignerModelAction: "ReportDesigner/GetReportDesignerModel"
        },
        callbacks: {
            BeforeRender: function(s) {
                self.reportDesignerBinding = s;
            }
        }
    };
    ko.applyBindings(designerOptions, this.$refs.designer);
},
beforeUnmount() {
    ko.cleanNode(this.$refs.designer);
}
};
</script>

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

OpenReport(url) Method

Opens the specified report.

Declaration

ts
OpenReport(
    url: string
): void

Parameters

NameType
urlstring

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

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

typescript
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) { }
}
typescript
'use client';
import dynamic from 'next/dynamic'
import React from 'react'
import { DxReportDesignerRef } from 'devexpress-reporting-react/dx-report-designer';
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 doOpenReport() {
    designerRef.current?.instance().OpenReport("XtraReport1");
  }

  return (
    <>
      <button onClick={doOpenReport}>Open a Report</button>
      <ReportDesigner ref={designerRef} reportUrl="TestReport">
        <RequestOptions host="http://localhost:5000/" getDesignerModelAction="DXXRD/GetDesignerModel" />
      </ReportDesigner>
    </>
  )
}

export default App
typescript
<template>
    <div>
        <div>
            <button @click="openReport">Open Report</button>
        </div>
        <div
            ref="designer"
            style="position: absolute; left: 0; right: 0"
            data-bind="dxReportDesigner: $data"
        ></div>
    </div>
</template>

<script>
import ko from "knockout";
import 'devexpress-reporting/dx-reportdesigner';

export default {
    name: "ReportDesignerComponent",
    data() {
        return {
            reportDesignerBinding: null
        };
    },
    methods: {
        openReport() {
            this.reportDesignerBinding.OpenReport("XtraReport1");
        }
    },
    mounted() {
        var self = this;
        var reportUrl = ko.observable("TestReport");
        var requestOptions = {
    // Specify the server-side application port.
    // If you use the ASP.NET Core backend:
    // host: "https://localhost:5001/",
    // getDesignerModelAction: "DXXRD/GetDesignerModel"
    // If you use the ASP.NET MVC backend:
        host: "http://localhost:58570/",
        getDesignerModelAction: "ReportDesigner/GetReportDesignerModel"
        };
        var callbacks = {
            BeforeRender: function(s) {
                self.reportDesignerBinding = s;
            }
        };
        ko.applyBindings(
            {
                reportUrl: reportUrl,
                requestOptions: requestOptions,
                callbacks: callbacks
            },
            this.$refs.designer
        );
    },

    beforeUnmount() {
        ko.cleanNode(this.$refs.designer);
    }
};
</script>

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

ts
RemoveParameterType(
    parameterType: string
): void

Parameters

NameType
parameterTypestring

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:

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

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

Parameters

NameType
urlstring

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

ts
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

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

Parameters

NameTypeDescription
reportLayoutstring

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

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

Parameters

NameTypeDescription
reportLayoutstring

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

ts
ResetIsModified(): void

Remarks

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

RunWizard(wizardType) Method

Declaration

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

Parameters

NameType
wizardTypeWizardRunType

SaveNewReport(reportName) Method

Saves the current report with the specified identifier.

Declaration

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

Parameters

NameTypeDescription
reportNamestring

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

ts
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

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

typescript
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) { }
}
typescript
'use client';
import dynamic from 'next/dynamic'
import React from 'react'
import { DxReportDesignerRef } from 'devexpress-reporting-react/dx-report-designer';
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 doSaveReport() {
    designerRef.current?.instance().SaveReport();
  }

  return (
    <>
      <button onClick={doSaveReport}>Save Report</button>
      <ReportDesigner ref={designerRef} reportUrl="TestReport">
        <RequestOptions host="http://localhost:5000/" getDesignerModelAction="DXXRD/GetDesignerModel" />
      </ReportDesigner>
    </>
  )
}

export default App
typescript
<template>
    <div>
        <div>
            <button @click="saveReport">Save Report</button>
        </div>
        <div
            ref="designer"
            style="position: absolute; left: 0; right: 0"
            data-bind="dxReportDesigner: $data"
        ></div>
    </div>
</template>

<script>
import ko from "knockout";
import 'devexpress-reporting/dx-reportdesigner';

export default {
    name: "ReportDesignerComponent",
    data() {
        return {
            reportDesignerBinding: null
        };
    },
    methods: {
        saveReport() {
            this.reportDesignerBinding.SaveReport();
        }
    },
    mounted() {
        var self = this;
        var reportUrl = ko.observable("TestReport");
        var requestOptions = {
      // Specify the server-side application port.
            host: "https://localhost:52454/",
            getDesignerModelAction: "ReportDesigner/GetReportDesignerModel"
        };
        var callbacks = {
            BeforeRender: function(s) {
                self.reportDesignerBinding = s;
            }
        };
        ko.applyBindings(
            {
                reportUrl: reportUrl,
                requestOptions: requestOptions,
                callbacks: callbacks
            },
            this.$refs.designer
        );
    },

    beforeUnmount() {
        ko.cleanNode(this.$refs.designer);
    }
};
</script>

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

ShowPreview Method

Declaration

ts
ShowPreview(): void

UpdateLocalization(localization) Method

Substitutes the specified localizable strings with translations.

Declaration

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

Parameters

NameType
localization{[key: string]: string}

Remarks

For a code sample, review the following help topics: