Search results

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>

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!