Customize Parameter Editors
- 2 minutes to read
This topic shows how to customize the built-in parameter editors in the JavaScript-based Document Viewer.
Tip
Use DevExpress AI Skills to integrate, configure, and customize reporting components in Blazor applications with your preferred AI coding assistant, such as GitHub Copilot or Claude Code.
Change the Editor Options
Handle the CustomizeParameterEditors event and use the info.editor.extendedOptions property to customize the DateBox editor options.
window.ViewerCustomization = {
// Remove the time portion from the DateTime parameter editor
onCustomizeParameterEditors: function(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' });
}
}
}
Add a Validation Rule
Handle the CustomizeParameterEditors event and add a validation rule to the editor’s validationRules array.
window.ViewerCustomization = {
// Remove the time portion from the DateTime parameter editor
onCustomizeParameterEditors: function(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];
}
}
}
The customized parameter editor appears as follows:
