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

public event ASPxClientReportDesignerCustomizeOpenDialogEventHandler CustomizeOpenDialog
Public Event CustomizeOpenDialog As ASPxClientReportDesignerCustomizeOpenDialogEventHandler

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.

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>

See Also