WebDocumentViewerClientSideEventsBuilder.CustomizeParameterEditors(String) Method

Specifies the JavaScript function that handles the client-side CustomizeParameterEditors event.

Namespace: DevExpress.AspNetCore.Reporting.WebDocumentViewer

Assembly: DevExpress.AspNetCore.Reporting.v23.2.dll

NuGet Package: DevExpress.AspNetCore.Reporting

Declaration

C#

public WebDocumentViewerClientSideEventsBuilder CustomizeParameterEditors(
    string callback
)

VB.NET

Public Function CustomizeParameterEditors(
    callback As String
) As WebDocumentViewerClientSideEventsBuilder

Parameters

Name	Type	Description
callback	String	The name of a JavaScript function or entire JavaScript function code that runs when the CustomizeParameterEditors event occurs.

Returns

Type	Description
WebDocumentViewerClientSideEventsBuilder	A WebDocumentViewerClientSideEventsBuilder that can be used for method chaining.

Remarks

The client-side CustomizeParameterEditors event allows you to customize parameter editors.

The handler function receives two parameters: the first parameter is the client-side DocumentViewer that exposes the IPreviewModel interface (or the JSReportViewer object), the second is an object with the following properties:

parameter

An object that stores information about a parameter.

info

An object that stores information required to serialize a parameter editor.

You can use two methods to specify a custom editor - use a custom template or modify the editor’s extended options.

Review the following help topic for information about how to customize a standard parameter editor and implement a custom editor for a standard parameter type: Custom Parameter Editor in the Document Viewer (ASP.NET Core).

Example: Use Custom Template

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

The following example implements a custom dxNumberBox parameter editor with spin buttons limited by minimum and maximum values.

ASP.NET Core

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

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

@{
    var documentViewer = Html.DevExpress().WebDocumentViewer("webDocumentViewer1")
        .Height("1000px")
        .Bind(Model.Report)
        .ClientSideEvents(configure => { configure.CustomizeParameterEditors("customizeParameterEditors"); });;
}
@documentViewer

Example: Customize Editor Options

Use the info.editor.extendedOptions property to customize the DevExtreme component’s options.

The following example removes the time part from the calendar editor.

ASP.NET Core

<script type="text/javascript" id="script"> 
    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> 

@{
    var documentViewer = Html.DevExpress().WebDocumentViewer("webDocumentViewer1")
        .Height("1000px")
        .Bind(Model.Report)
        .ClientSideEvents(configure => { configure.CustomizeParameterEditors("customizeParameterEditors"); });;
}
@documentViewer

Angular

  report-viewer.html

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (CustomizeParameterEditors)="onCustomizeParameterEditors($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({
    selector: 'report-viewer',
    encapsulation: ViewEncapsulation.None,
//...
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    invokeAction: string = '/DXXRDV';

    onCustomizeParameterEditors(event) {
        let e = event.args;
        if (e.parameter.type === 'System.DateTime') {
            e.info.editor = e.info.editor;
            e.info.editor.extendedOptions = (e.info.editor.extendedOptions || {}, { type: 'date' });
        }
    }

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

React

import React from 'react';
import ko from 'knockout';
import 'devexpress-reporting/dx-webdocumentviewer';
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 backend ASP.NET Core application URL.
            host: "https://localhost:44370",
            invokeAction: "/DXXRDV"
        };

        this.callbacks = {
            CustomizeParameterEditors(s,e) {
                if (e.parameter.type === 'System.DateTime') {
                    e.info.editor = e.info.editor;
                    e.info.editor.extendedOptions = (e.info.editor.extendedOptions || {}, { type: 'date' });
                }
            }
        };
    };

    render() {
        return (
          <div>
            <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);
    }
};

function App() {
return (<div style={{ width: "100%", height: "1000px" }}>
    <ReportViewer />
</div>);
}

export default App;

Vue

<template>
<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';
import $ from "jquery";

export default {
name: "WebDocumentViewer",
data() {
    return {
        previewModel: ko.observable(),
    }
},
    mounted() {
        var reportUrl = ko.observable("TestReport");
        var requestOptions = {
                // Specify the backend application URL.
                host: "https://localhost:44370/",
                // 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 = {  
            CustomizeParameterEditors: function(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' });
                }
            }
        };    
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
            callbacks: callbacks
        }, this.$refs.viewer);
    },
beforeUnmount() {
    ko.cleanNode(this.$refs.viewer);
}
};

</script>

Example: Validate Parameter Values

DevExtreme editors used in the Parameters panel allow you to validate the values that the user enters and make the parameter “required”.

The following code does not allow the user to leave the parameter1 editor blank, and accepts only even numbers.

JavaScript

function onCustomizeParameterEditors(s, e) {
    if (e.parameter.name === 'parameter1') {
        e.info.validationRules = [{
            type: 'custom',
            validationCallback: validateNumber,
            message: 'Only even numbers are allowed!'
        }];
    }
};
function validateNumber(e) {
    return (e.value != '') && (e.value % 2 == 0)
}; 

For more information on custom validation rules for DevExtreme editors, review the following help topic: CustomRule.