WebDocumentViewerClientSideEventsBuilderBase<TBuilder, TEvents>.CustomizeParameterEditors(String) Method

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

Namespace : DevExpress.AspNetCore.Reporting.WebDocumentViewer

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

NuGet Package : DevExpress.AspNetCore.Reporting

csharp

public TBuilder CustomizeParameterEditors(
    string callback
)

Public Function CustomizeParameterEditors(
    callback As String
) As TBuilder

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
TBuilder

The WebDocumentViewerClientSideEventsBuilderBase<TBuilder, TEvents> object 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

html

<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
Angular
React
Vue

html

<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

report-viewer.html

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

typescript

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

typescript

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

function App() {
  const onCustomizeParameterEditors = (event: any): void => {
    if (event.args.parameter.type === 'System.DateTime') {
      event.args.info.editor = event.args.info.editor;
      event.args.info.editor.extendedOptions = (event.args.info.editor.extendedOptions || {}, { type: 'date' });
    }
  };

  return (
    <ReportViewer reportUrl="TestExportReport">
      <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
      <Callbacks CustomizeParameterEditors={onCustomizeParameterEditors} />
    </ReportViewer>
  )
}

export default App

javascript

<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

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.