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

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

Namespace : DevExpress.AspNetCore.Reporting.WebDocumentViewer

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

NuGet Package : DevExpress.AspNetCore.Reporting

csharp

public TBuilder CustomizeParameterLookUpSource(
    string callback
)

Public Function CustomizeParameterLookUpSource(
    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 CustomizeParameterLookUpSource event occurs.

Returns

Type	Description
TBuilder

The WebDocumentViewerClientSideEventsBuilderBase<TBuilder, TEvents> object that can be used for method chaining.

Remarks

The CustomizeParameterLookUpSource event occurs each time a look-up editor is created for a report parameter. The event handler function receives two parameters. The first parameter is the event sender. The second parameter is an object with the following structure:

parameter
An object that stores information about a parameter.
items
A collection of look-up parameter values.
dataSource
A data source with look-up values for the parameter editor.

Example: Retrieve Lookup Values on the Client

The following example populates the client parameter editors with values specified in a JavaScript function or retrieved from a remote JSON source. The CustomizeParameterEditors event is handled to specify which data from the processed JSON should be displayed in the editor.

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

ASP.NET Core
React

csharp

<script type="text/javascript">
    var products = [
        "HD Video Player",
        "SuperHD Video Player",
        "SuperPlasma 50"
    ].map(function (val) { return { value: val, displayValue: val }; });

    function customParameterLookUpSource(s, e) {
        if (e.parameter.name == "parameter3") {
            e.dataSource = "https://jsonplaceholder.typicode.com/users";
        };
        if (e.parameter.name == "parameter4") {
            e.dataSource = products;
        }  
    }

    function customizeParameterEditors(s, e) {
        if (e.parameter.name == "parameter3") {
            e.info.editor = $.extend({}, e.info.editor);
            e.info.editor.extendedOptions = $.extend(e.info.editor.extendedOptions || {}, {
                valueExpr: 'username',
                displayExpr: 'name'
            });
        }
    }

</script>
@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("100%")
        .ClientSideEvents(configure => { 
            configure.CustomizeParameterLookUpSource("customParameterLookUpSource");
            configure.CustomizeParameterEditors("customizeParameterEditors");
        })
        .Bind("TestExportReport");
    @viewerRender.RenderHtml()
}

typescript

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

function App() {

  var products = [
    "HD Video Player",
    "SuperHD Video Player",
    "SuperPlasma 50"
  ].map(function (val) { return { value: val, displayValue: val }; });

  const onCustomizeParameterEditors = (event: any): void => {
    if (event.args.parameter.name == 'parameter3') {
      event.args.info.editor = event.args.info.editor;
      event.args.info.editor.extendedOptions = (event.args.info.editor.extendedOptions || {}, {
        valueExpr: 'username',
        displayExpr: 'name'
      });
    }
  };

  const onCustomizeParameterLookUpSource = (event: any): void => {
    if (event.args.parameter.name == "parameter3") {
      event.args.dataSource = "https://jsonplaceholder.typicode.com/users";
    };
    if (event.args.parameter.name == "parameter4") {
      event.args.dataSource = products;
    }
  };

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

export default App