export class NavigateTab extends Disposable implements INavigateTab

displayName: ko.Computed<string>

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

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

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

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

'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

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

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

undoEngine: DevExpress.Analytics.Utils.UndoEngine

url: ko.Computed<string>

refresh(
    resetState: boolean
): void

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

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