Embedded
Schedule Free Demo
Try it Free
Search results
Suggest a FeaturePDF

previewOptions

Properties

autoRender

boolean

Enables and disables the rendering of Viewer when default values are specified for the parameters.

Defaults to true

Example

<div id="designer"></div>
<script>
    $("#designer").boldReportDesigner({
        previewOptions: {
            autoRender: false
        }
        });
</script>

dataSources

DataSources

Gets or sets the list of data sources to preview RDL report from Report Designer.

enableNotificationBar

boolean

Enables and disables the Error Notification bar.

Defaults to true

Example

<div id="designer"></div>
<script>
    $("#designer").boldReportDesigner({
        previewOptions: {
            enableNotificationBar: false
        }
        });
</script>

enableVirtualEvaluation

boolean

Set the property value as true to enable the processing of a large amount of data with a lesser memory footprint and without performance degradation.

Defaults to false

Example

<div id="designer"></div>
<script>
    $("#designer").boldReportDesigner({
        previewOptions: {
            enableVirtualEvaluation: true
        }
        });
</script>

enableParameterBlockScroller

boolean

Enables and disables the parameter block scroller in Report Viewer component .

Defaults to true

Example

<div id="container"></div>
<script>
    $("#container").boldReportDesigner({
        previewOptions: {
            enableParameterBlockScroller: false
        }
    });
</script>

enableDatasourceBlockScroller

boolean

Enables and disables the data source credential block scroller.

Defaults to true

Example

<div id="container"></div>
<script>
    $("#container").boldReportDesigner({
        previewOptions: {
            enableDatasourceBlockScroller: false
        }
    });
</script>

enableDropDownSearch

boolean

Enables and disables the drop-down parameter search.

Defaults to false

Example

<div id="container"></div>
<script>
    $("#container").boldReportDesigner({
        previewOptions: {
             enableDropDownSearch: true
        }
    });
</script>

exportSettings

exportSettings

Specifies the export settings for Report Viewer component.

pageSettings

pageSettings

Specifies the page settings.

parameters

parameters

Gets or sets the list of parameters associated with the report.

parameterSettings

parameterSettings

Specifies the parameter settings.

printMode

boolean

Enables and disables the print mode.

Defaults to false

Example

<div id="container"></div>
<script>
    $("#container").boldReportDesigner({
        previewOptions: {
            printMode:true
        }
    });
</script>

printOption

enum

Specifies the print option of the report.

Name Description
Default Specifies the Default property in printOptions.
NewTab Specifies the NewTab property in printOptions.
None Specifies the None property in printOptions.

Defaults to ej.ReportViewer.PrintOptions.Default

Example

<div id="container"></div>
<script>
    $("#container").boldReportDesigner({
        previewOptions: {
            printOption: ej.ReportViewer.PrintOptions.Default
        }
    });
</script>

sizeToReportContent

boolean

Render the Report Viewer height based on the report content size.

Defaults to false

Example

<div id="designer"></div>
<script>
    $("#designer").boldReportDesigner({
       previewOptions: {
          sizeToReportContent: true
        }
    });
</script>

toolbarSettings

toolbarSettings

Specifies the toolbar settings.

zoomFactor

number

Gets or sets the zoom factor for report viewer.

Defaults to 1

Example

<div id="container"></div>
<script>
    $("#container").boldReportDesigner({
        previewOptions: {
            zoomFactor:  2
        }
    });
</script>

Events

beforeParameterAdd

Fires when begin to add the parameter element in the report viewer parameter block. To perform any changes in parameter element, use the beforeParameterAdd event.

Name Type Description
parameterModel object returns the parameter model.
containerId string returns the current report parameter container id
handled boolean true if the event should be handled; otherwise, false.
parameterSettings object returns the parameter settings.
customProperties object set custom properties to the report parameter.

Example

<div id="container"></div>
<script>
    $("#container").boldReportDesigner({
        previewOptions: {
            beforeParameterAdd: function (args) {
            // Write a code block to perform any change in report parameter element before add it to the viewer block.
            }
        }
    });
</script>

drillThrough

Fires during drill through action done in report. If you want to perform any operation when a drill through action is performed, you can make use of the drillThrough event.

Name Type Description
cancel boolean true if the event should be canceled; otherwise, false.
actionInfo Object returns the actionInfo's parameters bookmarkLink, reportName, parameters.
model object returns the report model.
type string returns the name of the event.

Example

<div id="designer"></div>
<script>
    $("#designer").boldReportDesigner({
        previewOptions: {
            drillThrough: function (args) {
                // Write a code block to perform any operation when drill through action occurs in report.
            }
        }
    });
</script>

exportItemClick

Fires when the export items are clicked. To perform any operation when the export items are clicked, use the exportItemClick event.

Name Type Description
value string returns the export format value.

Example

<div id="designer"></div>
<script>
    $("#designer").boldReportDesigner({
        previewOptions: {
            exportItemClick : function(args) {
                // Write a code block to perform any action when the export item clicked.
            }
        }
    });
</script>

exportProgressChanged

Fires when the export progress is changed. To perform any operation when the export progress is changed, use the exportProgressChanged event.

Name Type Description
format string returns the export format
stage string returns the stage of export processing.
handled boolean true if the event should be handled; otherwise, false.
containerId string returns report viewer container Id.
`waitingPopupTemplate` string Set the `waitingPopupTemplate` in report viewer.
actionName string Change the Web API action with custom endpoint.

Example

<div id="designer"></div>
<script>
    $("#designer").boldReportDesigner({
        previewOptions: {
            exportProgressChanged : function(args) {
                // Write a code block to perform any action when the export progress changed.
            }
        }
    });
</script>

Fires when the hyperlink action is performed in the report. To perform any operation during the hyperlink action, use the hyperlink event.

Name Type Description
cancel boolean true if the event should be canceled; otherwise, false.
actionInfo Object returns the actionInfo's hyperLink detail
model object returns the report model.
type string returns the name of the event.

Example

<div id="designer"></div>
<script>
    $("#designer").boldReportDesigner({
        previewOptions: {
        hyperlink: function (args) {
            // Write a code block to perform any operation when hyperlink action occurs in report.
        }
        }
    });
</script>

printProgressChanged

Fires when the print progress is changed. To perform any operation when the print progress is changed, use the printProgressChanged event.

Name Type Description
stage string returns the stage of export processing.
currentPage string returns the currentPage value
totalPages string returns the totalPages value
handled boolean true if the event should be handled; otherwise, false.
containerId string returns report viewer container Id.
waitingPopupTemplate string Set the waitingPopupTemplate in report viewer.

Example

<div id="designer"></div>
<script>
    $("#designer").boldReportDesigner({
        previewOptions: {
            printProgressChanged : function(args) {
                // Write a code block to perform any action when the print progress changed.
            }
        }
    });
</script>

reportLoaded

Fires when the report is loaded. If you want to perform any operation after the successful loading of report, you can make use of the reportLoaded event.

Name Type Description
cancel boolean true if the event should be canceled; otherwise, false.
model object returns the report model.
type string returns the name of the event.

Example

<div id="designer"></div>
<script>
    $("#designer").boldReportDesigner({
        previewOptions: {
        reportLoaded: function(args) {
            // Write a code block to perform any action when the report is loaded successfully.
        }
        }
    });
</script>

renderingBegin

Fires before report rendering is completed. If you want to perform any operation before the rendering of report, you can make use of the renderingBegin event.

Name Type Description
cancel boolean true if the event should be canceled; otherwise, false.
model object returns the report model.
type string returns the name of the event.

Example

<div id="container"></div>
<script>
    $("#container").boldReportDesigner({
        previewOptions: {
            renderingBegin:function(args) {
            // Write a code block to perform any operation before rendering.
            }
        }
    });
</script>

renderingComplete

Fires after report rendering completed. If you want to perform any operation after the rendering of report,you can make use of this renderingComplete event.

Name Type Description
cancel boolean true if the event should be canceled; otherwise, false.
model object returns the report model.
type string returns the name of the event.
reportParameters object returns the collection of parameters.

Example

<div id="container"></div>
<script>
    $("#container").boldReportDesigner({
        previewOptions: {
            renderingComplete:function(args) {
                // Write a code block to perform any operation after rendering completed.
            }
        }
    });
</script>

reportError

Fires when any error occurred while rendering the report. If you want to perform any operation when an error occurs in the report, you can make use of the reportError event.

Name Type Description
cancel boolean true if the event should be canceled; otherwise, false.
error string returns the error details.
model object returns the report model.
type string returns the name of the event.

Example

<div id="container"></div>
<script>
    $("#container").boldReportDesigner({
        previewOptions: {
            reportError: function (args) {
            // Write a code block to perform any operation when report error occurs.
            }
        }
    });
</script>

reportPrint

Fires when the report print action is performed in the report. To perform any operation during the report print action, use the ReportPrint event.

Name Type Description
isStyleLoad boolean true if you have to load the external style file; otherwise, false.

Example

<div id="container"></div>
<script>
    $("#container").boldReportDesigner({
        previewOptions: {
            reportPrint: function (args) {
            // Write a code block to perform any operation when report error occurs.
            }
        }
    });
</script>

showError

Fires when user clicks on a failed report item in the rendered report, before displaying error details dialog. If you want to show custom error detail or perform any action before viewing error detail, you can make use of the showError event.

Name Type Description
cancel boolean true if the event should be canceled; otherwise, false.
errorCode string returns the error code.
message string returns the error message.
detail string returns the detailed error information.

Example

<div id="designer"></div>
<script>
    $("#designer").boldReportDesigner({
        previewOptions: {
            showError: function (args) {
                // Write a code block to perform any operation when user clicks a failed item in a report.
            }
        }
    });
</script>

toolBarItemClick

Fires when the toolbar items are clicked. To perform any operation when the toolbar items are clicked, use the toolBarItemClick event.

Name Type Description
target string returns the toolbar clicked item name .
cssClass string returns the CSS class name specified for the toolbar item
groupIndex string returns the Toolbar item rendered group index
Index string returns the Toolbar item rendered index
value string returns the Toolbar item value.

Example

<div id="designer"></div>
<script>
    $("#designer").boldReportDesigner({
        previewOptions: {
            toolBarItemClick : function(args) {
                // Write a code block to perform any action when the toolbar item clicked.
            }
        }
    });
</script>

viewReportClick

Fires when clicking the View Report Button.

Name Type Description
cancel boolean true if the event should be canceled; otherwise, false.
parameters Object returns the parameter collection.
model object returns the report model.
type string returns the name of the event.

Example

<div id="designer"></div>
<script>
    $("#designer").boldReportDesigner({
        previewOptions: {
            viewReportClick:  function (args) {
                // Write a code block to perform any operation after destroy of report viewer.
            }
        }
    });
</script>