DxReportDesignerCallbacks.CustomizeParameterProperties Property
Specifies the JavaScript function that handles the Web Report Designer’s CustomizeParameterProperties client-side event.
Namespace: DevExpress.Blazor.Reporting
Assembly: DevExpress.Blazor.Reporting.v24.1.JSBasedControls.Common.dll
NuGet Package: DevExpress.Blazor.Reporting.JSBasedControls.Common
Declaration
Property Value
| Type | Description |
|---|---|
| String | The name of a JavaScript function used to handle the CustomizeParameterEditors event. |
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:
window.ReportingDesignerCustomization = {
onCustomizeParameterProperties(sender, args) {
if (args.parameter) {
args.editOptions.allowDelete = false;
}
}
}
The following code snippet hides delete actions only for the parameter1 parameter in the Properties Panel, Field List, and Parameter Editor:
window.ReportingDesignerCustomization = {
onCustomizeParameterProperties(sender, args) {
if (args.parameter) {
const name = args.parameter.name;
if (name === 'parameter1') {
args.editOptions.allowDelete = false;
}
}
}
}
You can hide Add and Delete buttons for all parameters, groups, or separators. Use properties of the DxReportDesignerParameterEditingSettings class.
Prevent Parameter Modification
The following snippet hides all property editors for the parameter1 parameter:
window.ReportingDesignerCustomization = {
onCustomizeParameterProperties(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;
});
}
}}
}
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.
window.ReportingDesignerCustomization = {
onCustomizeParameterProperties(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;
}
}
}
The property editors for parameter3 look as follows (the Allow Null Value checkbox is hidden and the Description editor disabled):
- Parameter Panel
- Properties Panel
