ReportDesignerClientSideEventsBuilder.CustomizeOpenDialog(String) Method

Sets the name of the JavaScript function or the entire code that will handle the Web Report Designer‘s CustomizeOpenDialog client-side event.

Namespace: DevExpress.AspNetCore.Reporting.ReportDesigner

Assembly: DevExpress.AspNetCore.Reporting.v19.1.dll

NuGet Package: DevExpress.AspNetCore.Reporting

Declaration

C#

public ReportDesignerClientSideEventsBuilder CustomizeOpenDialog(
    string callback
)

VB.NET

Public Function CustomizeOpenDialog(
    callback As String
) As ReportDesignerClientSideEventsBuilder

Parameters

Name	Type	Description
callback	String	The name of a JavaScript function or the entire JavaScript function code used to handle the CustomizeOpenDialog event.

Returns

Type	Description
ReportDesignerClientSideEventsBuilder	A ReportDesignerClientSideEventsBuilder that can be used to further configure the Report Designer Client Side Events.

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). The CustomizeOpenDialog event enables you to customize the Open Report dialog. When implementing a handling function, use the objects passed as parameters. The first parameter passes the event sender that is the ClientReportDesigner object. The second one is an object with the following structure.

• Popup
  The Open Report dialog object.

• Customize
  This method allows you to modify the Open Report dialog based on the specified template and model.

The code sample below demonstrates how to display your report storage data in a custom way within the Open Report dialog.

• Use the Popup field of the event handler’s second parameter 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 Customize method of the object passed as the event handler’s second parameter 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”.

CSHTML

@{
    var designer = Html.DevExpress().ReportDesigner("reportDesigner1").Height("1000px")
        .Bind(Model.Report)
        .DataSources(configureDS => { foreach (var ds in Model.DataSources) { configureDS.Add(ds.Key, ds.Value); } })
        .ClientSideEvents(configure => { configure.CustomizeOpenDialog("customizeOpenDialog"); });
}
@designer

JavaScript

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