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 custom WebAPI Data Processing Extension for Report Designer.
```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 custom 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 custom WebAPI Data Processing Extension.