ASPxClientReportDesigner.CustomizeSaveDialog Event

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

Namespace: DevExpress.XtraReports.Web.Scripts

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

Declaration

C#

public event ASPxClientReportDesignerCustomizeSaveDialogEventHandler CustomizeSaveDialog

VB.NET

Public Event CustomizeSaveDialog As ASPxClientReportDesignerCustomizeSaveDialogEventHandler

Event Data

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

Property	Description
Popup	Provides access to the Save dialog.

The event data class exposes the following methods:

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

Remarks

The Save dialog appears in the Web Report Designer on an attempt to close a report that has been changed.

Handle the CustomizeSaveDialog event to customize this dialog, for instance, as demonstrated in the example below.

• Use the ASPxClientReportDesignerCustomizeSaveDialogEventArgs.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 displayed in the dialog.
• Define an HTML template for your dialog.
• Use the ASPxClientReportDesignerCustomizeSaveDialogEventArgs.Customize method of an event argument to modify the dialog based on the specified model and template.

ASPX

<script type="text/javascript" id="script">
    function customizeSaveDialog(s, e) {
        e.Popup.width("500px");
        e.Popup.height("200px");
        e.Popup.title = "Save";
        var koUrl = ko.observable("");
        var model = {
            setUrl: function (url) {
                koUrl(url);
            },
            getUrl: function () {
                return koUrl();
            },
            onShow: function (tab) { },
            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.cancel(koUrl());
                        }
                    }
                },
            ]
        }
        e.Customize("save-this", model)
    }
</script>

<script type="text/html" id="save-this">
        <div>Do you want to save changes?</div>
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" ClientInstanceName="reportDesigner">
    <ClientSideEvents CustomizeSaveDialog="customizeSaveDialog"/>
</dx:ASPxReportDesigner>