ASPxClientCustomizeExportOptionsEventArgs Class

Allows you to customize the export panel and export options.

Declaration

declare class ASPxClientCustomizeExportOptionsEventArgs extends ASPxClientEventArgs

Remarks

ASPxClientCustomizeExportOptionsEventArgs objects are automatically created, initialized and passed to the following event handler and callback functions:

• ASPxClientWebDocumentViewer.CustomizeExportOptions event handler;
• ASPxClientReportDesigner.PreviewCustomizeExportOptions event handler;
• a function specified by the WebDocumentViewerClientSideEvents.CustomizeExportOptions property;
• a CustomizeExportOptions callback function in the Knockout binding for JavaScript frameworks. (Refer to the following help topic for more information: Document Viewer Client-Side Configuration (Knockout Bindings).)

Inheritance

ASPxClientEventArgs

ASPxClientCustomizeExportOptionsEventArgs

constructor(options)

Initializes a new instance of the ASPxClientCustomizeExportOptionsEventArgs class with the specified export options.

Declaration

constructor(
    options: any
)

Parameters

Name	Type	Description
options	any	An object that stores export options.

Methods

GetExportOptionsModel(format) Method

Returns the export options model for the specified export format.

Declaration

GetExportOptionsModel(
    format: any
): any

Parameters

Name	Type	Description
format	any	An ExportFormatID enumeration value.

Returns

Type	Description
any	An export options model.

Remarks

You can use an export options model to specify the default export options. The following code snippet, for example, specifies the ‘|” symbol as a separator for CSV data:

ASP.NET Web Forms

<script type="text/javascript">
    function onCustomizeExportOptions(s, e) {
        var model = e.GetExportOptionsModel(DevExpress.Reporting.Viewer.ExportFormatID.CSV);
        model.separator = '|';
    }
</script>

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server">
    <ClientSideEvents CustomizeExportOptions="onCustomizeExportOptions"/>
</dx:ASPxWebDocumentViewer>

ASP.NET MVC

<script type="text/javascript">
    function onCustomizeExportOptions(s, e) {
        var model = e.GetExportOptionsModel(DevExpress.Reporting.Viewer.ExportFormatID.CSV);
        model.separator = '|';
    }
</script>

@Html.DevExpress().WebDocumentViewer(settings =>
{
    settings.Name = "WebDocumentViewer1";
    settings.ClientSideEvents.CustomizeExportOptions = "onCustomizeExportOptions";
}).Bind("XtraReport1").GetHtml()

ASP.NET Core

<script type="text/javascript">
    function onCustomizeExportOptions(s, e) {
        var model = e.GetExportOptionsModel(DevExpress.Reporting.Viewer.ExportFormatID.CSV);
        model.separator = '|';
    }
</script>


@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .ClientSideEvents(configure =>
        {
            configure.CustomizeExportOptions("onCustomizeExportOptions");
        })
        .Height("1000px")
        .Bind("XtraReport1");
    @viewerRender.RenderHtml()
}

Angular

 

report-viewer.html

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (CustomizeExportOptions)="OnCustomizeExportOptions($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'
import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';


@Component({
// ...
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    invokeAction: string = '/DXXRDV';

    OnCustomizeExportOptions(event) {
        var model = event.args.GetExportOptionsModel(ExportFormatID.CSV);
        model.separator = '|';
    }

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

React

'use client';
import ReportViewer, { RequestOptions, Callbacks } from 'devexpress-reporting-react/dx-report-viewer';
import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'

function App() {
  const onCustomizeExportOptions = ({ args }: { args: any }): void => {
    var model = args.GetExportOptionsModel(ExportFormatID.CSV);
    model.separator = '|';
    args.HideProperties(ExportFormatID.XLS, "ExportMode", "PageRange");
    args.HideProperties(ExportFormatID.XLSX);
  };
  return (
    <ReportViewer reportUrl="TestReport">
      <RequestOptions host="http://localhost:5000/" invokeAction="DXXRDV" />
      <Callbacks CustomizeExportOptions={onCustomizeExportOptions} />
    </ReportViewer>
  )
}

export default App

Vue

import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'
import ko from "knockout";


var componentData = {
    name: "WebDocumentViewer",
    mounted() {
    // ...
        var    callbacks = {  
      CustomizeExportOptions: function(s, e){
        var model = e.GetExportOptionsModel(ExportFormatID.CSV);
        model.separator = '|';
      }
        };    
        ko.applyBindings({
      // ..
            callbacks: callbacks
        }, this.$refs.viewer);
    },
  // ...
};
export default componentData;

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

To specify a document format in the method’s parameter, use the ExportFormatID enumeration value.

HideExportOptionsPanel Method

Hides the Export Options panel in the Web Document Viewer.

Declaration

HideExportOptionsPanel(): void

Remarks

The following code snippet hides the Export Options panel in the Web Document Viewer:

ASP.NET Web Forms

<script type="text/javascript">
    function onCustomizeExportOptions(s, e) {
        e.HideExportOptionsPanel();
    }
</script>

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server">
    <ClientSideEvents CustomizeExportOptions="onCustomizeExportOptions"/>
</dx:ASPxWebDocumentViewer>

ASP.NET MVC

<script type="text/javascript">
    function onCustomizeExportOptions(s, e) {
        e.HideExportOptionsPanel();
    }
</script>

@Html.DevExpress().WebDocumentViewer(settings =>
{
    settings.Name = "WebDocumentViewer1";
    settings.ClientSideEvents.CustomizeExportOptions = "onCustomizeExportOptions";
}).Bind("XtraReport1").GetHtml()

ASP.NET Core

<script type="text/javascript">
    function onCustomizeExportOptions(s, e) {
        e.HideExportOptionsPanel();
    }
</script>


@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .ClientSideEvents(configure =>
        {
            configure.CustomizeExportOptions("onCustomizeExportOptions");
        })
        .Height("1000px")
        .Bind("XtraReport1");
    @viewerRender.RenderHtml()
}

Angular

 

report-viewer

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (CustomizeExportOptions)="OnCustomizeExportOptions($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
// ...
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    invokeAction: string = '/DXXRDV';

    OnCustomizeExportOptions(event) {
        e.HideExportOptionsPanel();
    }

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

React

'use client';
import React from 'react';
import ReportViewer, { Callbacks, DxReportViewerRef, RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';
import { ExportFormatID, AsyncExportApproach } from 'devexpress-reporting/dx-webdocumentviewer'

function App() {
  const viewerRef = React.useRef<DxReportViewerRef>();
  const onCustomizeExportOptions = (event: any): void => {
    event.args.HideExportOptionsPanel();
    var model = event.args.GetExportOptionsModel(ExportFormatID.XLSX);
    // Encrypt the file. Encryption is performed in asynchronous mode.
    //model.encryptionOptions.password = "1234";
    model.documentOptions.author = "Me";
  };
  const onBeforeRender = (event: any): void => {
    AsyncExportApproach(true);
  };
  const exportDocument = () => viewerRef.current?.instance().ExportTo('xlsx');
  return (
    <>
      <button onClick={exportDocument}>Export to XLSX</button>
      <ReportViewer ref={viewerRef} reportUrl="TestReport">
        <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
        <Callbacks CustomizeExportOptions={onCustomizeExportOptions} BeforeRender={onBeforeRender} />
      </ReportViewer>
    </>
  )
}

export default App

Vue

<script>
import ko from "knockout";

var componentData = {
    name: "WebDocumentViewer",
    mounted() {
    // ...
        var    callbacks = {  
      CustomizeExportOptions: function(s, e){
        e.HideExportOptionsPanel();
      }
        };    
        ko.applyBindings({
      // ..
            callbacks: callbacks
        }, this.$refs.viewer);
    },
  // ...
};
export default componentData;
</script>

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

HideFormat(format) Method

Removes the specified export format from the Export To drop-down list and from the Export Options panel.

Declaration

HideFormat(
    format: any
): void

Parameters

Name	Type	Description
format	any	An ExportFormatID enumeration value that specifies the export format to hide.

Remarks

The following code snippet removes the XLS format from the Export To drop-down list and from the Export Options panel:

ASP.NET Web Forms

<script type="text/javascript">
    function onCustomizeExportOptions(s, e) {
        e.HideFormat(DevExpress.Reporting.Viewer.ExportFormatID.XLS);
    }
</script>

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server">
    <ClientSideEvents CustomizeExportOptions="onCustomizeExportOptions"/>
</dx:ASPxWebDocumentViewer>

ASP.NET MVC

<script type="text/javascript">
    function onCustomizeExportOptions(s, e) {
        e.HideFormat(DevExpress.Reporting.Viewer.ExportFormatID.XLS);
    }
</script>

@Html.DevExpress().WebDocumentViewer(settings =>
{
    settings.Name = "WebDocumentViewer1";
    settings.ClientSideEvents.CustomizeExportOptions = "onCustomizeExportOptions";
}).Bind("XtraReport1").GetHtml()

ASP.NET Core

<script type="text/javascript">
    function onCustomizeExportOptions(s, e) {
        e.HideFormat(DevExpress.Reporting.Viewer.ExportFormatID.XLS);
    }
</script>


@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .ClientSideEvents(configure =>
        {
            configure.CustomizeExportOptions("onCustomizeExportOptions");
        })
        .Height("1000px")
        .Bind("XtraReport1");
    @viewerRender.RenderHtml()
}

Angular

 

report-viewer.html

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (CustomizeExportOptions)="OnCustomizeExportOptions($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'
import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';


@Component({
// ...
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    invokeAction: string = '/DXXRDV';

    OnCustomizeExportOptions(event) {
        e.HideFormat(ExportFormatID.XLS);
    }

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

React

'use client';
import ReportViewer, { RequestOptions, Callbacks } from 'devexpress-reporting-react/dx-report-viewer';
import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer';

function App() {
  const onCustomizeExportOptions = ({ args }: { args: any }): void => {
    args.HideFormat(ExportFormatID.XLS);
  };
  return (
    <ReportViewer reportUrl="TestExportReport">
      <RequestOptions host="http://localhost:5000/" invokeAction="DXXRDV" />
      <Callbacks CustomizeExportOptions={onCustomizeExportOptions} />
    </ReportViewer>
  )
}

export default App

Vue

<script>
import ko from "knockout";
import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'

var componentData = {
    name: "WebDocumentViewer",
    mounted() {
    // ...
        var    callbacks = {  
      CustomizeExportOptions: function(s, e){
        e.HideFormat(ExportFormatID.XLS);
      }
        };    
        ko.applyBindings({
      // ..
            callbacks: callbacks
        }, this.$refs.viewer);
    },
  // ...
};
export default componentData;
</script>

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

HideProperties(format, properties) Method

Hides the specified options for the designated export format from the Export Options panel in the Document Viewer.

Declaration

HideProperties(
    format: any,
    ... properties: any[]
): void

Parameters

Name	Type	Description
format	any	An ExportFormatID enumeration value that specifies the export format whose options should be hidden.
properties	any[]	An array of properties to hide. If this parameter is omitted, all export options for the specified document format are hidden.

Remarks

The code snippet below hides the following export options in the Document Viewer’s Export Options panel:

• ExportMode option for the XLS format
• PageRange option for the XLS format
• all options for the XLSX format.

ASP.NET Web Forms

<script type="text/javascript">
    function onCustomizeExportOptions(s, e) {
        e.HideProperties(DevExpress.Reporting.Viewer.ExportFormatID.XLS, "ExportMode", "PageRange");
        e.HideProperties(DevExpress.Reporting.Viewer.ExportFormatID.XLSX);
    }
</script>

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server">
    <ClientSideEvents CustomizeExportOptions="onCustomizeExportOptions"/>
</dx:ASPxWebDocumentViewer>

ASP.NET MVC

<script type="text/javascript">
    function onCustomizeExportOptions(s, e) {
        e.HideProperties(DevExpress.Reporting.Viewer.ExportFormatID.XLS, "ExportMode", "PageRange");
        e.HideProperties(DevExpress.Reporting.Viewer.ExportFormatID.XLSX);
    }
</script>

@Html.DevExpress().WebDocumentViewer(settings =>
{
    settings.Name = "WebDocumentViewer1";
    settings.ClientSideEvents.CustomizeExportOptions = "onCustomizeExportOptions";
}).Bind("XtraReport1").GetHtml()

ASP.NET Core

<script type="text/javascript">
    function onCustomizeExportOptions(s, e) {
        e.HideProperties(DevExpress.Reporting.Viewer.ExportFormatID.XLS, "ExportMode", "PageRange");
        e.HideProperties(DevExpress.Reporting.Viewer.ExportFormatID.XLSX);
    }
</script>


@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .ClientSideEvents(configure =>
        {
            configure.CustomizeExportOptions("onCustomizeExportOptions");
        })
        .Height("1000px")
        .Bind("XtraReport1");
    @viewerRender.RenderHtml()
}

Angular

 

report-viewer

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (CustomizeExportOptions)="OnCustomizeExportOptions($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';
import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'

@Component({
// ...
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    invokeAction: string = '/DXXRDV';

    OnCustomizeExportOptions(event) {
        e.HideProperties(ExportFormatID.XLS, "ExportMode", "PageRange");
        e.HideProperties(ExportFormatID.XLSX);
    }

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

React

'use client';
import ReportViewer, { RequestOptions, Callbacks } from 'devexpress-reporting-react/dx-report-viewer';
import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'

function App() {
  const onCustomizeExportOptions = ({ args }: { args: any }): void => {
    var model = args.GetExportOptionsModel(ExportFormatID.CSV);
    model.separator = '|';
    args.HideProperties(ExportFormatID.XLS, "ExportMode", "PageRange");
    args.HideProperties(ExportFormatID.XLSX);
  };
  return (
    <ReportViewer reportUrl="TestReport">
      <RequestOptions host="http://localhost:5000/" invokeAction="DXXRDV" />
      <Callbacks CustomizeExportOptions={onCustomizeExportOptions} />
    </ReportViewer>
  )
}

export default App

Vue

<script>
import ko from "knockout";
import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'

var componentData = {
    name: "WebDocumentViewer",
    mounted() {
    // ...
        var    callbacks = {  
      CustomizeExportOptions: function(s, e){
        e.HideProperties(ExportFormatID.XLS, "ExportMode", "PageRange");
        e.HideProperties(ExportFormatID.XLSX);
      }
        };    
        ko.applyBindings({
      // ..
            callbacks: callbacks
        }, this.$refs.viewer);
    },
  // ...
};
export default componentData;
</script>

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