This example demonstrates two ways to customize a parameter editor:
- Specify editor options for a default parameter editor.
- Use a template to replace a default editor for a specific parameter type.
In the backend folder, run the following command:
dotnet run
The server uses http://localhost:5000. To debug the server, run the application within Visual Studio.
In the react-document-viewer folder, run the following commands:
npm install
npm run dev
Enter the following URL in your browser to view results: http://localhost:3000/.
Use the DevExtreme TreeList component as a template for the Employee ID parameter's value editor:
const CustomParameterEditor = ({data}: {data: IEditorViewModel}) => {
const dataSource = `${BACKEND_URL}/Home/ListEmployees`;
const columns = [{ dataField: "name", caption: "Name" }, { dataField: "title", caption: "Title" }];
const onSelectionChanged = (e: any) => {
if (e.selectedRowsData.length > 0) {
var selectedEmployeeID = e.selectedRowsData[0].id;
parametersModel.p_employeeID = selectedEmployeeID;
}
}
return (
<TreeList
dataSource={dataSource}
columns={columns}
showBorders={true}
selection={{ mode: 'single' }}
selectedRowKeys={data.value}
onSelectionChanged={onSelectionChanged}
/>
);
};To register the template, pass the template name and the template itself to the templateEngine.setTemplate method:
templateEngine.setTemplate('employeeID-custom-editor', CustomParameterEditor);In the CustomizeParameterEditors event handler, set the header property to the template name for the p_employeeID parameter:
const onCustomizeParameterEditors = React.useCallback(({ args }: { args: any }): void => {
if (args.parameter.name == "p_employeeID") {
args.info.editor = { header: 'employeeID-custom-editor' };
};
}, []);Use the CustomizeParameterEditors event to change the display format and set validation rules for parameters. Check the parameter type and update settings accordingly:
- Use the extendedOptions property to specify display format in the value editor.
- Use the validationRules property to set rules to validate the value entered in the editor.
const onCustomizeParameterEditors = React.useCallback(({ args }: { args: any }): void => {
if (args.parameter.type === 'System.DateTime') {
args.info.editor = {...args.info.editor};
args.info.editor.extendedOptions = {
...args.info.editor.extendedOptions,
type: 'date',
displayFormat: 'dd-MMM-yyyy'
};
args.info.validationRules = [{
type: "range",
min: new Date(1990, 0, 1),
message: "No data available prior to the year 1990."
}];
};
}, []);- Reporting for React - Add a Web Document Viewer to a React App
- Reporting for React - Customize Viewer Toolbar
(you will be redirected to DevExpress.com to submit your response)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent