Skip to content

Commit 691ebe5

Browse files
authored
Update Readme.md
1 parent 9ca8ee5 commit 691ebe5

File tree

1 file changed

+24
-26
lines changed

1 file changed

+24
-26
lines changed

Readme.md

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,65 +2,63 @@
22
[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T897601)
33
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
44
<!-- default badges end -->
5-
# How to Customize the Save As and Open Dialogs in the Web End-User Report Designer
5+
# Reporting for ASP.NET COre - How to Customize the Save As and Open Dialogs in the Web End-User Report Designer
66

7-
This example demonstrates how to use the End-User Report Designer client-side API to customize the **Save As** and **Open** dialogs.
7+
This example shows how to use the End-User Report Designer client-side API to customize the **Save As** and **Open** dialogs.
88

9-
* To customize the **Save As** dialog, handle the [CustomizeSaveAsDialog](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesigner?p=netframework#js_aspxclientreportdesigner_customizesaveasdialog) event and call the [e.Customize](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesignerCustomizeSaveAsDialogEventArgs#js_aspxclientreportdesignercustomizesaveasdialogeventargs_customize_template_model_) method.
9+
* To customize the **Save As** dialog, handle the [`CustomizeSaveAsDialog`](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesigner?p=netframework#js_aspxclientreportdesigner_customizesaveasdialog) event and call the [`e.Customize`](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesignerCustomizeSaveAsDialogEventArgs#js_aspxclientreportdesignercustomizesaveasdialogeventargs_customize_template_model_) method.
1010

11-
* To customize the **Open** dialog, handle the [CustomizeOpenDialog](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesigner?p=netframework#js_aspxclientreportdesigner_customizeopendialog) event and call the [e.Customize](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesignerCustomizeOpenDialogEventArgs#js_aspxclientreportdesignercustomizeopendialogeventargs_customize_template_model_) method.
11+
* To customize the **Open** dialog, handle the [`CustomizeOpenDialog`](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesigner?p=netframework#js_aspxclientreportdesigner_customizeopendialog) event and call the [`e.Customize`](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesignerCustomizeOpenDialogEventArgs#js_aspxclientreportdesignercustomizeopendialogeventargs_customize_template_model_) method.
1212

1313
## Customize the Save As Dialog
1414

15-
Report files in this example are arranged in folders in the root **Reports** folder. Folder names correspond to the report's _Category_. The customized dialog displays report names and categories and allows the user to do the following:
15+
Report files in this example are loac 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:
1616

1717
![Custom Save As Dialog](images/save-as-dialog.png)
1818

19+
* Select the existing category and file name, and save the report
20+
* Enter the category name and create a new category
21+
* Enter the file name and save a report with a new name.
1922

20-
* select the existing category and file name, and save the report
21-
* enter the category name and create a new category
22-
* enter the file name and save a report with a new name.
23-
24-
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.
23+
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.
2524

2625
### Dialog Template
2726

28-
The **Save As dialog** is defined in a HTML template. The template contains the following widgets:
27+
The **Save As dialog** is defined in an HTML template. The template contains the following widgets:
2928

30-
* the [TextBox](https://js.devexpress.com/Documentation/Guide/Widgets/TextBox/Overview/) editor is bound to the model's inputValue property and displays the report's name
31-
* the [SelectBox](https://js.devexpress.com/Documentation/Guide/Widgets/SelectBox/Overview/) editor is bound to the model's categories property and displays the category name
32-
* the [List](https://js.devexpress.com/Documentation/Guide/Widgets/List/Overview/) 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.
29+
* The [`TextBox`](https://js.devexpress.com/Documentation/Guide/Widgets/TextBox/Overview/) editor is bound to the model's `inputValue` property and displays the report's name.
30+
* The [`SelectBox`](https://js.devexpress.com/Documentation/Guide/Widgets/SelectBox/Overview/) editor is bound to the model's categories property and displays the category name.
31+
* The [`List`](https://js.devexpress.com/Documentation/Guide/Widgets/List/Overview/) 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.
3332

34-
3533
### Dialog Model
3634

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

39-
* to set the current report URL
40-
* to get the current report URL
41-
* to update the model's properties when the dialog is displayed. The _updateCategories_ JavaScript function is used.
37+
* To set the current report URL
38+
* To get the current report URL
39+
* To update the model's properties when the dialog is displayed. The `updateCategories` JavaScript function is used.
4240

43-
The _updateCategories_ function calls the client-side [DevExpress.Reporting.Designer.ReportStorageWeb.getUrls](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesigner?p=netframework#js_aspxclientreportdesigner_reportstoragegeturls) method to obtain report names and categories. This method uses the [ReportStorageWebExtension.GetUrls](https://docs.devexpress.com/XtraReports/DevExpress.XtraReports.Web.Extensions.ReportStorageWebExtension.GetUrls) method of a 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.
41+
The `updateCategories` function calls the client-side [`ReportStorageWeb.getUrls`](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesigner?p=netframework#js_aspxclientreportdesigner_reportstoragegeturls) method to obtain report names and categories. This method uses the [`ReportStorageWebExtension.GetUrls`](https://docs.devexpress.com/XtraReports/DevExpress.XtraReports.Web.Extensions.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.
4442

45-
The model defines the dialog buttons and their actions. The Save button's action calls the [e.Popup.save](https://docs.devexpress.com/XtraReports/js-DevExpress.Reporting.Designer.Tools.SaveAsReportDialog?p=netframework#js_devexpress_reporting_designer_tools_saveasreportdialog_save_url_) method and the Cancel button's action calls the [e.Popup.cancel](https://docs.devexpress.com/XtraReports/js-DevExpress.Reporting.Designer.Tools.ReportDialogBase#js_devexpress_reporting_designer_tools_reportdialogbase_cancel) method.
43+
The model defines the dialog buttons and their actions. The **Save** button's action calls the [`e.Popup.save`](https://docs.devexpress.com/XtraReports/js-DevExpress.Reporting.Designer.Tools.SaveAsReportDialog?p=netframework#js_devexpress_reporting_designer_tools_saveasreportdialog_save_url_) method and the **Cancel** button's action calls the [`e.Popup.cancel`](https://docs.devexpress.com/XtraReports/js-DevExpress.Reporting.Designer.Tools.ReportDialogBase#js_devexpress_reporting_designer_tools_reportdialogbase_cancel) method.
4644

47-
The dialog HTML template and dialog model are passed to the [e.Customize](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesignerCustomizeSaveAsDialogEventArgs#js_aspxclientreportdesignercustomizesaveasdialogeventargs_customize_template_model_) method to modify the Report Designer's Save As dialog. This method is available in the **CustomizeSaveAsDialog** event handler.
45+
The dialog HTML template and dialog model are passed to the [`e.Customize`](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesignerCustomizeSaveAsDialogEventArgs#js_aspxclientreportdesignercustomizesaveasdialogeventargs_customize_template_model_) method to modify the Report Designer's Save As dialog. This method is available in the `CustomizeSaveAsDialog` event handler.
4846

4947
### CustomizeSaveAsDialog event
5048

51-
The _customizeSaveAsDialog_ function is the [CustomizeSaveAsDialog](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesigner?p=netframework#js_aspxclientreportdesigner_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.
49+
The `customizeSaveAsDialog` function is the [`CustomizeSaveAsDialog`](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesigner?p=netframework#js_aspxclientreportdesigner_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.
5250

53-
The [ReportDesignerClientSideEventsBuilder.CustomizeSaveAsDialog](https://docs.devexpress.com/XtraReports/DevExpress.AspNetCore.Reporting.ReportDesigner.ReportDesignerClientSideEventsBuilder.CustomizeSaveAsDialog(System.String)) method is used to set the name of the JavaScript function that handles the **CustomizeSaveAsDialog** event (the _customizeSaveAsDialog_ function in this example).
51+
The [`ReportDesignerClientSideEventsBuilder.CustomizeSaveAsDialog`](https://docs.devexpress.com/XtraReports/DevExpress.AspNetCore.Reporting.ReportDesigner.ReportDesignerClientSideEventsBuilder.CustomizeSaveAsDialog(System.String)) method is used to set the name of the JavaScript function that handles the `CustomizeSaveAsDialog` event (the `customizeSaveAsDialog` function in this example).
5452

5553
## Customize the Open Dialog
5654

57-
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.
55+
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.
5856

5957
![Custom Open Dialog](images/open-dialog.png)
6058

61-
The Open dialog is customized in the same way as the Save As dialog. The [ReportDesignerClientSideEventsBuilder.CustomizeOpenDialog](https://docs.devexpress.com/XtraReports/DevExpress.AspNetCore.Reporting.ReportDesigner.ReportDesignerClientSideEventsBuilder.CustomizeOpenDialog(System.String)) method specifies the name of the JavaScript function that handles the [CustomizeOpenDialog](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesigner?p=netframework#js_aspxclientreportdesigner_customizeopendialog) event - the _customizeOpenDialog_ function in this example.
59+
The **Open** dialog is customized in the same way as the **Save As** dialog. The [`ReportDesignerClientSideEventsBuilder.CustomizeOpenDialog`](https://docs.devexpress.com/XtraReports/DevExpress.AspNetCore.Reporting.ReportDesigner.ReportDesignerClientSideEventsBuilder.CustomizeOpenDialog(System.String)) method specifies the name of the JavaScript function that handles the [`CustomizeOpenDialog`](https://docs.devexpress.com/XtraReports/js-ASPxClientReportDesigner?p=netframework#js_aspxclientreportdesigner_customizeopendialog) event - the `customizeOpenDialog` function in this example.
6260

63-
The Open **dialog template** and the **dialog model** are defined and passed to the e.Customize method to modify the dialog.
61+
The Open *dialog template* and the *dialog model* are defined and passed to the `e.Customize` method to modify the dialog.
6462

6563

6664
## Files to Review

0 commit comments

Comments
 (0)