Custom Parameter Editor in the Document Viewer (ASP.NET MVC)

• Jun 18, 2024
• 5 minutes to read

This topic describes how to customize a standard parameter editor and implement a custom editor for a standard parameter type.

Customize the Standard Editor

This example removes the unnecessary time part from the DateTime editor and prevents the user from entering a date earlier then the specified date.

Change the Editor Options

Handle the WebDocumentViewerClientSideEvents.CustomizeParameterEditors event and use the info.editor.extendedOptions property to customize the DateBox editor options.

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' }, { displayFormat: 'dd-MMM-yyyy' });
        var validationRule = {
            type: "range",
            min: new Date(2000, 0, 1),
            message: "We do not retain data prior to the year 2000."
        };
        e.info.validationRules = [validationRule];
    };
    if (e.parameter.name == "p_employeeID") {
        e.info.editor = { header: 'employeeID-custom-editor' };
    };

Add a Validation Rule

Handle the WebDocumentViewerClientSideEvents.CustomizeParameterEditors event and add a validation rule to the editor’s validationRules array.

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' }, { displayFormat: 'dd-MMM-yyyy' });
        var validationRule = {
            type: "range",
            min: new Date(2000, 0, 1),
            message: "We do not retain data prior to the year 2000."
        };
        e.info.validationRules = [validationRule];
    };
    if (e.parameter.name == "p_employeeID") {
        e.info.editor = { header: 'employeeID-custom-editor' };
    };

The customized parameter editor appears as follows:

Create a Custom Editor

In this example, a report contains the p_employeeID integer parameter that identifies an employee. To help the user select the correct employee, create a custom editor that displays the expandable employee hierarchy and information about each employee.

Instead of the TextBox editor that the Document Viewer automatically creates for the integer report parameter, the application uses the Tree List editor populated with custom data.

The data source for the Tree List editor is a list of Employee objects created on the server and serialized to JSON.

The custom parameter editor is shown in the following image:

Do the following to implement a custom value editor:

1. Create the Employee class.

2. Add a controller action that creates JSON data for the parameter editor.

3. Define a custom editor template that contains the Tree List editor.

4. Configure the data source and column bindings for the Tree List.

5. Instruct the Document Viewer to use a custom template as an editor for the p_employeeID parameter. For this, in the CustomizeParameterEditors event handler, identify the target parameter type and assign the name of the custom editor template to the header variable that specifies the editor in the info.editor object.

6. Subscribe to the CustomizeParameterEditors event.

Example

The complete sample project is available in the DevExpress Examples repository on GitHub.

View Example: Customized Parameter Editor in Web Reporting Controls (ASP.NET MVC)