ASPxClientReportDesigner.CustomizeSaveAsDialog Event

Enables you to customize the Save Report dialog of the Web Report Designer.

Namespace: DevExpress.XtraReports.Web.Scripts

Assembly: DevExpress.XtraReports.v18.2.Web.Scripts.dll

Declaration

C#

public event ASPxClientReportDesignerCustomizeSaveAsDialogEventHandler CustomizeSaveAsDialog

VB.NET

Public Event CustomizeSaveAsDialog As ASPxClientReportDesignerCustomizeSaveAsDialogEventHandler

Event Data

The CustomizeSaveAsDialog event's data class is ASPxClientReportDesignerCustomizeSaveAsDialogEventArgs. The following properties provide information specific to this event:

Property	Description
Popup	Provides access to the Save Report dialog.

The event data class exposes the following methods:

Method	Description
Customize(String, ASPxDesignerDialogModel)	Customizes the Save Report dialog based on the specified template and model.

Remarks

The Save Report dialog appears in the Web Report Designer when saving a new report (e.g., when an end-user clicks the Save As menu command).

Handle the CustomizeSaveAsDialog 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 ASPxClientReportDesignerCustomizeSaveAsDialogEventArgs.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 ASPxClientReportDesignerCustomizeSaveAsDialogEventArgs.Customize method of an event argument to modify the Save 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“.

ASPX

<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 customizeSaveAsDialog(s, e) {
        e.Popup.width("700px");
        e.Popup.height("500px");
        e.Popup.title = "Save";
        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.save(koUrl());
                        }
                    }
                },
                { toolbar: 'bottom', location: 'after', widget: 'button', options: {
                        text: 'No', onClick: function () {
                            e.Popup.notSave(koUrl());
                        }
                    }
                }
            ]
        }
        e.Customize("save-as", model)
    }
</script>

<script type="text/html" id="save-as">
    <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 CustomizeSaveAsDialog="customizeSaveAsDialog"/>
</dx:ASPxReportDesigner>