ASPxClientReportDesigner.CustomizeOpenDialog Event
Enables you to customize the Open Report dialog of the Web Report Designer.
Namespace: DevExpress.XtraReports.Web.Scripts
Assembly: DevExpress.XtraReports.v18.2.Web.Scripts.dll
Declaration
Event Data
The CustomizeOpenDialog event's data class is ASPxClientReportDesignerCustomizeOpenDialogEventArgs. The following properties provide information specific to this event:
Property | Description |
---|---|
Popup | Provides access to the Open Report dialog. |
The event data class exposes the following methods:
Method | Description |
---|---|
Customize(String, ASPxDesignerDialogModel) | Customizes the Open Report dialog based on the specified template and model. |
Remarks
The Open Report dialog appears in the Web Report Designer when opening a report (e.g., when an end-user clicks the Open menu command).
Handle the CustomizeOpenDialog event to change this dialog’s settings and/or display your report storage data in a custom way as demonstrated in the example below.
- Use the ASPxClientReportDesignerCustomizeOpenDialogEventArgs.Popup event argument to customize the dialog’s width, height and title.
- Create a dialog model that provides functions to set and get the report URL, a function to be executed when showing this dialog and buttons to be displayed in the dialog.
- Write custom logic to display reports from your server-side storage.
- Define an HTML template for your dialog.
- Use the ASPxClientReportDesignerCustomizeOpenDialogEventArgs.Customize method of an event argument to modify the Open Report dialog based on the specified model and template.
For this example to work correctly, reports in your storage should be divided into categories. The ReportStorageWebExtension.GetUrls method should return a dictionary with report URLs and display names in the following format: “CategoryName\ReportName“.
<script type="text/javascript" id="script">
function addReport(url, category, categoryArray, categoryName, reportName, value) {
if (category.length === 0) {
categoryArray.push({ name: categoryName, reports: [
{ reportUrl: reportName, onClick: function () { url(value.Key) } }
]
});
} else {
category[0].reports.push({ reportUrl: reportName, onClick: function () { url(value.Key) } });
}
}
function updateCategories(url, categories) {
DevExpress.Designer.Report.ReportStorageWeb.getUrls().done(function (result) {
var categoryArray = [];
for (var i = 0; i < result.length; i++) {
var parts = result[i].Value.split('\\');
var category = categoryArray.filter(function (item) { return item.name === parts[0]; });
addReport(url, category, categoryArray, parts[0], parts[1], result[i]);
}
categories(categoryArray);
});
}
function customizeOpenDialog(s, e) {
e.Popup.width("700px");
e.Popup.height("500px");
e.Popup.title = "Open";
var categories = ko.observableArray([]);
var koUrl = ko.observable("");
updateCategories(koUrl, categories);
var model = {
categories: categories,
setUrl: function (url) {
koUrl(url);
},
getUrl: function () {
return koUrl();
},
onShow: function (tab) {
updateCategories(koUrl, categories);
},
popupButtons: [
{ toolbar: 'bottom', location: 'after', widget: 'button', options: {
text: 'Yes', onClick: function () {
e.Popup.open(koUrl());
}
}
},
{ toolbar: 'bottom', location: 'after', widget: 'button', options: {
text: 'No', onClick: function () {
e.Popup.cancel(koUrl());
}
}
}
]
}
e.Customize("open", model)
}
</script>
<script type="text/html" id="open">
<div style="overflow: auto">
<!-- ko foreach: categories -->
<div style="border: 1px solid black">
<div data-bind="text: name"></div>
<!-- ko foreach: reports -->
<div style="padding-left: 5px" data-bind="text: reportUrl, click: onClick"></div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script>
<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" ClientInstanceName="reportDesigner">
<ClientSideEvents CustomizeOpenDialog="customizeOpenDialog"/>
</dx:ASPxReportDesigner>