IPreviewModel Interface

Implements client-side API for the Document Viewer and Report Designer’s Preview.

Declaration

interface IPreviewModel

Remarks

The IPreviewModel object is the Document Viewer and Report Designer’s Preview model that is sent to the client.

The following methods return the IPreviewModel object:

• ASPxClientReportDesigner.GetPreviewModel
• ASPxClientWebDocumentViewer.GetPreviewModel

Properties

Close Property

Closes the document that is currently open in the Web Document Viewer.

Declaration

Close: () => void

Property Value

Type	Description
() => void	An action that closes the document that is currently open in the Web Document Viewer.

Remarks

The Close method closes the displayed document and leaves the Document Viewer empty. Call this method to release memory allocated on the server (storage and cache) when the user closes the page that contains the Document Viewer control.

The following code calls the Close method when a page (or UI region) window is about to close and unload its resources. The code uses jQuery API and handles the BeforeRender event.

JavaScript

function onBeforeRender(s, e) {
  $(window).on('beforeunload', function(e) {
    s.Close();
});

ExportTo Property

Exports the document to the specified file format.

Declaration

ExportTo: (format?: string, inlineResult?: boolean) => void

Property Value

Type	Description
(format?: string, inlineResult?: boolean) => void	A function that receives the file format identifier and the inlineResult boolean parameter. If the inlineResult is true, the browser attempts to display the resulting document.

Remarks

The method performs a callback that exports a document to the specified format and sends the resulting file to the client browser.

The first method’s parameter is the DevExpress.Reporting.Viewer.ExportFormatID value. The second parameter (inlineResult) determines whether the browser attempts to display the exported document or the browser downloads the file. If the inlineResult parameter is set to true, but the browser does not handle the specified format, the resulting file is downloaded.

Tip

Handle the CustomizeExportOptions event to specify export options.

The Web Document Viewer can export a document asynchronously (export operations are run in the background). To switch to the asynchronous export mode, set the AsyncExportApproach static variable to true. Asynchronous export action opens a new page with a progress indicator.

The code snippet below demonstrates how to hide the Export Options panel, add a button to export the report to a file in XLSX format, and specify the export options.

ASP.NET Core

@using AspNetCoreServerSide.PredefinedReports

<link rel="stylesheet" href="~/css/viewer.part.bundle.css" />

<script src="~/js/viewer.part.bundle.js"></script>

<script type="text/javascript" id="script">
    // Enable the asynchronous export mode.
    DevExpress.Reporting.Viewer.Settings.AsyncExportApproach = true;
    var docViewer;
    function GetDocumentViewer(s, e) {
        docViewer = s;
    }
    function CustomizeExportOptions(s, e) {
        e.HideExportOptionsPanel();
        var model = e.GetExportOptionsModel(DevExpress.Reporting.Viewer.ExportFormatID.XLSX);
        // Encrypt the file. Encryption is performed in asynchronous mode.
        //model.encryptionOptions.password("1234");
        model.documentOptions.author("Me");
    }
</script>

<button onclick="docViewer.ExportTo('xlsx')" type="button">
    Export Document
</button>

@(Html.DevExpress().WebDocumentViewer("WebDocumentViewer1")
    .Height("1000px")
    .ClientSideEvents(configure =>
    {
        configure.BeforeRender("GetDocumentViewer");
        configure.CustomizeExportOptions("CustomizeExportOptions");
    })
    .Bind("TestReport"))

React

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

class ReportViewer extends React.Component {
  constructor(props) {
    super(props);
    this.reportUrl = ko.observable("TestReport");
    this.previewModel = ko.observable();
    this.requestOptions = {
        // Specify the server-side application port.
        host: "http://localhost:64673/",
        invokeAction: "DXXRDV"
    };
    this.exportDocument = this.exportDocument.bind(this);

    this.callbacks = {
      CustomizeExportOptions: function(s, e){
            e.HideExportOptionsPanel();
        var model = e.GetExportOptionsModel(DevExpress.Reporting.Viewer.ExportFormatID.XLSX);
        // Encrypt the file. Encryption is performed in asynchronous mode.
        //model.encryptionOptions.password("1234");
        model.documentOptions.author("Me");
      },
      BeforeRender: function(s, e){
        // Enable the asynchronous export mode.
        DevExpress.Reporting.Viewer.Settings.AsyncExportApproach = true;
      }
    };
  };

  exportDocument() {
    this.previewModel().ExportTo('xlsx');
  };
  render() {
    return (
      <div>
        <button onClick={() => this.exportDocument()}>
          Export to XLSX
        </button>
        <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
      </div>
    );
  }
  componentDidMount() {
    ko.applyBindings({
      reportUrl: this.reportUrl,
      viewerModel: this.previewModel,
      requestOptions: this.requestOptions,
      callbacks: this.callbacks
    }, this.refs.viewer);
  }
  componentWillUnmount() {
    ko.cleanNode(this.refs.viewer);
  }
};

export default ReportViewer;

Vue

<template>
<div>
    <div>
        <button @click='exportDocument'>Export Document</button>
    </div>
    <div ref="viewer" style="position: absolute; left: 0; right: 0" data-bind="dxReportViewer: $data">
    </div>
</div>
</template>

<script>
import ko from "knockout";
import DevExpress from "devexpress-reporting/dx-webdocumentviewer";
var componentData = {
    name: "WebDocumentViewer",
    data() {
        return {
            previewModel: ko.observable(),
        }
    },
    methods: {
        exportDocument() {
            this.previewModel().ExportTo('xlsx');
        },
    },
    mounted() {
        var reportUrl = ko.observable("TestReport"); // The URL of a report.
        var requestOptions = {
                // Specify the server-side application port.
                host: "http://localhost:64673/",
                // Use this line if you use an ASP.NET MVC backend
                //invokeAction: "/WebDocumentViewer/Invoke",
                // Use this line if you use an ASP.NET Core backend
                invokeAction: "DXXRDV"
            };
        var callbacks = {  
            CustomizeExportOptions: function(s,e){
                e.HideExportOptionsPanel();
                var model = e.GetExportOptionsModel(DevExpress.Reporting.Viewer.ExportFormatID.XLSX);
                // Encrypt the file. Encryption is performed in asynchronous mode.
                //model.encryptionOptions.password("1234");
                model.documentOptions.author("Me");
            },
            BeforeRender: function(){
                // Enable the asynchronous export mode.
                DevExpress.Reporting.Viewer.Settings.AsyncExportApproach = true;
            }
        };  
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
            callbacks: callbacks
        }, this.$refs.viewer);
    },
    beforeDestroy() {
        ko.cleanNode(this.$refs.viewer);
    }
};
export default componentData;
</script>

GetCurrentPageIndex Property

Returns the current page’s zero-based index.

Declaration

GetCurrentPageIndex: () => number

Property Value

Type	Description
() => number	A zero-based integer value that specifies the index of a current page.

Remarks

The code snippet below demonstrates how to use the ASPxClientReportDesigner.PreviewDocumentReady event to navigate through pages of a ready document. To obtain the current page number and navigate to the next page, use the GetCurrentPageIndex and GoToPage methods.

ASPX

<script type="text/javascript" id="script">
    function previewDocumentReady(s, e) {
        var previewModel = s.GetPreviewModel();
        var goToNextPage = function () {
            var pageIndex = previewModel.GetCurrentPageIndex();
            if (e.PageCount <= pageIndex)
                return;
            previewModel.GoToPage(pageIndex + 1);
            setTimeout(function () { goToNextPage(); }, 3000);
        }
        goToNextPage();
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">      
    <ClientSideEvents PreviewDocumentReady="previewDocumentReady"/>  
</dx:ASPxReportDesigner>

GetParametersModel Property

Allows you to access the report parameters’ client-side model.

Declaration

GetParametersModel: () => Parameters.PreviewParametersViewModel

Property Value

Type	Description
() => PreviewParametersViewModel	An action that returns the report parameters’ client-side model.

Remarks

The following code creates a button that passes a parameter to the report and rebuilds the document. When the document is created, the Document Viewer navigates to the last page:

ASP.NET Core

<script type="text/javascript" id="script">
    var docViewer;
    function GetDocumentViewer(s, e) {
        docViewer = s;
    }
    function BuildOnClick() {
        var parameterValue = 1;
        docViewer.GetParametersModel()["parameter1"](parameterValue);
        docViewer.StartBuild();
    }
    function GoToLastPage(s, e) {
        s.GoToPage(e.PageCount - 1);
    }
</script>

<button onclick="BuildOnClick()" type="button">
    Test
</button>

@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("1000px")
        .ClientSideEvents(configure =>
        {
            configure.BeforeRender("GetDocumentViewer");
            configure.DocumentReady("GoToLastPage");
        })
        .Bind("TestReport");
    @viewerRender.RenderHtml()
}

React

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

class ReportViewer extends React.Component {
  constructor(props) {
    super(props);
    this.reportUrl = ko.observable("XtraReport1");
    this.previewModel = ko.observable();
    this.requestOptions = {
        // Specify the server-side application port.
        host: "http://localhost:52454/",
        invokeAction: "DXXRDV"
    };
    this.buildDocument = this.buildDocument.bind(this);

    this.callbacks = {
      DocumentReady: function(s, e){
                        s.GoToPage(e.PageCount - 1);
      }
    };
  };

  buildDocument() {
            var parameterValue = 1;
            this.previewModel()
                .GetParametersModel()
                ["parameter1"](parameterValue);
            this.previewModel().StartBuild();
  };
  render() {
    return (
      <div>
        <button onClick={() => this.buildDocument()}>
          Build Document
        </button>
        <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
      </div>
    );
  }
  componentDidMount() {
    ko.applyBindings({
      reportUrl: this.reportUrl,
      viewerModel: this.previewModel,
      requestOptions: this.requestOptions,
      callbacks: this.callbacks
    }, this.refs.viewer);
  }
  componentWillUnmount() {
    ko.cleanNode(this.refs.viewer);
  }
};

export default ReportViewer;

Vue

<template>
    <div>
        <div>
            <button @click="buildDocument">Build Document</button>
        </div>
        <div
            ref="viewer"
            style="position: absolute; left: 0; right: 0"
            data-bind="dxReportViewer: $data"
        ></div>
    </div>
</template>

<script>
import ko from "knockout";

var componentData = {
    name: "WebDocumentViewer",
    data() {
        return {
            previewModel: ko.observable()
        };
    },
    methods: {
        buildDocument() {
            var parameterValue = 1;
            this.previewModel()
                .GetParametersModel()
                ["parameter1"](parameterValue);
            this.previewModel().StartBuild();
        }
    },
    mounted() {
        var reportUrl = ko.observable("XtraReport1"); // The URL of a report.
        var requestOptions = {
            // Specify the server-side application port.
            host: "http://localhost:52454/",
            // Use this line if you use an ASP.NET MVC backend
            //invokeAction: "/WebDocumentViewer/Invoke",
            // Use this line if you use an ASP.NET Core backend
            invokeAction: "DXXRDV"
        };
        var callbacks = {
            DocumentReady: function(s, e) {
                s.GoToPage(e.PageCount - 1);
            }
        };
        ko.applyBindings(
            {
                reportUrl: reportUrl,
                viewerModel: this.previewModel,
                requestOptions: requestOptions,
                callbacks: callbacks
            },
            this.$refs.viewer
        );
    },
    beforeDestroy() {
        ko.cleanNode(this.$refs.viewer);
    }
};
export default componentData;
</script>

GoToPage Property

Displays the report page with the specified page index.

Declaration

GoToPage: (pageIndex: number) => void

Property Value

Type	Description
(pageIndex: number) => void	A zero-based integer value that specifies the index of a page to be displayed.

Remarks

The code snippet below demonstrates how to use the ASPxClientReportDesigner.PreviewDocumentReady event to navigate through pages of a ready document. To obtain the current page number and navigate to the next page, use the IPreviewModel.GetCurrentPageIndex and GoToPage methods.

ASPX

<script type="text/javascript" id="script">
    function previewDocumentReady(s, e) {
        var previewModel = s.GetPreviewModel();
        var goToNextPage = function () {
            var pageIndex = previewModel.GetCurrentPageIndex();
            if (e.PageCount <= pageIndex)
                return;
            previewModel.GoToPage(pageIndex + 1);
            setTimeout(function () { goToNextPage(); }, 3000);
        }
        goToNextPage();
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">      
    <ClientSideEvents PreviewDocumentReady="previewDocumentReady"/>  
</dx:ASPxReportDesigner>

OpenReport Property

Opens the specified report.

Declaration

OpenReport: (reportUrl: string) => void

Property Value

Type	Description
(reportUrl: string) => void	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.

Tip

You can call the OpenReport method to update the displayed report.

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

ASP.NET Core

<script type="text/javascript" id="script">
    var docViewer;
    function GetDocumentViewer(s, e) {
        docViewer = s;
    }
</script>

<button onclick="docViewer.OpenReport('XtraReport1')" type="button">
    Open Report
</button>

@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("1000px")
        .ClientSideEvents(configure =>
        {
            configure.BeforeRender("GetDocumentViewer");
        })
        .Bind("TestReport");
    @viewerRender.RenderHtml()
}

React

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

class ReportViewer extends React.Component {
  constructor(props) {
    super(props);
    this.reportUrl = ko.observable("TestReport");
    this.previewModel = ko.observable();
    this.requestOptions = {
      // Specify the server-side application port.
      host: "http://localhost:52454/",
      invokeAction: "DXXRDV"
    };
    this.openReport = this.openReport.bind(this);

  };

  openReport() {
    this.previewModel().OpenReport("XtraReport1");
  };
  render() {
    return (
      <div>
        <button onClick={() => this.openReport()}>
          Open Report
        </button>
        <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
      </div>
    );
  }
  componentDidMount() {
    ko.applyBindings({
      reportUrl: this.reportUrl,
      viewerModel: this.previewModel,
      requestOptions: this.requestOptions,
    }, this.refs.viewer);
  }
  componentWillUnmount() {
    ko.cleanNode(this.refs.viewer);
  }
};

export default ReportViewer;

Vue

<template>
<div>
    <div>
        <button @click='openReport'>Open Report</button>
    </div>
    <div ref="viewer" style="position: absolute; left: 0; right: 0" data-bind="dxReportViewer: $data">
    </div>
</div>
</template>

<script>
import ko from "knockout";
import "devexpress-reporting/dx-webdocumentviewer";
var componentData = {
    name: "WebDocumentViewer",
    data() {
        return {
            previewModel: ko.observable(),
        }
    },
    methods: {
        openReport() {
            this.previewModel().OpenReport("XtraReport1");
        },
    },
    mounted() {
        var reportUrl = ko.observable("TestReport"); // The URL of a report.
        var requestOptions = {
        // Specify the server-side application port.
                host: "http://localhost:52454/",
                // Use this line for an ASP.NET MVC backend
                //invokeAction: "/WebDocumentViewer/Invoke",
                // Use this line for an ASP.NET Core backend
                invokeAction: "DXXRDV"
            };  
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
        }, this.$refs.viewer);
    },
    beforeDestroy() {
        ko.cleanNode(this.$refs.viewer);
    }
};
export default componentData;
</script>

Print Property

Prints the entire document or the specified page.

Declaration

Print: (pageIndex?: number) => JQueryPromise<boolean>

Property Value

Type	Description
(pageIndex?: number) => JQueryPromise<boolean>	A function that takes the page index and returns a Promise that is resolved after the document is sent to the caller for printing. If the page index is not specified, the entire document is printed.

Remarks

The method renders the report in PDF server side and returns PDF data to the browser. If the PDF plug-in is installed, the Print dialog displays the following:

If the PDF plug-in is unavailable, the Document Viewer exports the report document as a PDF file, and initiates the download instead of printing. The resulting PDF file contains a script that starts printing when the PDF viewer opens the file.

The following code demonstrates how to create a button that prints the Document Viewer’s report:

ASP.NET Core

<script type="text/javascript" id="script">
    var docViewer;
    function GetDocumentViewer(s, e) {
        docViewer = s;
    }
</script>

<button onclick="docViewer.Print()" type="button">
    Print Document
</button>

@(Html.DevExpress().WebDocumentViewer("WebDocumentViewer1")
    .Height("1000px")
    .ClientSideEvents(configure =>
        {
        configure.BeforeRender("GetDocumentViewer");
    })
    .Bind("TestReport"))

React

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

class ReportViewer extends React.Component {
  constructor(props) {
    super(props);
    this.reportUrl = ko.observable("TestReport");
    this.previewModel = ko.observable();
    this.requestOptions = {
      // Specify the server-side application port.
      host: "http://localhost:51856/",
      invokeAction: "DXXRDV"
    };
    this.printDocument = this.printDocument.bind(this);

  };

  printDocument() {
    this.previewModel().Print();
  };
  render() {
    return (
      <div>
        <button onClick={() => this.printDocument()}>
          Print Document
        </button>
        <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
      </div>
    );
  }
  componentDidMount() {
    ko.applyBindings({
      reportUrl: this.reportUrl,
      viewerModel: this.previewModel,
      requestOptions: this.requestOptions,
    }, this.refs.viewer);
  }
  componentWillUnmount() {
    ko.cleanNode(this.refs.viewer);
  }
};

export default ReportViewer;

Vue

<template>
<div>
    <div>
        <button @click='printDocument'>Print Document</button>
    </div>
    <div ref="viewer" style="position: absolute; left: 0; right: 0" data-bind="dxReportViewer: $data">
    </div>
</div>
</template>

<script>
import ko from "knockout";
import "devexpress-reporting/dx-webdocumentviewer";
var componentData = {
    name: "WebDocumentViewer",
    data() {
        return {
            previewModel: ko.observable(),
        }
    },
    methods: {
        printDocument() {
            this.previewModel().Print();
        },
    },
    mounted() {
        var reportUrl = ko.observable("TestReport"); // The URL of a report.
        var requestOptions = {
        // Specify the server-side application port.
                host: "http://localhost:64673/",
                // Use this line for an ASP.NET MVC backend
                //invokeAction: "/WebDocumentViewer/Invoke",
                // Use this line for an ASP.NET Core backend
                invokeAction: "DXXRDV"
            };  
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
        }, this.$refs.viewer);
    },
    beforeDestroy() {
        ko.cleanNode(this.$refs.viewer);
    }
};
export default componentData;
</script>

.

reportPreview Property

Provides access to the report preview.

Declaration

reportPreview: ReportPreview

Property Value

Type	Description
ReportPreview	A report preview.

ResetParameters Property

Resets the report parameter values to the default values.

Declaration

ResetParameters: () => void

Property Value

Type	Description
() => void	An action that resets the report parameter values to the default values.

Remarks

After default values of report parameters have been restored, the ASPxClientWebDocumentViewer.ParametersReset or ASPxClientReportDesigner.PreviewParametersReset event occurs.

StartBuild Property

Starts building a report document.

Declaration

StartBuild: () => void

Property Value

Type	Description
() => void	An action that starts building a report document.

Remarks

The following code creates a button that passes a parameter to the report and rebuilds the document. When the document is created, the Document Viewer navigates to the last page:

ASP.NET Core

<script type="text/javascript" id="script">
    var docViewer;
    function GetDocumentViewer(s, e) {
        docViewer = s;
    }
    function BuildOnClick() {
        var parameterValue = 1;
        docViewer.GetParametersModel()["parameter1"](parameterValue);
        docViewer.StartBuild();
    }
    function GoToLastPage(s, e) {
        s.GoToPage(e.PageCount - 1);
    }
</script>

<button onclick="BuildOnClick()" type="button">
    Test
</button>

@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("1000px")
        .ClientSideEvents(configure =>
        {
            configure.BeforeRender("GetDocumentViewer");
            configure.DocumentReady("GoToLastPage");
        })
        .Bind("TestReport");
    @viewerRender.RenderHtml()
}

React

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

class ReportViewer extends React.Component {
  constructor(props) {
    super(props);
    this.reportUrl = ko.observable("XtraReport1");
    this.previewModel = ko.observable();
    this.requestOptions = {
        // Specify the server-side application port.
        host: "http://localhost:52454/",
        invokeAction: "DXXRDV"
    };
    this.buildDocument = this.buildDocument.bind(this);

    this.callbacks = {
      DocumentReady: function(s, e){
                        s.GoToPage(e.PageCount - 1);
      }
    };
  };

  buildDocument() {
            var parameterValue = 1;
            this.previewModel()
                .GetParametersModel()
                ["parameter1"](parameterValue);
            this.previewModel().StartBuild();
  };
  render() {
    return (
      <div>
        <button onClick={() => this.buildDocument()}>
          Build Document
        </button>
        <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
      </div>
    );
  }
  componentDidMount() {
    ko.applyBindings({
      reportUrl: this.reportUrl,
      viewerModel: this.previewModel,
      requestOptions: this.requestOptions,
      callbacks: this.callbacks
    }, this.refs.viewer);
  }
  componentWillUnmount() {
    ko.cleanNode(this.refs.viewer);
  }
};

export default ReportViewer;

Vue

<template>
    <div>
        <div>
            <button @click="buildDocument">Build Document</button>
        </div>
        <div
            ref="viewer"
            style="position: absolute; left: 0; right: 0"
            data-bind="dxReportViewer: $data"
        ></div>
    </div>
</template>

<script>
import ko from "knockout";

var componentData = {
    name: "WebDocumentViewer",
    data() {
        return {
            previewModel: ko.observable()
        };
    },
    methods: {
        buildDocument() {
            var parameterValue = 1;
            this.previewModel()
                .GetParametersModel()
                ["parameter1"](parameterValue);
            this.previewModel().StartBuild();
        }
    },
    mounted() {
        var reportUrl = ko.observable("XtraReport1"); // The URL of a report.
        var requestOptions = {
            // Specify the server-side application port.
            host: "http://localhost:52454/",
            // Use this line if you use an ASP.NET MVC backend
            //invokeAction: "/WebDocumentViewer/Invoke",
            // Use this line if you use an ASP.NET Core backend
            invokeAction: "DXXRDV"
        };
        var callbacks = {
            DocumentReady: function(s, e) {
                s.GoToPage(e.PageCount - 1);
            }
        };
        ko.applyBindings(
            {
                reportUrl: reportUrl,
                viewerModel: this.previewModel,
                requestOptions: requestOptions,
                callbacks: callbacks
            },
            this.$refs.viewer
        );
    },
    beforeDestroy() {
        ko.cleanNode(this.$refs.viewer);
    }
};
export default componentData;
</script>

tabPanel Property

Provides access to a panel at the right of the Document Viewer.

Declaration

tabPanel: Analytics.Utils.TabPanel

Property Value

Type	Description
TabPanel	The tab panel.

Remarks

The tabPanel property provides access to the panel containing tabs with the Document Map, Parameters, Search Options and Export Options.

The code sample below demonstrates how to automatically collapse this panel after resetting parameter values in the ASPxClientReportDesigner.PreviewParametersReset event handler.

ASPX

<script type="text/javascript" id="script">
    function previewParametersReset(s, e) {
        var preview = s.GetPreviewModel();
        if (preview) {
            preview.tabPanel.collapsed(true);
        }
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">      
    <ClientSideEvents PreviewParametersReset="previewParametersReset"/>  
</dx:ASPxReportDesigner>