Search results
Suggest a FeaturePDF

Methods

addDataSet

Add a dataset to the report at runtime.

Parameter Type Description
dataset object a JSON to define a connection properties for dataset

Example

  • Add embedded dataset to the report

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        var dataset =
        {
        __type:'BoldReports.RDL.DOM.DataSet',
        Name:'DataSet1',
        Fields:[
            { __type: "BoldReports.RDL.DOM.Field", DataField: "DepartmentID", Name: "DepartmentID", TypeName: "System.Int16",Value: null},
            { __type: "BoldReports.RDL.DOM.Field", DataField: "Name", Name: "Name", TypeName: "System.String",Value: null},
            { __type: "BoldReports.RDL.DOM.Field", DataField: "GroupName", Name: "GroupName", TypeName: "System.String",Value: null },
            { __type: "BoldReports.RDL.DOM.Field", DataField: "ModifiedDate", Name: "ModifiedDate", TypeName: "System.DateTime",Value: null}
            ],
        Query: {
            __type: "BoldReports.RDL.DOM.Query",
            CommandText: "SELECT [HumanResources].[Department].[DepartmentID],\n[HumanResources].[Department].[Name],\n[HumanResources].[Department].[GroupName],\n[HumanResources].[Department].[ModifiedDate] FROM [HumanResources].[Department]",
            CommandType: 0,
            DataSourceName: "DataSource1",
            QueryDesignerState: {
                __type: "BoldReports.RDL.DOM.QueryDesignerState",
                Expressions: null,
                Filters: null,
                Joins: null,
                StoredProcedure: null,
                Tables: [
                    {
                    __type: "BoldReports.RDL.DOM.Table",
                    Columns: [
                        { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null, IsDuplicate: false,
                        IsSelected: true, Name: "DepartmentID"
                        },
                        { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null, IsDuplicate: false,
                        IsSelected: true, Name: "Name"
                        },
                        { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null, IsDuplicate: false,
                        IsSelected: true, Name: "GroupName"
                        },
                        { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null, IsDuplicate: false,
                        IsSelected: true, Name: "ModifiedDate"
                        }
                    ],
                    Name: "Department",
                    Schema: "HumanResources",
                    SchemaLevels: [
                        { Name: "HumanResources", SchemaType: "Schema"},
                        { Name: "Tables", SchemaType: "Category"},
                        { Name: "Department", SchemaType: "Table"}
                    ]
                    }
                ]
            },
            QueryParameters: [],
            Timeout: 0
            },
        CaseSensitivity:0,
        Collation:null,
        AccentSensitivity:0,
        KanatypeSensitivity:0,
        WidthSensitvity:0,
        Filters:[],
        SharedDataSet:null,
        InterpretSubtotalsAsDetails:0,
        DataSetInfo:null,
        DataSetObject:null
        };
    
        designerObj.addDataSet(dataset);
    </script>
  • Add shared dataset to the report

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
    
        var dataset =
        {
        __type:'BoldReports.RDL.DOM.DataSet',
        Name:'DataSet1',
        Fields:[
            { __type: "BoldReports.RDL.DOM.Field", DataField: "ProdCat", Name: "ProdCat", TypeName: "System.String", Value: null},
            { __type: "BoldReports.RDL.DOM.Field", DataField: "SubCat", Name: "SubCat", TypeName: "System.String", Value: null},
            { __type: "BoldReports.RDL.DOM.Field", DataField: "OrderYear", Name: "OrderYear", TypeName: "System.Int32", Value: null },
            { __type: "BoldReports.RDL.DOM.Field", DataField: "OrderQtr", Name: "OrderQtr", TypeName: "System.String", Value: null},
            { __type: "BoldReports.RDL.DOM.Field", DataField: "Sales", Name: "Sales", TypeName: "System.Decimal", Value: null}
            ],
        Query:null,
        CaseSensitivity:0,
        Collation:null,
        AccentSensitivity:0,
        KanatypeSensitivity:0,
        WidthSensitvity:0,
        Filters:[],
        SharedDataSet: {
                __type: "BoldReports.RDL.DOM.SharedDataSet",
                QueryParameters: [],
                SharedDataSetReference: 'Sales'
        },
        InterpretSubtotalsAsDetails:0,
        DataSetInfo:null,
        DataSetObject:null
        };
    
        designerObj.addDataSet(dataset);
    </script>

addDataSource

Add a datasource to the report at runtime.

Parameter Type Description
datasource object a JSON to define a connection properties for datasource

Example

  • Add embedded datasource to the report

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        var datasource =
        {
        __type:'BoldReports.RDL.DOM.DataSource',
        Name:'DataSource1',
        Transaction:false,
        DataSourceReference:null,
        SecurityType:'DataBase',
        ConnectionProperties:{
                __type:'BoldReports.RDL.DOM.ConnectionProperties',
                ConnectString:'Data Source=<instancename>;Initial Catalog=<database>;',
                EmbedCredentials:false,
                DataProvider:'SQL',
                IsDesignState:false,
                IntegratedSecurity:false,
                UserName:'',
                PassWord:'',
                Prompt:'Specify the Username and password for DataSource DataSource1',
                CustomProperties:[]
            }
        };
    
        designerObj.addDataSource(datasource);
    </script>
  • Add shared datasource to the report

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        var datasource =
        {
        __type:'BoldReports.RDL.DOM.DataSource',
        Name:'DataSource1',
        Transaction:false,
        DataSourceReference: '<database>',
        SecurityType:'None',
        ConnectionProperties:null
        };
    
        designerObj.addDataSource(datasource);
    </script>

addItem

Add a report item to the report at runtime.

Name Type Description
item object JSON for the new report item to be added.
Name Type Description
left number Set the left position value to the report item.
top number Set the top position value to the report item.
itemType string Set the type of the report item.
Input Text
TextBox
Image
Line
Rectangle
Chart
Table
List
Grid
PivotGrid
SubReport
Custom
designArea string Set the target to render report item.
parentName string Set the name of the parent item.
rowIndex number Set the index of the row in table/list report item.
colIndex number Set the index of the column in table/list report item.

Examples

  • Add a report item to report body

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        var item =  {
            left: 300, top: 100, itemType: 'Tablix',
            designArea: ej.ReportDesigner.DesignArea.Body,
            parentName : null,
            rowIndex: -1, colIndex: -1
        };
        designerObj.addItem(item);
    </script>
  • Add a report item to report header

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        var item =  {
            left: 100, top: 30, itemType: 'Image',
            designArea: ej.ReportDesigner.DesignArea.Header,
            parentName : null,
            rowIndex: -1, colIndex: -1
        };
        designerObj.addItem(item);
    </script>
  • Add a report item to report footer

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        var item =  {
            left: 50, top: 50, itemType: 'TextBox',
            designArea: ej.ReportDesigner.DesignArea.Footer,
            parentName : null,
            rowIndex: -1, colIndex: -1
        };
        designerObj.addItem(item);
    </script>
  • Add a report item into a tablix cell

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        //Add tablix item
        var item =  {
            left: 50, top: 50, itemType: 'Tablix',
            designArea: ej.ReportDesigner.DesignArea.Body,
            parentName:null,
            rowIndex: -1, colIndex: -1
        };
        designerObj.addItem(item);
        //Add image report item into tablix cell
        var item =  {
            left: 50, top: 50, itemType: 'Image',
            designArea: ej.ReportDesigner.DesignArea.Body,
            parentName: 'Tablix1',
            rowIndex: 1, colIndex: 0
        };
        designerObj.addItem(item);
    </script>
  • Add a report item into a rectangle report item

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        //Add rectangle item
        var item =  {
            left: 50, top: 50, itemType: 'Rectangle',
            designArea: ej.ReportDesigner.DesignArea.Body,
            parentName:null,
            rowIndex: -1, colIndex: -1
        };
        designerObj.addItem(item);
        //Add image report item into rectangle item
        var item =  {
            left: 10, top: 20, itemType: 'Image',
            designArea: ej.ReportDesigner.DesignArea.Body,
            parentName: 'Rectangle1',
            rowIndex: -1, colIndex: -1
        };
        designerObj.addItem(item);
    </script>
  • Add a chart report item to report at runtime

    By default, Column chart type will be added to the report.

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        var item =  {
            left: 50, top: 50, itemType: 'Chart',
            designArea: ej.ReportDesigner.DesignArea.Body,
            parentName : null,
            rowIndex: -1, colIndex: -1
        };
        designerObj.addItem(item);
    </script>
  • Add a Pie chart report item to report at runtime

    To add specific chart type to the report, follow the syntax : Chart-[chart-type]. Refer Chart Types sections for details about supported chart types.

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        var item =  {
            left: 50, top: 50, itemType: 'Chart-Pie',
            designArea: ej.ReportDesigner.DesignArea.Body,
            parentName : null,
            rowIndex: -1, colIndex: -1
        };
        designerObj.addItem(item);
    </script>
  • Add a custom report item to report at runtime

    To add specific custom report item type to the report, follow the syntax : Custom-[custom-report-item-name]. Refer reportItemExtensions property to render custom report item in Report Designer.

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        var item =  {
            left: 50, top: 50, itemType: 'Custom-Barcode',
            designArea: ej.ReportDesigner.DesignArea.Body,
            parentName : null,
            rowIndex: -1, colIndex: -1
        };
        designerObj.addItem(item);
    </script>

addParameter

Add a parameter to the report at runtime.

Parameter Type Description
reportParameter object JSON for the new parameter to be added in the report

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    var parameter =
    {
        __type: 'BoldReports.RDL.DOM.ReportParameter',
        Name: 'ReportParameter1',
        Prompt: 'ReportParameter1',
        DataType: 3,
        Hidden: true,
        AllowBlank: false,
        Nullable: false,
        MultiValue: false,
        ValidValues: {
            __type: 'BoldReports.RDL.DOM.ValidValues',
            ParameterValues: [
            {
                __type: 'BoldReports.RDL.DOM.ParameterValue',
                Label: 'System.Double',
                Value: 'report'
            }
            ],
            DataSetReference: null
        },
        DefaultValue: null
    };
    designerObj.addParameter(parameter);
</script>

bringForward

Visually move the selected report item over its closest intersected report items.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.bringForward();
</script>

bringToFront

Visually move the selected report item over all other intersected report items.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.bringToFront();
</script>

canCopy

Determines whether a copy operation is possible.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.canCopy();
</script>

canCut

Determines whether a cut operation is possible.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.canCut();
</script>

canPaste

Determines whether a paste operation is possible.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.canPaste();
</script>

canRedo

Returns the boolean value indicating whether the user can redo the previous action in the report.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.canRedo();
</script>

canRemove

Determines whether a delete operation is possible.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.canRemove();
</script>

canUndo

Returns a boolean value indicating whether the user can undo the previous action in the report.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.canUndo();
</script>

cloneDataSet

Clone the existing dataset in the report at runtime.

Parameter Type Description
name string Name of the existing dataset in report

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.cloneDataSet('DataSet1');
</script>

cloneDataSource

Clone the existing datasource in the report at runtime.

Parameter Type Description
name string Name of the existing datasource in report

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.cloneDataSource('DataSource1');
</script>

copy

Copies the selected report item from design panel to the Report Designer internal clipboard.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.copy();
</script>

cut

Cuts the selected report item from design panel to the Report Designer internal clipboard.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.cut();
</script>

getDataSets

Get the list of datasets from the report.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.getDataSets(); // Returns the datasets as an array of objects
</script>

getDataSources

Get the list of datasources from the report.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.getDataSources(); // Returns the datasources as an array of objects
</script>

getParameters

Get the list of parameters from the report.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.getParameters(); // Returns the parameters as an array of objects
</script>

hasReportChanges

Returns the boolean value that specifies whether the report has changes or not.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.hasReportChanges();
</script>

isNewReport

Returns the boolean value that specifies whether the currently processing report is a new report or not.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.isNewReport();
</script>

isNewServerReport

Returns the boolean value that specifies whether the currently processing report is a new server report or not.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.isNewServerReport();
</script>

isServerReport

Returns the boolean value that specifies whether the currently processing report is obtained from the server or local.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.isServerReport();
</script>

newReport

To create a new report.

Parameter Type Description
name (optional) string Name of the new report
dataSetPath (optional) string Name of the shared dataset

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.newReport();
</script>

newServerReport

To create a new report in the report server.

Parameter Type Description
name (optional) string Name of the new report
dataSetPath (optional) string Name of the shared dataset

Example

<div id="container"></div>
<script>
   // Create Report Designer Instance
   $("#container").boldReportDesigner();
   var designerObj = $("#container").data("boldReportDesigner");
   designerObj.newServerReport('Test1', 'ab018ae7-f747-49a1-9e26-759e35c0a0db');
</script>

openReport

This method opens the report from the report server.

Parameter Type Description
reportPath (optional) string Path of the report server report.
serverUrl (optional) string Reports server URL.
callBackInfo (optional) object This object provides callback function for handling the loading indicator, dialog close action for file browse and publish dialogs.

The callBackInfo contains the below listed functions.

Name Type Description
closeDialog() function Invoke this method to close the browse dialog.
showIndicator() function Invoke this method to show the loading indicator in browse dialog.
hideIndicator() function Invoke this method to hide the loading indicator in browse dialog.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.openReport();
</script>

openReportDefinition

This method opens the report using raw report data.

Parameter Type Description
rdlData string | object Provide the report definition in the JSON or string or XML format

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    var rdlData = ''; // Assign a report data in JSON, string or XML format
    designerObj.openReportDefinition(rdlData);
</script>

openReportFromDevice

Opens the client browse dialog to browse the report.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.openReportFromDevice();
</script>

openServerReportDialog

Opens the report designer browse dialog to browse the available reports in the report server.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.openServerReportDialog();
</script>

paste

Pastes the selected report item from the Report Designer internal clipboard to design panel.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.paste();
</script>

redo

Reverses the action of the last Undo command.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.redo();
</script>

remove

Deletes the selected report item from the report.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.remove();
</script>

removeDataSet

Remove a dataset from the report at runtime.

Parameter Type Description
dataset string Name of the dataset

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.removeDataSet('DataSet1');
</script>

removeDatasource

Remove a datasource from the report at runtime.

Parameter Type Description
datasource string Name of the datasource

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.removeDatasource('DataSource1');
</script>

removeItem

Remove the given report item from the report.

Parameter Type Description
itemName string Name of the report item to be removed from the report

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.removeItem('Tablix1');
</script>

removeParameter

Remove a parameter from the report at runtime.

Parameter Type Description
reportParameterName string Name of the existing report parameter

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.removeParameter('ReportParameter1');
</script>

saveReport

This method saves the report into the report server.

Parameter Type Description
reportPath (optional) string Path of the report server report.
isOverWrite (optional) boolean If `True` denotes report `Edit` action, otherwise new report `Create` action.
callBackInfo (optional) object This object provides callback function for handling the loading indicator, dialog close action, and file path reset for file browse and publish dialogs.

The callBackInfo contains the below listed functions.

Name Type Description
closeDialog() function Invoke this method to close the browse dialog.
showIndicator() function Invoke this method to show the loading indicator in browse dialog.
hideIndicator() function Invoke this method to hide the loading indicator in browse dialog.
resetMethod() function Invoke this method to reset the file browsing folder path.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.saveReport();
</script>

saveReportDefinition

This method returns the report in JSON or XML format.

Parameter Type Description
callback function Callback method to return the report data.
type (optional) enum
Name Description
JSON Returns the report data in JSON format.
XML Return the report data in XML format.
Specify the format as JSON or XML to save the report.

Example

  • To save the report in JSON format.

    <div id="container"></div>
    <script>
        // Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        designerObj.saveReportDefinition((args) => {}, ej.ReportDesigner.DataFormat.JSON);
    </script>
  • To save the report in XML format.

    <div id="container"></div>
    <script>
        // Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        designerObj.saveReportDefinition((args) => {}, ej.ReportDesigner.DataFormat.XML);
    </script>

saveServerReportDialog

Opens the report designer browse dialog to save the report into report server.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.saveServerReportDialog();
</script>

saveToDevice

To download the designed report.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.saveToDevice();
</script>

selectItems

Update the selection to report item at runtime.

Parameter Type Description
itemNames array Name of the report items

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    var itemNames = ['Tablix1','Chart1','Rectangle2']
    designerObj.selectItems(itemNames);
</script>

sendBackward

Visually move the selected report item behind its closest intersected report item.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.sendBackward();
</script>

sendToBack

Visually move the selected report item behind all other intersected report items.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.sendToBack();
</script>

showDesign

Performs switch action from viewer to designer at runtime.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.showDesign();
</script>

showNewReportDialog

Opens the new report dialog.

Parameter Type Description
callback function Callback method of new report dialog actions

Example

<div id="container"></div>
<script>
   // Create Report Designer Instance
   $("#container").boldReportDesigner();
   var designerObj = $("#container").data("boldReportDesigner");
   designerObj.showNewReportDialog((args) => {
   });
</script>

showOpenSaveReportDialog

Opens the report designer browse dialog to open/save reports in the report server.

Parameter Type Description
browseType enum
Name Description
Open Mention the browse type as Open to launch open report dialog.
Save Mention the browse type as Save to launch save report dialog.
Mention the type as Open to perform open report action, otherwise Save.
callback function Callback method of open/save dialog actions.

The callback function will receive the below listed argument informations as parameter.

Name Description
category Name of the category where the report is save/open.
categoryId Id of the category where the report is save/open.
isExist If `True` denotes report `Edit` action, otherwise new report `Create` action.
name Name of the report.
type Denotes the browse dialog type(open/save).
callBackInfo The callBackInfo is a object which contains callback functions to handle the loading indicator, dialog close action, and reset actions in browse dialog.
reportName string Name of the report to save.

Example

  • To launch open report dialog

    <div id="container"></div>
    <script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    var browseType = ej.ReportDesigner.BrowseType.Open;
    designerObj.showOpenSaveReportDialog(browseType, (args) => {
    });
    </script>
    • Handle the browse dialog close action.

      To handle the browse dialog close action, callBackInfo argument needs to be handled in the code snippet as explained in below scenario’s.

      Use the below code snippet, if you are intend to use the openReport method of report designer for report open action.

      <div id="container"></div>
      <script>
      // Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var browseType = ej.ReportDesigner.BrowseType.Open;
      designerObj.showOpenSaveReportDialog(browseType, (args) => {
          if(args) {
              designerObj.openReport(args.category + '/' + args.name, null, args.callBackInfo);
          }
      });
      </script>

      Use the below code snippet, if you are intend to use your own custom implementation. Handle the browse dialog close action after completion of report open action to the server.

      <div id="container"></div>
      <script>
      // Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var browseType = ej.ReportDesigner.BrowseType.Open;
      designerObj.showOpenSaveReportDialog(browseType, (args) => {
          //invoke your own custom method
          handleOpenAction(args);
      });
      
      function handleOpenAction(args) {
          if(args && args.callBackInfo && args.callBackInfo.closeDialog) {
              args.callBackInfo.closeDialog();
          }
      };
      </script>
  • To launch save report dialog

    <div id="container"></div>
    <script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    var browseType = ej.ReportDesigner.BrowseType.Save;
    designerObj.showOpenSaveReportDialog(browseType, (args) => {
    });
    </script>
    • Handle the browse dialog close action.

      To handle the browse dialog close action, callBackInfo argument needs to be handled in the code snippet as explained in below scenario’s.

      Use the below code snippet, if you are intend to use the saveReport method of report designer for report save action.

      <div id="container"></div>
      <script>
      // Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var browseType = ej.ReportDesigner.BrowseType.Save;
      designerObj.showOpenSaveReportDialog(browseType, (args) => {
          if(args) {
              designerObj.saveReport(args.category + '/' + args.name, args.isExist, args.callBackInfo);
          }
      });
      </script>

      Use the below code snippet, if you are intend to use your own custom implementation. Handle the browse dialog close action after completion of report save action to the server.

      <div id="container"></div>
      <script>
      // Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var browseType = ej.ReportDesigner.BrowseType.Save;
      designerObj.showOpenSaveReportDialog(browseType, (args) => {
          //invoke your own custom method
          handleSaveAction(args);
      });
      
      function handleSaveAction(args) {
          if(args && args.callBackInfo && args.callBackInfo.closeDialog) {
              args.callBackInfo.closeDialog();
          }
      };
      </script>

showPreview

Performs switch action from designer to viewer at runtime.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.showPreview();
</script>

undo

Reverses the last action that was performed.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.undo();
</script>

updateDataset

Updates the existing dataset in the report at runtime.

Parameter Type Description
datasetName string Name of the existing dataset
dataset object a JSON to define a connection properties for dataset

Example

  • Update embedded dataset

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        var dataset = {
        __type:'BoldReports.RDL.DOM.DataSet',
        Name:'DataSet2',
        Fields:[
            { __type: "BoldReports.RDL.DOM.Field", DataField: "DepartmentID", Name: "DepartmentID", TypeName: "System.Int16",Value: null},
            { __type: "BoldReports.RDL.DOM.Field", DataField: "Name", Name: "Name", TypeName: "System.String",Value: null},
            { __type: "BoldReports.RDL.DOM.Field", DataField: "GroupName", Name: "GroupName", TypeName: "System.String",Value: null },
            { __type: "BoldReports.RDL.DOM.Field", DataField: "ModifiedDate", Name: "ModifiedDate", TypeName: "System.DateTime",Value: null}
            ],
        Query: {
            __type: "BoldReports.RDL.DOM.Query",
            CommandText: "SELECT [HumanResources].[Department].[DepartmentID],\n[HumanResources].[Department].[Name],\n[HumanResources].[Department].[GroupName],\n[HumanResources].[Department].[ModifiedDate] FROM [HumanResources].[Department]",
            CommandType: 0,
            DataSourceName: "DataSource1",
            QueryDesignerState: {
                __type: "BoldReports.RDL.DOM.QueryDesignerState",
                Expressions: null,
                Filters: null,
                Joins: null,
                StoredProcedure: null,
                Tables: [
                    {
                    __type: "BoldReports.RDL.DOM.Table",
                    Columns: [
                        { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null,IsDuplicate: false,
                        IsSelected: true, Name: "DepartmentID"
                        },
                        { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null,IsDuplicate: false,
                        IsSelected: true, Name: "Name"
                        },
                        { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null,IsDuplicate: false,
                        IsSelected: true, Name: "GroupName"
                        },
                        { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null,IsDuplicate: false,
                        IsSelected: true, Name: "ModifiedDate"
                        }
                    ],
                    Name: "Department",
                    Schema: "HumanResources",
                    SchemaLevels: [
                        { Name: "HumanResources", SchemaType: "Schema"},
                        { Name: "Tables", SchemaType: "Category"},
                        { Name: "Department", SchemaType: "Table"}
                    ]
                    }
                ]
            },
            QueryParameters: [],
            Timeout: 0
            },
        CaseSensitivity:0,
        Collation:null,
        AccentSensitivity:0,
        KanatypeSensitivity:0,
        WidthSensitvity:0,
        Filters:[],
        SharedDataSet:null,
        InterpretSubtotalsAsDetails:0,
        DataSetInfo:null,
        DataSetObject:null
    };
    
        designerObj.updateDataset('DataSet1',dataset);
    </script>
  • Update shared dataset

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
    
        var dataset =
        {
        __type:'BoldReports.RDL.DOM.DataSet',
        Name:'DataSet2',
        Fields:[
            { __type: "BoldReports.RDL.DOM.Field", DataField: "ProdCat", Name: "ProdCat", TypeName: "System.String", Value: null},
            { __type: "BoldReports.RDL.DOM.Field", DataField: "SubCat", Name: "SubCat", TypeName: "System.String", Value: null},
            { __type: "BoldReports.RDL.DOM.Field", DataField: "OrderYear", Name: "OrderYear", TypeName: "System.Int32", Value: null },
            { __type: "BoldReports.RDL.DOM.Field", DataField: "OrderQtr", Name: "OrderQtr", TypeName: "System.String", Value: null},
            { __type: "BoldReports.RDL.DOM.Field", DataField: "Sales", Name: "Sales", TypeName: "System.Decimal", Value: null}
            ],
        Query:null,
        CaseSensitivity:0,
        Collation:null,
        AccentSensitivity:0,
        KanatypeSensitivity:0,
        WidthSensitvity:0,
        Filters:[],
        SharedDataSet: {
                __type: "BoldReports.RDL.DOM.SharedDataSet",
                QueryParameters: [],
                SharedDataSetReference: 'Sales'
        },
        InterpretSubtotalsAsDetails:0,
        DataSetInfo:null,
        DataSetObject:null
        };
    
        designerObj.updateDataset('DataSet1',dataset);
    </script>

updateDatasource

Updates the existing datasource in the report at runtime.

Parameter Type Description
datasourceName string Name of the existing datasource
datasource object a JSON to define a connection properties for datasource

Example

  • Update embedded datasource

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        var datasource = {
        __type:'BoldReports.RDL.DOM.DataSource',
        Name:'DataSource2',
        Transaction:false,
        DataSourceReference:null,
        SecurityType:'DataBase',
        ConnectionProperties:{
                __type:'BoldReports.RDL.DOM.ConnectionProperties',
                ConnectString:'Data Source=<instancename>;Initial Catalog=<database>;',
                EmbedCredentials:false,
                DataProvider:'SQL',
                IsDesignState:false,
                IntegratedSecurity:false,
                UserName:'',
                PassWord:'',
                Prompt:'Specify the Username and password for DataSource DataSource2',
                CustomProperties:[]
            }
        };
    
        designerObj.updateDatasource('DataSource1',datasource);
    </script>
  • Update shared datasource

    <div id="container"></div>
    <script>
        //Create Report Designer Instance
        $("#container").boldReportDesigner();
        var designerObj = $("#container").data("boldReportDesigner");
        var datasource =
        {
        __type:'BoldReports.RDL.DOM.DataSource',
        Name:'DataSource2',
        Transaction:false,
        DataSourceReference: '<database>',
        SecurityType:'None',
        ConnectionProperties:null
        };
    
        designerObj.updateDatasource('DataSource1',datasource);
    </script>

updateParameter

Updates the existing parameter in the report at runtime.

Parameter Type Description
reportParameterName string Name of the existing report parameter
reportParameter object JSON for the new parameter to be added in the report

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    var parameter =
    {
        __type: 'BoldReports.RDL.DOM.ReportParameter',
        Name: 'ReportParameter2',
        Prompt: 'ReportParameter2',
        DataType: 0,
        Hidden: true,
        AllowBlank: false,
        Nullable: false,
        MultiValue: false,
        ValidValues: {
            __type: 'BoldReports.RDL.DOM.ValidValues',
            ParameterValues: [
            {
                __type: 'BoldReports.RDL.DOM.ParameterValue',
                Label: 'System.Double',
                Value: 'report'
            }
            ],
            DataSetReference: null
        },
        DefaultValue: null
    };
    designerObj.updateParameter('ReportParameter1',parameter);
</script>