NavigateTab Class

Provides functionality for a tab displayed a report in the Web Report Designer.

Declaration

export class NavigateTab extends Disposable implements INavigateTab

Remarks

You can use the Report Designer’s GetTabs method to obtain all currently opened tabs.

Implements

INavigateTab

Properties

displayName Property

Specifies the display name of the current tab.

Declaration

displayName: ko.Computed<string>

Property Value

Type	Description
Computed<string>	A knockout computed string that specifies the tab’s display name.

isModified Property

Specifies whether the report in the current tab has been changed.

Declaration

isModified: ko.Observable<boolean> | ko.Computed<boolean>

Property Value

Type
Observable<boolean>
Computed<boolean>

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.

ASP.NET Core

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

Angular

 

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

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) { }
}

React

'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>
            <br />
            <button onClick={saveAllReports}>Save All Reports</button>
            <ReportDesigner ref={designerRef} reportUrl="TestReport">
                <RequestOptions host="http://localhost:5000/" getDesignerModelAction="DXXRD/GetDesignerModel" />
            </ReportDesigner>
        </>
    )

}

export default App

Vue

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

report Property

Specifies a report opened in the current tab.

Declaration

report: ko.Computed<DevExpress.Reporting.Designer.Controls.ReportViewModel>

Property Value

Type
Computed<ReportViewModel>

undoEngine Property

Specifies an engine that manages undo and redo operations in the Web Report Designer.

Declaration

undoEngine: DevExpress.Analytics.Utils.UndoEngine

Property Value

Type	Description
UndoEngine	An object that specifies an undo/redo engine.

url Property

Specifies the URL of a report opened in the current tab.

Declaration

url: ko.Computed<string>

Property Value

Type	Description
Computed<string>	A knockout computed string that specifies the report URL.

Methods

refresh(resetState) Method

Reopens an assigned report.

Declaration

refresh(
    resetState: boolean
): void

Parameters

Name	Type
resetState	boolean

Remarks

The refresh method reopens a report assigned to the current tab without saving changes made to this report. This method works only if you implemented a custom server-side report storage.

The following code snippet demonstrates how to use the client-side GetCurrentTab method to get the currently active Report Designer tab and reopen an assigned report.

ASPX

<script type="text/javascript">       
    function Refresh() {
        var tab = reportDesigner.GetCurrentTab();
        tab.refresh();
    }
</script>

<div onclick="Refresh()">Refresh</div>
<dx:ASPxReportDesigner ID="ASPxReportDesigner1" ClientInstanceName="reportDesigner" runat="server" />

resetIsModified Method

Resets the value returned by the isModified property.

Declaration

resetIsModified(): void

Remarks

The following code snippet demonstrates how to reset the isModified property value for all Report Designer tabs. To obtain these tabs, use the GetTabs method.

 <script type="text/javascript">
    function ResetIsModified() {
        reportDesigner.GetTabs().forEach(function (item) { item.resetIsModified(); })
    }
</script>

<div onclick="ResetIsModified()">Reset IsModified</div>
<dx:ASPxReportDesigner ID="ASPxReportDesigner1" ClientInstanceName="reportDesigner" runat="server"/>