ReportDesignerClientSideEventsBuilder.CustomizeParameterProperties(String) Method

Sets the name of the JavaScript function or the entire code that will handle the Web Report Designer‘s CustomizeParameterProperties client-side event.

Namespace: DevExpress.AspNetCore.Reporting.ReportDesigner

Assembly: DevExpress.AspNetCore.Reporting.v24.1.dll

NuGet Package: DevExpress.AspNetCore.Reporting

Declaration

C#

public ReportDesignerClientSideEventsBuilder CustomizeParameterProperties(
    string callback
)

VB.NET

Public Function CustomizeParameterProperties(
    callback As String
) As ReportDesignerClientSideEventsBuilder

Parameters

Name	Type	Description
callback	String	The name of the JavaScript function or the entire JavaScript function code used to handle the CustomizeParameterProperties event.

Returns

Type	Description
ReportDesignerClientSideEventsBuilder	A ReportDesignerClientSideEventsBuilder object that can be used to further configure the Report Designer’s client-side events.

Remarks

The CustomizeParameterProperties event allows you to customize the following elements in the Web Report Designer UI: parameters, parameter groups, parameter separators, and property editors. Your customizations apply to the Properties Panel, Field List and Parameter Editor. The event fires when you add a new parameter, open a report, invoke/close the Parameter Editor, or expand the Data group in the Properties Panel.

The handler function receives two arguments. The first is the event sender (a ClientReportDesigner object). The second is an object with the following structure:

parameter

An object that stores information about a report parameter. This object implements the IParameterDescriptor interface.

parameterPanelLayoutItem

An object that stores information about parameter panel layout items. This object contains the item name and its type (parameter/group/separator).

editors

An array of objects that store information required to serialize a property editor. This object implements the ISerializationInfoArray interface.

getEditor

A function that gets serialization information for a property editor by its property name or model name.

editOptions

An object that contains options used to specify the editing settings of parameters, groups, and separators:

• allowDelete

  Specifies whether users can delete an item. When set to false, hides the Delete button for the specified item.

Review the following parameter customization scenarios.

Prevent Parameter Removal

Set the editOptions.allowDelete property to false to hide delete buttons for specified items.

The following snippet hides delete actions for all parameters in the Properties Panel, Field List, and Parameter Editor. Note that users can still remove parameter groups and separators:

JavaScript

function customizeParameterProperties(sender, args) {
    if (args.parameter) {
        args.editOptions.allowDelete = false;
    }    
}

CSHTML

@{
    var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
        .Height("100%")
        .ClientSideEvents(configure => {
            configure.CustomizeParameterProperties("customizeParameterProperties");
        })
        .Bind(Model);
    @designerRender.RenderHtml()
}

The following snippet hides delete actions only for the parameter1 parameter in the Properties Panel, Field List, and Parameter Editor:

JavaScript

function customizeParameterProperties(sender, args) {
    if (args.parameter) {
        const name = args.parameter.name;
        if (name === 'parameter1') {
            args.editOptions.allowDelete = false;
        }
    }    
}

CSHTML

@{
    var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
        .Height("100%")
        .ClientSideEvents(configure => {
            configure.CustomizeParameterProperties("customizeParameterProperties");
        })
        .Bind(Model);
    @designerRender.RenderHtml()
}

You can hide Add and Delete buttons for all parameters, groups, or separators. Use properties of the ParameterEditingSettings class.

Prevent Parameter Modification

The following code snippet hides all property editors for the parameter1 parameter:

JavaScript

function customizeParameterProperties(sender, args) {
    if (args.parameter) {
      const name = args.parameter.name;
        if (name === 'parameter1'){
        args.editors.forEach(i => {
            // Hide editors.
            i.visible = false;
            // Disable editors.
            //i.disabled = true;
        });
    }    
}}

CSHTML

@{
    var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
        .Height("100%")
        .ClientSideEvents(configure => {
            configure.CustomizeParameterProperties("customizeParameterProperties");
        })
        .Bind(Model);
    @designerRender.RenderHtml()
}

The parameter1 parameter has no visible property editors:

Parameter Editor:

Properties Panel

Use the AllowEditProperties property to disable all property editors for parameters and parameter groups.

Prevent Modification of Specific Properties

Use the getEditor function to get serialization information about the property editor by its name. The use of the function is necessary because the display names of the same editors may differ in the Properties Panel and Parameter Editor.

The code snippet below does the following:

• Hides the Allow null value checkbox for all parameters.
• Disables the Description editor for parameter3.
• Disables the Title editor for all parameter groups.

JavaScript

function customizeParameterProperties(sender, args) {
    if (args.parameter) {
        const allowNullInfo = args.getEditor('allowNull');
        if (allowNullInfo) {
            // Hide the Allow null value checkbox.
            allowNullInfo.visible = false;
        }
        const name = args.parameter.name;
        if (name === 'parameter3') {
            const descriptionEditor = args.getEditor('description');
            if (descriptionEditor) {
                // Disable the Description editor.
                descriptionEditor.disabled = true;
            }
        }
    }
    if (args.parameterPanelLayoutItem.layoutItemType === 'Group') {
        const titleEditor = args.getEditor('title')
        // Disable the Title editor.
        titleEditor.disabled = true;
    }    
}

CSHTML

@{
    var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
        .Height("100%")
        .ClientSideEvents(configure => {
            configure.CustomizeParameterProperties("customizeParameterProperties");
        })
        .Bind(Model);
    @designerRender.RenderHtml()
}

The property editors for parameter3 look as follows (the Allow Null Value checkbox is hidden and the Description editor is disabled):

Parameter Panel

Properties Panel