How to add a WebAPI Data Processing Extension for Report Designer

Published:

Updated:

This articles explains the Data Processing Extensions providing the additional data source supports, which is not available in built-in Report Designer. You can find the following steps to add the WebAPI Data Processing Extension for Report Designer.

You need to refer the below attached webapi.data.js and queryinputdialog.js script files in your application. Extension scripts

```html
    <head>
        <script src="~/Scripts/extension/webapi.data.js"></script>
        <script src="~/Scripts/extension/queryinputdialog.js"></script>
    </head>
```

Provide the extension details for ReportDesigner with ReportDataExtensions property as shown in following code example.

MVC

    <div style="width:100%; height:100%; position:absolute;">
        @{Html.Bold().ReportDesigner("designer").ServiceUrl("/api/DesignerAPI").   ReportDataExtensions    (ext => { ext.ClassName("WebAPIDataSource").Name("WebAPI".    ImageClass    ("e-reportdesigner-datasource-webapi").DisplayName("WebAPI").Add(; }).    Render();}
    </div>
    @(Html.Bold().ScriptManager())

Add the following codes in script tag to get a WebAPI dialog when using the WebAPI Extension.

    <script type="text/javascript">
        var qryOptions = null;
        var webApiQueryDialog = null;
        if (ej.isNullOrUndefined(webApiQueryDialog)) {
            webApiQueryDialog = new QueryInputDialog($('#designer'));
        }
        if (!ej.isNullOrUndefined(webApiQueryDialog)) {
            qryOptions = {
                toolbarRendering: $.proxy(webApiQueryDialog.renderToolbarItems, webApiQueryDialog),
                datasetLoaded: $.proxy(webApiQueryDialog.enableButton, webApiQueryDialog),
                dataModeChanged: $.proxy(webApiQueryDialog.enableButton, webApiQueryDialog)
            };
        }
        function controlInitialized(args) {
            debugger;
        var designer = $("#designer").data('boldReportDesigner');
            designer.setModel({queryDesignerOptions: qryOptions });
    }

Attach the WebAPI Data Processing Extension in your application as shown in following help documentation.

WebAPI Data Processing Extension

You can download the following sample for Bold Report Designer with the WebAPI Data Processing Extension.

MVC Report Designer with WebAPI Data Processing Extension

Was this article useful?

Dislike

Comments (0)

How to add a WebAPI Data Processing Extension for Report Designer

Access denied