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>
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>
Add a report item to the report at runtime.
Name | Type | Description | ||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
item | object |
JSON for the new report item to be added.
|
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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.
|
Example
<div id="container"></div>
<script>
// Create Report Designer Instance
$("#container").boldReportDesigner();
var designerObj = $("#container").data("boldReportDesigner");
designerObj.openReport();
</script>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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.
|
Example
<div id="container"></div>
<script>
// Create Report Designer Instance
$("#container").boldReportDesigner();
var designerObj = $("#container").data("boldReportDesigner");
designerObj.saveReport();
</script>
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
|
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>
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>
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>
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>
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>
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>
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>
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>
Opens the report designer browse dialog to open/save reports in the report server.
Parameter | Type | Description | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
browseType | enum
|
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.
|
||||||||||||||
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>
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>
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>
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>
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>
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>