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

public event ASPxClientReportDesignerCustomizeSaveAsDialogEventHandler CustomizeSaveAsDialog
Public Event CustomizeSaveAsDialog As ASPxClientReportDesignerCustomizeSaveAsDialogEventHandler

Event Data

The CustomizeSaveAsDialog event handler receives an argument of the ASPxClientReportDesignerCustomizeSaveAsDialogEventArgs type. The following properties provide information specific to this event.

Property Description
Popup Provides access to the Save Report dialog.

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.

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 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>
See Also