xtrareports-404939-web-reporting-blazor-reporting-web-report-designer-customization-specify-parameter-editing-settings.md
The Web Report Designer allows you to configure user interface elements related to parameter modification in the following ways:
Review the following parameter customization scenarios:
Use the following properties to hide UI elements that allow users to add new and delete existing parameters, groups, and separators:
AllowEditParameterCollectionHides the UI elements that allow users to add and delete parameters.AllowEditParameterGroupsHides the UI elements that allow users to add and delete parameter groups.AllowEditParameterSeparatorsHides the UI elements that allow users to add and delete parameter separators.
The following code snippet disables the aforementioned properties:
<DxReportDesigner ReportName="TestReport" Height="calc(100vh - 130px)" Width="100%" AllowMDI="true" DataSources="DataSources">
<DxReportDesignerParameterEditingSettings
AllowEditParameterCollection="false"
AllowEditParameterGroups="false"
AllowEditParameterSeparators="false" />
</DxReportDesigner>
<DxWasmReportDesigner ReportName="Report" Height="100%">
<DxWasmReportDesignerRequestOptions GetDesignerModelAction="DXXRD/GetReportDesignerModel" />
<DxReportDesignerModelSettings AllowMDI="true">
<DxReportDesignerParameterEditingSettings
AllowEditParameterCollection="false"
AllowEditParameterGroups="false"
AllowEditParameterSeparators="false" />
</DxReportDesignerModelSettings>
</DxWasmReportDesigner>
All Add and Delete buttons for parameters, groups, and separators are hidden from the Parameter Editor, Field List, and Properties Panel. The image below shows the resulting Parameter Editor’s appearance:
To restrict deletion only for specific parameters or item types, use the CustomizeParameterProperties event.
The following code snippet hides the Delete button for parameter1 and parameter4 and all parameter groups:
window.DesignerCustomization = {
onCustomizeParameterProperties(sender, args) {
if (args.parameter) {
const name = args.parameter.name;
if (name === 'parameter1' || name === 'parameter4') {
args.editOptions.allowDelete = false;
}
}
if (args.parameterPanelLayoutItem.layoutItemType === 'Group') {
args.editOptions.allowDelete = false;
}
}
}
<head>
@...@
@DxResourceManager.RegisterScripts((config) => config.Register(new DxResource("/customization.js", 900)))
@...@
</head>
<DxReportDesigner ReportName="SampleReport" Height="1000px" Width="100%">
<DxReportDesignerCallbacks CustomizeParameterProperties="DesignerCustomization.onCustomizeParameterProperties"/>
</DxReportDesigner>
Use the AllowEditProperties property to disable all property editors for parameters and parameter groups.
If you want to disable or hide specific property editors for all or some parameters or groups, use the client-side CustomizeParameterProperties event.
The following code snippet 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.DesignerCustomization = {
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;
}
}
}
<head>
@...@
@DxResourceManager.RegisterScripts((config) => config.Register(new DxResource("/customization.js", 900)))
@...@
</head>
<DxReportDesigner ReportName="SampleReport" Height="1000px" Width="100%">
<DxReportDesignerCallbacks CustomizeParameterProperties="DesignerCustomization.onCustomizeParameterProperties"/>
</DxReportDesigner>
The property editors for parameter3 look as follows (the Allow Null Value checkbox is hidden and the Description editor is disabled):
Parameters Panel Properties Panel
The following code snippet hides all property editors for the parameter1 parameter:
window.DesignerCustomization = {
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;
});
}
}
}
}
<head>
@...@
@DxResourceManager.RegisterScripts((config) => config.Register(new DxResource("/customization.js", 900)))
@...@
</head>
<DxReportDesigner ReportName="SampleReport" Height="1000px" Width="100%">
<DxReportDesignerCallbacks CustomizeParameterProperties="DesignerCustomization.onCustomizeParameterProperties"/>
</DxReportDesigner>
The parameter1 parameter has no visible property editors:
Parameter Editor: Properties Panel
Set the AllowReorderParameters property to false to disable reorder actions in the Properties Panel and Parameter Editor:
<DxReportDesigner ReportName="TestReport" Height="calc(100vh - 130px)" Width="100%" AllowMDI="true" DataSources="DataSources">
<DxReportDesignerParameterEditingSettings AllowReorderParameters="false" />
</DxReportDesigner>
<DxWasmReportDesigner ReportName="Report" Height="100%">
<DxWasmReportDesignerRequestOptions GetDesignerModelAction="DXXRD/GetReportDesignerModel" />
<DxReportDesignerModelSettings AllowMDI="true">
<DxReportDesignerParameterEditingSettings AllowReorderParameters="false" />
</DxReportDesignerModelSettings>
</DxWasmReportDesigner>