ASPxClientWebDocumentViewer Class

A client-side equivalent of the ASPxWebDocumentViewer class.

Declaration

declare class ASPxClientWebDocumentViewer extends ASPxClientControl

Inherited Members

Init

name

AdjustControl

GetClientVisible

GetHeight

GetMainElement

GetParentControl

GetVisible

GetWidth

InCallback

SendMessageToAssistiveTechnology(message)

SetClientVisible(visible)

SetHeight(height)

SetVisible(visible)

SetWidth(width)

AdjustControls

GetControlCollection

Inheritance

ASPxClientControlBase

ASPxClientControl

ASPxClientWebDocumentViewer

MVCxClientWebDocumentViewer

Methods

Cast(obj) Method

Converts the specified object to the current object’s type. This method is effective when you utilize the Client API IntelliSense feature provided by DevExpress.

Declaration

static Cast(
    obj: any
): ASPxClientWebDocumentViewer

Parameters

Name	Type	Description
obj	any	The client object to be type cast. Represents an instance of a DevExpress web control’s client object.

Returns

Type	Description
ASPxClientWebDocumentViewer	An ASPxClientWebDocumentViewer object.

Remarks

The Cast method is implemented as a part of the JavaScript IntelliSense support for DevExpress ASP.NET controls and MVC extensions. So, using the Cast method is sensible when you intend to use IntelliSense during writing JavaScript code at design time with the help of the DevExpress client API.

A call to the Cast method (which is a static method) casts the specified client object to the ASPxClientWebDocumentViewer type. As a result, the object’s type is now known and ASPxClientWebDocumentViewer type specific IntelliSense information can be displayed for this client object, facilitating your coding.

The examples of this method application are as follows.

• Converting the event source object passed to a client event’s handler:

  ...
  <ClientSideEvents Init="function(s, e) { 
      var clientObject = ASPxClientWebDocumentViewer.Cast(s);
  }" />
  

• Converting a client object accessed by using the value of the ClientInstanceName (or ID) property. For instance, if a web control’s ClientInstanceName property is set to ‘ASPxClientWebDocumentViewer1’, the object can be type cast in the following manner:

  ...
  var clientObject = ASPxClientWebDocumentViewer.Cast('ASPxClientWebDocumentViewer1');
  

Close Method

Closes the document which is currently opened in the Web Document Viewer.

Declaration

Close(): void

DrillThrough(customData) Method

Enables navigation between drill-through reports on the client-side.

Declaration

DrillThrough(
    customData: string
): JQueryPromise<any>

Parameters

Name	Type	Description
customData	string	Provides access to custom client data associated with a currently previewed report.

Returns

Type	Description
JQueryPromise<any>	A Deferred Promise object.

Remarks

Use this method to provide drill-through functionality to web reports. The customData parameter specifies the navigation logic.

To process mouse events related to report elements on the client, handle the client-side ASPxClientWebDocumentViewer.PreviewClick event.

On the server-side, implement the IWebDocumentViewerDrillThroughProcessor interface and register it by calling the DefaultWebDocumentViewerContainer.RegisterWebDocumentViewerDrillThroughProcessor<T> method at the application startup.

For a code sample, see How to provide drill-through functionality to web reports.

ExportTo Method

Exports the document to a specified file format.

Declaration

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

Parameters

Name	Type	Description
format	string	A String value that specifies the export format. The following formats are currently supported: ‘csv‘, ‘html‘, ‘image‘, ‘mht‘, ‘pdf‘, ‘rtf‘, ‘docx‘, ‘txt‘, ‘xls‘, and ‘xlsx‘.
inlineResult	boolean	true, to try opening the result file in a new browser tab without a download; otherwise, false.

Remarks

Once the document export has started, it will run until the resulting document is complete and cannot be interrupted or canceled in the process.

If the inlineResult parameter is set to true, but a file format is not supported by your browser, the resulting file will be downloaded.

GetCurrentPageIndex Method

Returns the current page’s zero-based index.

Declaration

GetCurrentPageIndex(): number

Returns

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 ASPxClientWebDocumentViewer.DocumentReady 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 ASPxClientWebDocumentViewer.GoToPage methods.

ASPX

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

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="WebReportDesigner.XtraReport1">
     <ClientSideEvents DocumentReady="documentReady"/>
</dx:ASPxWebDocumentViewer>

GetParametersModel Method

Provide access to the report parameters’ client-side model.

Declaration

GetParametersModel(): DevExpress.Reporting.Viewer.Parameters.PreviewParametersViewModel

Returns

Type	Description
PreviewParametersViewModel	An object that specifies the report parameters model.

Remarks

The model returned by the GetParametersModel method provides access to all available report parameters and allows you to provide their values on the client side, as illustrated below:

JS

var parameterValue = 1;
ASPxWebDocumentViewer1.GetParametersModel()["parameter1"](parameterValue);

GetPreviewModel Method

Provides access to the Document Viewer’s client-side model.

Declaration

GetPreviewModel(): DevExpress.Reporting.Viewer.Utils.IPreviewModel

Returns

Type	Description
IPreviewModel	An object that specifies the client-side preview model.

Remarks

Call the GetPreviewModel method to obtain the Document Viewer’s client-side model and perform the required actions with the Document Viewer UI and the current document.

The code sample below demonstrates how to automatically collapse the Parameters panel after resetting parameter values in the ASPxClientWebDocumentViewer.ParametersReset event handler.

ASPX

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

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="WebReportDesigner.XtraReport1">
    <ClientSideEvents ParametersReset ="parametersReset"/>
</dx:ASPxWebDocumentViewer>

GetReportPreview Method

Provides access to the report preview.

Declaration

GetReportPreview(): DevExpress.Reporting.Viewer.ReportPreview

Returns

Type	Description
ReportPreview	An object that specifies the report preview.

Remarks

The following code snippet demonstrates how to zoom a previewed document.

ASPX

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="DXWebApplication1.XtraReport1">
    <ClientSideEvents Init="function(s, e) { s.GetReportPreview().zoom(0.9); }"/>
</dx:ASPxWebDocumentViewer>

GoToPage(pageIndex) Method

Displays the report page with the specified page index.

Declaration

GoToPage(
    pageIndex: number
): void

Parameters

Name	Type	Description
pageIndex	number	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 ASPxClientWebDocumentViewer.DocumentReady event to navigate through pages of a ready document. To obtain the current page number and navigate to the next page, use the ASPxClientWebDocumentViewer.GetCurrentPageIndex and GoToPage methods.

ASPX

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

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="WebReportDesigner.XtraReport1">
     <ClientSideEvents DocumentReady="documentReady"/>
</dx:ASPxWebDocumentViewer>

OpenReport(url) Method

Opens the specified report on the Web Document Viewer’s client side.

Declaration

OpenReport(
    url: string
): JQueryPromise<any>

Parameters

Name	Type	Description
url	string	A string that specifies the URL of a report to be opened.

Returns

Type	Description
JQueryPromise<any>	A Deferred Promise object.

PerformCustomDocumentOperation Method

Performs a custom operation with a currently opened document on the client-side.

Declaration

PerformCustomDocumentOperation(
    customData?: string,
    hideMessageFromUser?: boolean
): JQueryPromise<DevExpress.Reporting.Viewer.Utils.IDocumentOperationResult>

Parameters

Name	Type	Description
customData	string	Provides access to custom client data associated with a target document operation.
hideMessageFromUser	boolean	true, to hide a message with the operation result from a user; otherwise, false.

Returns

Type	Description
JQueryPromise<IDocumentOperationResult>	A Deferred Promise object.

Remarks

Call the PerformCustomDocumentOperation method on the client side to perform the required operation with the current report document. The customData parameter contains data associated with a target operation.

On the sever side, create a DocumentOperationService class descendant and override its DocumentOperationService.CanPerformOperation and DocumentOperationService.PerformOperation methods. To register your custom class, use the DefaultWebDocumentViewerContainer.Register<T, TImpl> method at the application startup.

For a code sample, refer to Web Document Viewer - How to send a report via Email from the client side.

Print Method

Prints the document’s page with the specified index.

Declaration

Print(
    pageIndex?: number
): void

Parameters

Name	Type	Description
pageIndex	number	An index of the page to be printed.

Remarks

This method prints only one document page with the specified index. You can also use another overload of the Print method to print the entire document.

The printing functionality of the Web Document Viewer is based on rendering the report in PDF with special settings and invoking the PDF plug-in’s Print dialog.

After the Print method is called, the Document Viewer tries to use the PDF plug-in of the web browser to print. Depending on the plug-in detection result, there are two possible scenarios.

• If the PDF plug-in is installed and enabled, its Print dialog is invoked. To print the document, specify the required settings in this dialog and click Print.
• If the PDF plug-in is disabled or is not installed, the Document Viewer exports the report document to a PDF file, and initiates its download instead of printing. The resulting PDF file contains a script that starts printing the document immediately after it is opened in a compatible viewer.

For more information, refer to the Printing Overview document.

ResetParameters Method

Resets the report parameter values to the default values.

Declaration

ResetParameters(): void

Remarks

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

StartBuild Method

Starts building a report document.

Declaration

StartBuild(): void

UpdateLocalization(localization) Method

Updates the Web Document Viewer properties’ localization settings.

Declaration

UpdateLocalization(localization: { [key: string]: string; }): void

Parameters

Name	Type	Description
localization	{[key: string]: string}	A dictionary containing the property names, along with their localized equivalents.

Remarks

Use the UpdateLocalization method in the client-side ASPxClientWebDocumentViewer.CustomizeLocalization event to manually substitute particular localization strings with custom ones as shown below.

• ASP.NET WebForms

  ASPX

  <script type="text/javascript" id="script"> 
      function customizeLocalization(s) {
          s.UpdateLocalization({
              'Search': 'Suche',
              'Search result': 'Suchergebnisse',
              'Next Page' : 'Nächste Seite', // A tooltip text.
              'Export Options' : 'Exportoptionen'
          });
      }
  </script> 
  
  <dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server">
      <ClientSideEvents CustomizeLocalization="customizeLocalization"/>
  </dx:ASPxWebDocumentViewer>
  

• ASP.NET MVC

  C#

  @Html.DevExpress().WebDocumentViewer(settings => {
      settings.Name = "WebDocumentViewer";
      settings.ClientSideEvents.CustomizeLocalization = "function(s) { " +
      "s.UpdateLocalization({" +
          "'Search' : 'Suche'," +
          "'Search result' : 'Suchergebnisse'," +
          "'Next Page': 'Nächste Seite'," + // A tooltip text.
          "'Export Options' : 'Exportoptionen'});}";
  }).Bind(new DXWebApplication.XtraReport1()).GetHtml()
  

  VB.NET

  @Html.DevExpress().WebDocumentViewer(Sub(settings)
      settings.Name = "WebDocumentViewer";
      settings.ClientSideEvents.CustomizeLocalization = "function(s) { " +
      "s.UpdateLocalization({" & 
          "'Search' : 'Suche'," & 
          "'Search result' : 'Suchergebnisse'," & 
          "'Next Page': 'Nächste Seite'," &  // A tooltip text.
          "'Export Options' : 'Exportoptionen'});}";
  }).Bind(new DXWebApplication.XtraReport1()).GetHtml()
  

Events

BeforeRender Event

Occurs before the Web Document Viewer UI is initialized.

Declaration

BeforeRender: ASPxClientEvent<ASPxClientWebDocumentViewerBeforeRenderEventHandler<ASPxClientWebDocumentViewer>>

Event Data

The BeforeRender event's data class is ASPxClientWebDocumentViewerRenderModelEventArgs.

Remarks

Handle the BeforeRender event to perform required actions before the Web Document Viewer’s UI initialization.

The following code snippet demonstrates how to use this event to enable the multi-page mode.

ASPX

<script type="text/javascript" id="script">
     function BeforeRender(s, e) {
         e.reportPreview.showMultipagePreview(true);
     }
</script>

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="WebReportDesigner.XtraReport1">
     <ClientSideEvents BeforeRender="BeforeRender"/>
</dx:ASPxWebDocumentViewer>

CustomizeElements Event

Allows you to customize the Web Document Viewer’s UI elements.

Declaration

CustomizeElements: ASPxClientEvent<ASPxClientWebDocumentViewerCustomizeElementsEventHandler<ASPxClientWebDocumentViewer>>

Event Data

The CustomizeElements event's data class is ASPxClientCustomizeElementsEventArgs. The following properties provide information specific to this event:

Property	Description
Elements	Provides access to the collection of UI elements.

The event data class exposes the following methods:

Method	Description
GetById(templateId)	Returns UI elements with the specified ID.

Remarks

The event argument provides access to the ASPxClientCustomizeElementsEventArgs.Elements collection containing all available elements of the Web Document Viewer.

The ASPxClientCustomizeElementsEventArgs.GetById method allows you to obtain the required element by its ID using the DevExpress.Reporting.Viewer.PreviewElements object. The following elements are available within this object:

• RightPanel - corresponds to the panel at the right of the Viewer and containing tabs with the Document Map, Parameters, Export Options and Search Panel.
• Surface - corresponds to the Viewer’s central part displaying the report document.
• Toolbar - corresponds to the Document Viewer’s Toolbar.

The code sample below demonstrates how to use the CustomizeElements event to hide the Document Viewer Toolbar.

ASPX

<script type="text/javascript" id="script">
    function customizeElements(s, e) {
        var toolbarPart = e.GetById(DevExpress.Reporting.Viewer.PreviewElements.Toolbar);
        var index = e.Elements.indexOf(toolbarPart);
        e.Elements.splice(index, 1);
    }
</script>

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="WebReportDesigner.XtraReport1">
     <ClientSideEvents CustomizeElements="customizeElements"/>
</dx:ASPxWebDocumentViewer>

CustomizeExportOptions Event

Allows you to customize the Web Document Viewer’s available export formats and corresponding export options.

Declaration

CustomizeExportOptions: ASPxClientEvent<ASPxClientWebDocumentViewerCustomizeExportOptionsEventHandler<ASPxClientWebDocumentViewer>>

Event Data

The CustomizeExportOptions event's data class is ASPxClientCustomizeExportOptionsEventArgs.

The event data class exposes the following methods:

Method	Description
GetExportOptionsModel(format)	Returns the export options model for the specified export format.
HideExportOptionsPanel	Hides the entire Export Options panel from the Web Document Viewer.
HideFormat(format)	Hides the specified export format from the Export To drop-down list and the corresponding category from the Export Options panel.
HideProperties(format, properties)	Hides the specified options for the specified export format from the Export Options panel.

Remarks

The event argument provides the following methods:

• HideExportOptionsPanel - Hides the entire Export Options panel.

  function customizeExportOptions(s, e) {
      e.HideExportOptionsPanel();
  }
  

• HideFormat - Hides the specified export format from the Export To drop-down list and the corresponding category from the Export Options panel.

  function customizeExportOptions(s, e) {
      e.HideFormat(DevExpress.Reporting.Viewer.ExportFormatID.XLS); 
  }
  

• HideProperties - Hides the specified options for the specified export format from the Export Options panel. To remove all options for a particular export format, specify only the first method parameter.

  function customizeExportOptions(s, e) {            
      e.HideProperties(DevExpress.Reporting.Viewer.ExportFormatID.XLS, "ExportMode", "PageRange");
      e.HideProperties(DevExpress.Reporting.Viewer.ExportFormatID.XLSX);
  }
  

• GetExportOptionsModel - Returns the export options model for the specified export format. You can then use this model to customize various export options, for instance, change a specific option’s default value.

  function customizeExportOptions(s, e) {     
      var model = e.GetExportOptionsModel(DevExpress.Reporting.Viewer.ExportFormatID.XLS);
      model.exportHyperlinks(false);
  }
  

ASPX

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

To pass a required format to the methods listed above, use the DevExpress.Reporting.Viewer.ExportFormatID enumeration values: CSV, DOCX, HTML, Image, MHT, PDF, RTF, Text, XLS or XLSX.

CustomizeLocalization Event

Enables you to customize the Web Document Viewer’s localization strings.

Declaration

CustomizeLocalization: ASPxClientEvent<ASPxClientWebDocumentViewerCustomizeLocalizationEventHandler<ASPxClientWebDocumentViewer>>

Event Data

The CustomizeLocalization event's data class is ASPxClientCustomizeLocalizationEventArgs.

The event data class exposes the following methods:

Method	Description
LoadMessages(messages)	Loads the specified localization strings synchronously.

Remarks

Use the client-side ASPxClientWebDocumentViewer.UpdateLocalization method in the CustomizeLocalization event to manually substitute particular localization strings with custom ones as shown below.

• ASP.NET WebForms

  ASPX

  <script type="text/javascript" id="script"> 
      function customizeLocalization(s) {
          s.UpdateLocalization({
              'Search': 'Suche',
              'Search result': 'Suchergebnisse',
              'Next Page' : 'Nächste Seite', // A tooltip text.
              'Export Options' : 'Exportoptionen'
          });
      }
  </script> 
  
  <dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server">
      <ClientSideEvents CustomizeLocalization="customizeLocalization"/>
  </dx:ASPxWebDocumentViewer>
  

• ASP.NET MVC

  C#

  @Html.DevExpress().WebDocumentViewer(settings => {
      settings.Name = "WebDocumentViewer";
      settings.ClientSideEvents.CustomizeLocalization = "function(s) { " +
      "s.UpdateLocalization({" +
          "'Search' : 'Suche'," +
          "'Search result' : 'Suchergebnisse'," +
          "'Next Page': 'Nächste Seite'," + // A tooltip text.
          "'Export Options' : 'Exportoptionen'});}";
  }).Bind(new DXWebApplication.XtraReport1()).GetHtml()
  

  VB.NET

  @Html.DevExpress().WebDocumentViewer(Sub(settings)
      settings.Name = "WebDocumentViewer";
      settings.ClientSideEvents.CustomizeLocalization = "function(s) { " +
      "s.UpdateLocalization({" & 
          "'Search' : 'Suche'," & 
          "'Search result' : 'Suchergebnisse'," & 
          "'Next Page': 'Nächste Seite'," &  // A tooltip text.
          "'Export Options' : 'Exportoptionen'});}";
  }).Bind(new DXWebApplication.XtraReport1()).GetHtml()
  

CustomizeMenuActions Event

Enables you to customize the Web Document Viewer’s menu actions.

Declaration

CustomizeMenuActions: ASPxClientEvent<ASPxClientWebDocumentViewerCustomizeMenuActionsEventHandler<ASPxClientWebDocumentViewer>>

Event Data

The CustomizeMenuActions event's data class is ASPxClientCustomizeMenuActionsEventArgs. The following properties provide information specific to this event:

Property	Description
Actions	Provides access to the collection of actions available in the toolbar and menu.

The event data class exposes the following methods:

Method	Description
GetById(actionId)	Returns a menu action with the specified ID.

Remarks

The ASPxClientCustomizeMenuActionsEventArgs.Actions property of an event argument provides access to all commands available in the Web Document Viewer’s Toolbar. To obtain an existing command, use the ASPxClientCustomizeElementsEventArgs.GetById method.

The code below demonstrates the CustomizeMenuActions event handler that hides an existing command and registers a custom one.

JS

function CustomizeMenuActions(s, e) {
    var actions = e.Actions;

    // Get the "Print Page" action and hide it. 
    var printPageAction = e.GetById(DevExpress.Reporting.Viewer.ActionId.PrintPage);
    if (printPageAction)
        printPageAction.visible = false;

    // Add a new action. 
    actions.push({
        text: "Custom Command",
        imageClassName: "customButton",
        hasSeparator: false,
        disabled: ko.observable(false),
        visible: true,
        hotKey: { ctrlKey: true, keyCode: "Z".charCodeAt(0) },
        clickAction: function () {
            alert('Clicked.');
        }
    })
};

For more information, see Customizing the Document Viewer Toolbar in ASP.NET .

CustomizeParameterEditors Event

Occurs each time a standard editor is created for a report parameter based on a parameter type.

Declaration

CustomizeParameterEditors: ASPxClientEvent<ASPxClientWebDocumentViewerCustomizeParameterEditorsEventHandler<ASPxClientWebDocumentViewer>>

Event Data

The CustomizeParameterEditors event's data class is ASPxClientCustomizeParameterEditorsEventArgs. The following properties provide information specific to this event:

Property	Description
info	Provides access to an object that stores information required to serialize a parameter editor.
parameter	Provides access to an object that stores information about a parameter.

Remarks

Handle the CustomizeParameterEditors event to provide custom editors for report parameters. Check the event argument’s parameter property to identify a report parameter.

You can use the following ways to specify a custom editor:

Create an HTML Template

Define a custom HTML template and use the info.editor property to specify a header variable with the template name.

The following example demonstrates how to provide a custom dxNumberBox parameter editor with the enabled spin buttons and limited minimum and maximum values.

ASPX

<script type ="text/html" id="categoryID-custom-editor">
    <div data-bind="dxNumberBox: { value: value, showSpinButtons: true, min: 1, max: 8 }"> </div>
</script>

<script type="text/javascript">
    function CustomizeParameterEditors(s, e) {
      if (e.parameter.name == "categoryID") {
          e.info.editor = { header: 'categoryID-custom-editor' };
        }            
    }
</script>

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

See Provide Custom Editors for Report Parameters for more information.

Customize Editor Options

Use the info.editor.extendedOptions property to customize the corresponding DevExtreme UI Widget UI widget options.

The following example shows how to show a calendar editor without a time part.

ASPX

<script type ="text/html" id="categoryID-custom-editor">
    <div data-bind="dxNumberBox: { value: value, showSpinButtons: true, min: 1, max: 8 }"> </div>
</script>

<script type="text/javascript">
    function CustomizeParameterEditors(s, e) {
      if (e.parameter.type === 'System.DateTime') {
          e.info.editor = $.extend({}, e.info.editor);
          e.info.editor.extendedOptions = $.extend(e.info.editor.extendedOptions || {}, { type: 'date' });
      }         
    }
</script>

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

CustomizeParameterLookUpSource Event

Occurs each time a look-up editor is created for a report parameter.

Declaration

CustomizeParameterLookUpSource: ASPxClientEvent<ASPxClientWebDocumentViewerCustomizeParameterLookUpSourceEventHandler<ASPxClientWebDocumentViewer>>

Event Data

The CustomizeParameterLookUpSource event's data class is ASPxClientCustomizeParameterLookUpSourceEventArgs. The following properties provide information specific to this event:

Property	Description
dataSource	Specifies the data source that provides look-up values for the parameter editor.
items	Provides access to the collection of look-up parameter values.
parameter	Provides access to an object that stores information about a parameter.

Remarks

Handle the CustomizeParameterLookUpSource event to customize look-up parameter values.

The following example demonstrates how to sort look-up values of the categoryName parameter based on a custom rule. Declare an array that has category names in a sequence based on the required criterion. Then, check the parameter property of the event argument to identify the required parameter. Access look-up values using the items property and sort them using a custom sorting function, which compares indexes of categories in the array. Finally, pass a result to the dataSource property to apply changes.

JS

<dx:AspxWebDocumentViewer ID="AspxWebDocumentViewer1" runat="server">
    <ClientSideEvents CustomizeParameterLookUpSource="function(s, e) {
        var sortRule = ['Produce', 'Meat/Poultry', 'Dairy Products',
            'Grains/Cereals', 'Seafood', 'Confections', 'Condiments', 'Beverages'];

        if(e.parameter.name == 'categoryName') {
            e.items.sort(function(a, b) { 
                if (sortRule.indexOf(a.value) > sortRule.indexOf(b.value)) {
                    return 1;
                }
                if (sortRule.indexOf(a.value) < sortRule.indexOf(b.value)) {
                    return -1;
                }
                return 0;
            });
            e.dataSource = new DevExpress.data.DataSource({ store: e.items});
        }
    }"/>
</dx:AspxWebDocumentViewer>

DocumentReady Event

Occurs after the Web Document Viewer loads a report document.

Declaration

DocumentReady: ASPxClientEvent<ASPxClientWebDocumentViewerDocumentReadyEventHandler<ASPxClientWebDocumentViewer>>

Event Data

The DocumentReady event's data class is ASPxClientWebDocumentViewerDocumentReadyEventArgs. The following properties provide information specific to this event:

Property	Description
DocumentId	Specifies the report document ID.
PageCount	Specifies the total number of pages in a report document.
ReportId	Specifies the report ID.

Remarks

Handle the DocumentReady event to respond to loading a report document to the Web Document Viewer on the client side.

The code snippet below demonstrates how to use this event to navigate through pages of a ready document. The ASPxClientWebDocumentViewerDocumentReadyEventArgs.PageCount field of an event argument specifies the total number of pages in the loaded document. To obtain the current page number and navigate to the next page, use the ASPxClientWebDocumentViewer.GetCurrentPageIndex and ASPxClientWebDocumentViewer.GoToPage methods.

ASPX

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

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="WebReportDesigner.XtraReport1">
     <ClientSideEvents DocumentReady="documentReady"/>
</dx:ASPxWebDocumentViewer>

EditingFieldChanged Event

Occurs each time an editing field’s value changes.

Declaration

EditingFieldChanged: ASPxClientEvent<ASPxClientWebDocumentViewerEditingFieldChangedEventHandler<ASPxClientWebDocumentViewer>>

Event Data

The EditingFieldChanged event's data class is ASPxClientWebDocumentViewerEditingFieldChangedEventArgs. The following properties provide information specific to this event:

Property	Description
Field	Gets an editing field whose value has been changed.
NewValue	Provides access to a new value of an editing field.
OldValue	Provides access to a previous value of an editing field.

Remarks

Each time the current field value changes, the EditingFieldChanged event occurs, allowing you to respond to this action (for instance, validate input data or format the edited value).

The example below demonstrates how to change an editing field’s value to a previous value if a new value does not meet to required conditions.

ASPX

<script type="text/javascript" id="script">
    function editingFieldChanged(s, e) {       
        if ((e.Field.id() === "UnitsInStock") && (e.NewValue > 100))
            e.NewValue = e.OldValue;
    }
</script>

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="WebReportDesigner.XtraReport1">
     <ClientSideEvents EditingFieldChanged="editingFieldChanged"/>
</dx:ASPxWebDocumentViewer>

OnServerError Event

Occurs on the client each time a server-side error raises.

Declaration

OnServerError: ASPxClientEvent<ASPxClientWebDocumentViewerErrorEventHandler<ASPxClientWebDocumentViewer>>

Event Data

The OnServerError event's data class is ASPxClientErrorEventArgs. The following properties provide information specific to this event:

Property	Description
Error	Provides access to information about a server-side error.

Remarks

Handle the OnServerError event to perform actions when an Ajax request completes with an error.

The following code snippet demonstrates how to show an alert box when any internal server error occurs.

ASPX

<script type="text/javascript" id="script">
    function onError(s, e) {
        alert("Internal Server Error occurs");
    }
</script>

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server">
    <ClientSideEvents OnServerError="onError"/>
</dx:ASPxWebDocumentViewer>

ParametersReset Event

Occurs after report parameter values are reset to their default values.

Declaration

ParametersReset: ASPxClientEvent<ASPxClientWebDocumentViewerParametersResetEventHandler<ASPxClientWebDocumentViewer>>

Event Data

The ParametersReset event's data class is ASPxClientParametersResetEventArgs. The following properties provide information specific to this event:

Property	Description
Parameters	Provides access to report parameters whose values have been reset.
ParametersViewModel	Provides access to a View Model for report parameters.

Remarks

The ParametersReset event fires when an end-user has pressed the Reset button in the Parameters panel, or when the ASPxClientWebDocumentViewer.ResetParameters method has been called.

The code sample below demonstrates how to use this event to automatically collapse the Parameters panel after reseting parameter values.

ASPX

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

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="WebReportDesigner.XtraReport1">
    <ClientSideEvents ParametersReset ="parametersReset"/>
</dx:ASPxWebDocumentViewer>

ParametersSubmitted Event

Occurs after report parameter values are submitted.

Declaration

ParametersSubmitted: ASPxClientEvent<ASPxClientWebDocumentViewerParametersSubmittedEventHandler<ASPxClientWebDocumentViewer>>

Event Data

The ParametersSubmitted event's data class is ASPxClientParametersSubmittedEventArgs. The following properties provide information specific to this event:

Property
Parameters
ParametersViewModel

Remarks

The ParametersSubmitted event fires when all parameter values have been entered in the Parameters panel and the Submit button has been pressed.

You can handle this event to check values of requested report parameters, or to automatically collapse the Parameters panel, as demonstrated below.

ASPX

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

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="WebReportDesigner.XtraReport1">
    <ClientSideEvents ParametersSubmitted ="parametersSubmitted"/>
</dx:ASPxWebDocumentViewer>

PreviewClick Event

Occurs when the left mouse button is clicked on a report document.

Declaration

PreviewClick: ASPxClientEvent<ASPxClientWebDocumentViewerPreviewClickEventHandler<ASPxClientWebDocumentViewer>>

Event Data

The PreviewClick event's data class is ASPxClientPreviewClickEventArgs. The following properties provide information specific to this event:

Property	Description
Brick	Provides information on a visual brick representing content of a report control that has been clicked.
Handled	Specifies whether or not the event was handled and no default processing is required.
PageIndex	Gets a value specifying the zero-based index of the page that has been clicked.

The event data class exposes the following methods:

Method	Description
DefaultHandler	Specifies the default function used to handle the ASPxClientWebDocumentViewer.PreviewClick event.
GetBrickText	Returns the text displayed by the ASPxClientPreviewClickEventArgs.Brick.
GetBrickValue	Returns a string providing additional information about the current ASPxClientPreviewClickEventArgs.Brick by the specified key.

Remarks

Handle the PreviewClick event to perform different actions when an end-user clicks the report document opened in the Web Document Viewer. You can obtain a text displayed by the corresponding report element using the ASPxClientPreviewClickEventArgs.GetBrickText method and additional brick information (the XRControl.Tag property value) using the ASPxClientPreviewClickEventArgs.GetBrickValue method.

The following code snippet demonstrates how to obtain the text of an element that has been clicked.

ASPX

<script type="text/javascript" id="script">
    function previewClick(s, e) {
        e.Brick && alert(e.Brick.text())
    }
</script>

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="WebReportDesigner.XtraReport1">
     <ClientSideEvents PreviewClick="previewClick"/>
</dx:ASPxWebDocumentViewer>

The example below illustrates how to ask the user to confirm an operation related to expanding/collapsing data in a drill-down report and navigating to an URL. The IBrickNode.navigation property provides access to a brick’s navigation settings. Use the ASPxClientPreviewClickEventArgs.Handled property to specify whether or not default processing (specified by the ASPxClientPreviewClickEventArgs.DefaultHandler function) is required, depending on the confirmation result.

ASPX

<script type="text/javascript" id="script">
    function previewClick(s, e) {
        if (!e.Brick)
            return
        var navigation = e.Brick.navigation;
        if (navigation) {
            var ok = true;
            if (navigation.drillDownKey) {
                ok = confirm('Are you sure you want to expand/collapse data?');
            } else if (navigation.url) {
                ok = confirm('Are you sure you want to navigate to the following URL: ' + navigation.url);
            }
            e.Handled = !ok;
        }
    }
</script>

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="WebReportDesigner.XtraReport1">
     <ClientSideEvents PreviewClick="previewClick"/>
</dx:ASPxWebDocumentViewer>