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

class JSReportDesigner

Remarks

To get access to the client-side Report Designer API, obtain the JSReportDesigner object as described below.

Add a callback for the BeforeRender client-side event to the the dxReportDesigner Knockout binding code that integrates the Web Report Designer in the JavaScript framework. The event sender is the JSReportDesigner object.

The following code gets the JSReportDesigner object and stores it in the varJSReportDesigner variable:

React

import React from "react";
import ko from "knockout";
import "devexpress-reporting/dx-reportdesigner";
// ...

class ReportDesigner extends React.Component {
    constructor(props) {
        super(props);
        this.reportUrl = ko.observable("TestReport");
        this.designerModel = ko.observable();
        this.requestOptions = {
            // ...
        };
    }

    render() {
        return (
            <div
                ref="designer"
                data-bind="dxReportDesigner: $data"
                style={{ width: "100%", height: "100%" }}
            />
        );
    }
    componentDidMount() {
        var self = this;
        ko.applyBindings(
            {
                callbacks: {
                    BeforeRender: function(s, e) {
                        self.varJSReportDesigner = s;
                    }
                },
                reportUrl: this.reportUrl,
                designerModel: this.designerModel,
                requestOptions: this.requestOptions
            },
            this.refs.designer
        );
    }
    // ...
}

Vue

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

Properties

designerModel Property

Declaration

designerModel: IReportDesignerRootContext

Property Value

Type
IReportDesignerRootContext

Methods

AddParameterType(parameterInfo, editorInfo) Method

Declaration

AddParameterType(
    parameterInfo: any,
    editorInfo: any
): void

Parameters

Name	Type
parameterInfo	any
editorInfo	any

AddToPropertyGrid(groupName, property) Method

Declaration

AddToPropertyGrid(
    groupName: any,
    property: any
): void

Parameters

Name	Type
groupName	any
property	any

AdjustControlCore Method

Declaration

AdjustControlCore(): void

CloseCurrentTab Method

Declaration

CloseCurrentTab(): void

CloseTab(tab) Method

Declaration

CloseTab(
    tab: any,
    force?: boolean
): void

Parameters

Name	Type
tab	any
force	boolean

GetButtonStorage Method

Declaration

GetButtonStorage(): any

Returns

Type
any

GetCurrentTab Method

Declaration

GetCurrentTab(): Tools.NavigateTab

Returns

Type
NavigateTab

GetDesignerModel Method

Declaration

GetDesignerModel(): IReportDesignerRootContext

Returns

Type
IReportDesignerRootContext

GetJsonReportModel Method

Declaration

GetJsonReportModel(): any

Returns

Type
any

GetParameterEditor(valueType) Method

Declaration

GetParameterEditor(
    valueType: any
): any

Parameters

Name	Type
valueType	any

Returns

Type
any

GetParameterInfo(parameterType) Method

Declaration

GetParameterInfo(
    parameterType: any
): Data.IParameterTypeValue

Parameters

Name	Type
parameterType	any

Returns

Type
IParameterTypeValue

GetPreviewModel Method

Declaration

GetPreviewModel(): any

Returns

Type
any

GetPropertyInfo(controlType, path) Method

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

Declaration

GetPropertyInfo(
    controlType: any,
    path: any
): any

Parameters

Name	Type	Description
controlType	any	A string that is the name of the type. You can use the fully qualified type name or a short name.
path	any	A string that specifies a path to the property or an array of strings (in Properties Panel - nested section names and the editor caption) which are combined to specify a path to the property.

Returns

Type	Description
any	The information used for property serialization.

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

Angular

 

report-designer.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

import { Component } from '@angular/core';
import DevExpress from 'devexpress-reporting';

@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 XtraReport's property that is located in the "Watermark" section and has the "Image Alignment" display name.
        info = event.sender.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", ["Watermark", "Image Alignment"]);
        // Hide the property in the Property panel.
        info.visible = false;

        // Get the XtraReport.DrawWatermark property.
        info = event.sender.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "DrawWatermark");
        info.visible = false;

        // Get the Separator property (found in the XtraReport.ExportOptions.Csv.Separator path).
        info = event.sender.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "ExportOptions.Csv.Separator");
        info.visible = false;

        // Get 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;
    }
    // ...
}

React

import React from "react";
import DevExpress from "devexpress-reporting/dx-reportdesigner";
import ko from "knockout";

class ReportDesigner extends React.Component {
    constructor(props) {
        super(props);
// ...

        this.callbacks = {
            BeforeRender: function(s,e) {
          // Get the property of the XtraReport class with the "Border Color" display name.
          var info = s.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 XtraReport's property that is located in the "Watermark" section and has the "Image Alignment" display name.
          info = s.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", ["Watermark", "Image Alignment"]);
          // Hide the property in the Property panel.
          info.visible = false;

          // Get the XtraReport.DrawWatermark property.
          info = s.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "DrawWatermark");
          info.visible = false;

          // Get the Separator property (found in the XtraReport.ExportOptions.Csv.Separator path).
          info = s.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "ExportOptions.Csv.Separator");
          info.visible = false;

          // Get the property of the XRLabel class with the "Can Grow" display name.
          info = s.GetPropertyInfo("XRLabel", "Can Grow");
          info.disabled = true;

          // Hide the Edit Options section (the XRLabel.EditOptions property) in the XRLabel's property panel.
          info = s.GetPropertyInfo("XRLabel", "EditOptions");
          info.visible = false;
            }
        };
    }
    componentDidMount() {
      ko.applyBindings(
        {
          //...
          callbacks: this.callbacks
        },
        this.refs.designer
      );
    }

// ...
}
export default ReportDesigner;

Vue

import ko from "knockout";
import DevExpress from "devexpress-reporting/dx-reportdesigner";

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 = s.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 XtraReport's property that is located in the "Watermark" section and has the "Image Alignment" display name.
            info = s.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", ["Watermark", "Image Alignment"]);
            // Hide the property in the Property panel.
            info.visible = false;

            // Get the XtraReport.DrawWatermark property.
            info = s.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "DrawWatermark");
            info.visible = false;

            // Get the Separator property (found in the XtraReport.ExportOptions.Csv.Separator path).
            info = s.GetPropertyInfo("DevExpress.XtraReports.UI.XtraReport", "ExportOptions.Csv.Separator");
            info.visible = false;

            // Get the property of the XRLabel class with the "Can Grow" display name.
            info = s.GetPropertyInfo("XRLabel", "Can Grow");
            info.disabled = true;

            // Hide the Edit Options section (the XRLabel.EditOptions property) in the XRLabel's property panel.
            info = s.GetPropertyInfo("XRLabel", "EditOptions");
            info.visible = false;
                    }
            };  
        ko.applyBindings({
      // ..
            callbacks: callbacks
        }, this.$refs.designer);
    },
  // ...
};
export default componentData;

GetTabs Method

Declaration

GetTabs(): Tools.INavigateTab[]

Returns

Type
INavigateTab[]

IsModified Method

Declaration

IsModified(): boolean

Returns

Type
boolean

OpenReport(url) Method

Opens the specified report.

Declaration

OpenReport(
    url: any
): void

Parameters

Name	Type	Description
url	any	A string that identifies a report.

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:

Angular

 

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/jquery-ui/themes/base/all.css",
    "../../../node_modules/devextreme/dist/css/dx.common.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;
    getDesignerModelAction = "api/ReportDesigner/GetReportDesignerModel";
    reportUrl = "TestReport";

    openReport() {
        this.designer.bindingSender.OpenReport("XtraReport1");
    }

  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

import React from "react";
import ko from "knockout";
import "devexpress-reporting/dx-reportdesigner";
import "./App.css";

class ReportDesigner extends React.Component {
    constructor(props) {
        super(props);
        this.reportUrl = ko.observable("TestReport");
        this.designerModel = ko.observable();
        this.requestOptions = {
            host: "http://localhost:52454/",
            getDesignerModelAction: "ReportDesigner/GetReportDesignerModel"
        };
        this.openReport = this.openReport.bind(this);
    }
    openReport() {
        this.reportDesignerBinding.OpenReport("XtraReport1");
    }

    render() {
        return (
            <div>
                <button onClick={() => this.openReport()}>Open Report</button>
                <div
                    ref="designer"
                    data-bind="dxReportDesigner: $data"
                    style={{ width: "100%", height: "900px" }}
                />
            </div>
        );
    }
    componentDidMount() {
        var self = this;
        ko.applyBindings(
            {
                callbacks: {
                    BeforeRender: function(s, e) {
                        self.reportDesignerBinding = s;
                    }
                },
                reportUrl: this.reportUrl,
                designerModel: this.designerModel,
                requestOptions: this.requestOptions
            },
            this.refs.designer
        );
    }
    componentWillUnmount() {
        ko.cleanNode(this.refs.designer);
    }
}

function App() {
    return (
        <div style={{ width: "100%", height: "1000px" }}>
            <ReportDesigner />
        </div>
    );
}

export default App;

Vue

<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.
            host: "http://localhost:52454/",
            getDesignerModelAction: "ReportDesigner/GetReportDesignerModel"
        };
        var callbacks = {
            BeforeRender: function(s) {
                self.reportDesignerBinding = s;
            }
        };
        ko.applyBindings(
            {
                reportUrl: reportUrl,
                requestOptions: requestOptions,
                callbacks: callbacks
            },
            this.$refs.designer
        );
    },

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

RemoveParameterType(parameterType) Method

Declaration

RemoveParameterType(
    parameterType: any
): void

Parameters

Name	Type
parameterType	any

ReportStorageGetData(url) Method

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

Declaration

ReportStorageGetData(
    url: any
): any

Parameters

Name	Type	Description
url	any	A string that is the report identifier.

Returns

Type
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(): any

Returns

Type
any

ReportStorageSetData(reportLayout, url) Method

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

Declaration

ReportStorageSetData(
    reportLayout: any,
    url: any
): any

Parameters

Name	Type	Description
reportLayout	any	A string that is the serialized report layout to be saved in REPX format.
url	any	A string that is the report identifier.

Returns

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

ReportStorageSetNewData(reportLayout, url) Method

Declaration

ReportStorageSetNewData(
    reportLayout: any,
    url: any
): JQueryPromise<any>

Parameters

Name	Type	Description
reportLayout	any	A string that is the serialized report layout to be saved in REPX format.
url	any	A string that is the report identifier.

Returns

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

Declaration

ResetIsModified(): void

RunWizard(wizardType) Method

Declaration

RunWizard(
    wizardType: Wizard.WizardRunType
): void

Parameters

Name	Type
wizardType	WizardRunType

SaveNewReport(reportName) Method

Saves the current report with the specified identifier.

Declaration

SaveNewReport(
    reportName: any
): JQueryPromise<any>

Parameters

Name	Type	Description
reportName	any	A string that identifies a report.

Returns

Type	Description
JQueryPromise<any>	A Deferred Promise object.

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.

For a code sample, refer to the following help topic: JSReportDesigner.SaveReport.

SaveReport Method

Saves the current report.

Declaration

SaveReport(): any

Returns

Type
any

Remarks

The SaveReport method calls the ReportStorageSetData 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 SaveReport method fails.

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

Angular

 

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: [
    "../../../node_modules/jquery-ui/themes/base/all.css",
    "../../../node_modules/devextreme/dist/css/dx.common.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;
    getDesignerModelAction = "api/ReportDesigner/GetReportDesignerModel";
    reportUrl = "TestReport";

    saveReport() {
        this.designer.bindingSender.SaveReport();
    }

  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

import React from "react";
import ko from "knockout";
import "devexpress-reporting/dx-reportdesigner";
import "./App.css";

class ReportDesigner extends React.Component {
    constructor(props) {
        super(props);
        this.reportUrl = ko.observable("TestReport");
        this.designerModel = ko.observable();
        this.requestOptions = {
            host: "http://localhost:52454/",
            getDesignerModelAction: "ReportDesigner/GetReportDesignerModel"
        };
        this.saveReport = this.saveReport.bind(this);
    }
    saveReport() {
        this.reportDesignerBinding.SaveReport();
    }

    render() {
        return (
            <div>
                <button onClick={() => this.saveReport()}>Save</button>
                <div
                    ref="designer"
                    data-bind="dxReportDesigner: $data"
                    style={{ width: "100%", height: "900px" }}
                />
            </div>
        );
    }
    componentDidMount() {
        var self = this;
        ko.applyBindings(
            {
                callbacks: {
                    BeforeRender: function(s, e) {
                        self.reportDesignerBinding = s;
                    }
                },
                reportUrl: this.reportUrl,
                designerModel: this.designerModel,
                requestOptions: this.requestOptions
            },
            this.refs.designer
        );
    }
    componentWillUnmount() {
        ko.cleanNode(this.refs.designer);
    }
}

function App() {
    return (
        <div style={{ width: "100%", height: "1000px" }}>
            <ReportDesigner />
        </div>
    );
}

export default App;

Vue

<template>
    <div>
        <div>
            <button @click="saveReport">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: {
        saveReport() {
            this.reportDesignerBinding.SaveReport();
        }
    },
    mounted() {
        var self = this;
        var reportUrl = ko.observable("TestReport");
        var requestOptions = {
      // Specify the server-side application port.
            host: "http://localhost:52454/",
            getDesignerModelAction: "ReportDesigner/GetReportDesignerModel"
        };
        var callbacks = {
            BeforeRender: function(s) {
                self.reportDesignerBinding = s;
            }
        };
        ko.applyBindings(
            {
                reportUrl: reportUrl,
                requestOptions: requestOptions,
                callbacks: callbacks
            },
            this.$refs.designer
        );
    },

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

ShowPreview Method

Declaration

ShowPreview(): void

UpdateLocalization(localization) Method

Declaration

UpdateLocalization(
    localization: any
): void

Parameters

Name	Type
localization	any