This example shows how to use the End-User Report Designer's client-side API to customize the Save As and Open dialogs.

• To customize the Save As dialog, handle the CustomizeSaveAsDialog event and call the e.Customize method.

• To customize the Open dialog, handle the CustomizeOpenDialog event and call the e.Customize method.

Report files in this example are in folders in the root Reports folder. Folder names correspond to the report's category. The customized dialog displays report names and categories. The dialog allows users to do the following:

• Select the existing category and file name, and save the report
• Enter the category name and create a new category
• Enter the file name and save a report with a new name.

The dialog also displays reports that do not fall in any category - reports created by the ReportsFactory static class and reports in the root Reports folder.

The Save As dialog is defined in an HTML template. The template contains the following widgets:

• The TextBox editor is bound to the model's inputValue property and displays the report's name.
• The SelectBox editor is bound to the model's categories property and displays the category name.
• The List widget is bound to the model's categories property and displays reports grouped by category. The categories data is an array of keys (category names) associated with multiple values (report names). The dxListBox requires this structure to display grouped values.

The dialog model defines the properties used in the dialog template and binds them to Knockout observables. The model specifies the following functions:

• To set the current report URL
• To get the current report URL
• To update the model's properties when the dialog is displayed. The updateCategories JavaScript function is used.

The updateCategories function calls the client-side ReportStorageWeb.getUrls method to obtain report names and categories. This method uses the ReportStorageWebExtension.GetUrls method of server-side report storage to get a dictionary that contains report names and categories. The code processes the dictionary and fills the categories data array.

The model defines the dialog buttons and their actions. The Save button's action calls the e.Popup.save method and the Cancel button's action calls the e.Popup.cancel method.

The dialog HTML template and dialog model are passed to the e.Customize method to modify the Report Designer's Save As dialog. This method is available in the CustomizeSaveAsDialog event handler.

The customizeSaveAsDialog function is the CustomizeSaveAsDialog event handler. The function uses the event handler argument’s Popup property to specify the dialog’s width, height, and title. The function defines variables used in the dialog model and defines the dialog model. Finally, the function calls the e.Customize method to modify the dialog based on the specified model and template.

The ReportDesignerClientSideEventsBuilder.CustomizeSaveAsDialog method is used to set the name of the JavaScript function that handles the CustomizeSaveAsDialog event (the customizeSaveAsDialog function in this example).

The custom Open dialog allows the user to find a report in a list grouped by category, select the report, and open it. The user can type in the text box to filter the list and find report and category names that contain the input string.

The Open dialog is customized in the same way as the Save As dialog. The ReportDesignerClientSideEventsBuilder.CustomizeOpenDialog method specifies the name of the JavaScript function that handles the CustomizeOpenDialog event - the customizeOpenDialog function in this example.

The Open dialog template and the dialog model are defined and passed to the e.Customize method to modify the dialog.

• Index.cshtml
• CustomReportStorageWebExtension.cs
• ReportsFactory.cs
• Startup.cs

• End-User Report Designer Customization (ASP.NET Core)
• Use Custom HTML Templates

• ASP.NET Core Reporting - Best Practices
• Custom Report Parameter Types in Web Reporting Controls (ASP.NET Core)
• Web Reporting (ASP.NET MVC, ASP.NET Core and Angular) - How to Customize the DevExpress Report Wizard Customization and Hide Data Source Actions within our Report Designer