ejReportDesigner
26 Sep 2019 / 24 minutes to read
Report Designer allows to design the report that can be published in the server or downloaded in the local physical path.
Syntax
$(element).ejReportDesigner();
Example
<div id="container"></div>
<script>
// Create Report Designer
$('#container').ejReportDesigner();
</script>
Requires
-
module:jquery-1.10.2.js
-
module:jquery.easing.1.3.js
-
module:jsrender.js
-
module:codemirror.js
-
module:show-hint.js
-
module:sql.js
-
module:sql-hint.js
-
module:ej.core.js
-
module:ej.data.js
-
module:ej.touch.js
-
module:ej.draggable.js
-
module:ej.scroller.js
-
module:ej.globalize.js
-
module:ej.waitingpopup.js
-
module:ej.button.js
-
module:ej.checkbox.js
-
module:ej.radiobutton.js
-
module:ej.autocomplete.js
-
module:ej.datepicker.js
-
module:ej.timepicker.js
-
module:ej.datetimepicker.js
-
module:ej.daterangepicker.js
-
module:ej.dialog.js
-
module:ej.dropdownlist.js
-
module:ej.tooltip.js
-
module:ej.listbox.js
-
module:ej.map.js
-
module:ej.editor.js
-
module:ej.maskedit.js
-
module:ej.menu.js
-
module:ej.pager.js
-
module:ej.slider.js
-
module:ej.splitbutton.js
-
module:ej.toolbar.js
-
module:ej.tab.js
-
module:ej.treeview.js
-
module:ej.uploadbox.js
-
module:ej.colorpicker
-
module:ej.grid.js
-
module:ej.reportviewer.js
-
module:ej.chart.js
-
module:ej.circulargauge.js
-
module:ej.lineargauge.js
-
module:ej.bulletgraph.js
Members
configurePaneSettings object
Shows or hides the items of configuration pane in ReportDesigner control.
configurePaneSettings.items enum
Shows or hides the grouped items in the configuration pane with the help of enum ej.ReportDesigner.ConfigureItems
Name | Description |
---|---|
Property | Shows or hides the properties panel in configuration pane. |
Data | Shows or hides the data panel in configuration pane. |
Parameter | Shows or hides the parameter panel in configuration pane. |
ImageManager | Shows or hides the image manager panel in configuration pane. |
All | Shows all the configuration pane items. |
Default value
Example
- Show all configure pane items.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
configurePaneSettings: { items: ej.ReportDesigner.ConfigureItems.All }
});
</script>
- Hide all configure pane items.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
configurePaneSettings: { items: ~ej.ReportDesigner.ConfigureItems.All }
});
</script>
- Hide Properties panel from configure pane items.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
configurePaneSettings: { items: ej.ReportDesigner.ConfigureItems.All & ~ej.ReportDesigner.ConfigureItems.Property}
});
</script>
- Hide all items except Data panel from configure pane items.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
configurePaneSettings: { items: ej.ReportDesigner.ConfigureItems.All & ~ej.ReportDesigner.ConfigureItems.Property & ~ej.ReportDesigner.ConfigureItems.Parameter & ~ej.ReportDesigner.ConfigureItems.ImageManager}
});
</script>
configurePaneSettings.showConfigurePane boolean
Shows or hides the configuration pane in ReportDesigner control.
Default value
Example
- Show configure pane.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
configurePaneSettings: { showConfigurePane: true }
});
</script>
- Hide configure pane.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
configurePaneSettings: { showConfigurePane: false }
});
</script>
locale string
Specifies the locale for report designer.
Default Value
- “en-US”
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
locale: "fr-FR"
});
</script>
permissionSettings object
Shows or hides the create, edit, and delete options in data source and dataset panels.
permissionSettings.dataSet enum
Shows or hides the create, edit and delete options in dataset pane with the help of ej.ReportDesigner.Permission enum.
Name | Description |
---|---|
Create | Shows or hides create option in dataset pane. |
Edit | Shows or hides the edit option in dataset pane. |
Delete | Shows or hides the delete option in dataset pane. |
All | Shows all the options in dataset pane. |
Default value
Example
- Show all options in dataset pane.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
permissionSettings: { dataSet: ej.ReportDesigner.Permission.All }
});
</script>
- Hide all options in dataset pane.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
permissionSettings: { dataSet: ~ej.ReportDesigner.Permission.All }
});
</script>
- Hide Create option from dataset pane.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
permissionSettings: { dataSet: ej.ReportDesigner.Permission.All & ~ej.ReportDesigner.Permission.Create}
});
</script>
- Hide all items except Create option from dataset pane.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
permissionSettings: { dataSet: ej.ReportDesigner.Permission.All & ~ej.ReportDesigner.Permission.Edit & ~ej.ReportDesigner.Permission.Delete}
});
</script>
permissionSettings.dataSource enum
Shows or hides the create, edit and delete options in data source pane with the help of ej.ReportDesigner.Permission enum.
Name | Description |
---|---|
Create | Shows or hides create option in data source pane. |
Edit | Shows or hides the edit option in data source pane. |
Delete | Shows or hides the delete option in data source pane. |
All | Shows all the options in data source pane. |
Default value
Example
- Show all options in data source pane.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
permissionSettings: { dataSource: ej.ReportDesigner.Permission.All }
});
</script>
- Hide all options in data source pane.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
permissionSettings: { dataSource: ~ej.ReportDesigner.Permission.All }
});
</script>
- Hide Create option from data source pane.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
permissionSettings: { dataSource: ej.ReportDesigner.Permission.All & ~ej.ReportDesigner.Permission.Create}
});
</script>
- Hide all items except Create option from data source pane.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
permissionSettings: { dataSource: ej.ReportDesigner.Permission.All & ~ej.ReportDesigner.Permission.Edit & ~ej.ReportDesigner.Permission.Delete}
});
</script>
reportDataExtensions array
Gets or sets the list of custom data extension items.
Default Value
- []
reportDataExtensions.name string
Gets or sets the name of the datasource type.
Default Value
- empty
reportDataExtensions.className string
Gets or sets the class name of the data extension.
Default Value
- empty
reportDataExtensions.imageClass string
Gets or sets the image class name to load image in data pane tile.
Default Value
- empty
reportDataExtensions.displayName string
Gets or sets the name for data extension item to display in the data pane tile.
Default Value
- empty
Example
- Add a custom data extension to report designer
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
reportDataExtensions: [{
className: 'WebAPIDataSource',
name: 'WebAPI',
imageClass: 'e-reportdesigner-datasource-webapi',
displayName: 'WebAPI'
}]
});
</script>
- Add multiple custom data extensions to report designer
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
reportDataExtensions: [
{
className: 'WebAPIDataSource',
name: 'WebAPI',
imageClass: 'e-reportdesigner-datasource-webapi',
displayName: 'WebAPI'
},
{
className: 'PSQLDataSource',
name: 'PostgreSQL',
imageClass: 'e-reportdesigner-datasource-psql',
displayName: 'PostgreSQL'
}]
});
</script>
reportItemExtensions array
Gets or sets the list of custom report items.
Default Value
- []
reportItemExtensions.name string
Gets or sets the name for the report item.
Default Value
- empty
reportItemExtensions.className string
Gets or sets the class name of the report item.
Default Value
- empty
reportItemExtensions.imageClass string
Gets or sets the image class name to load image in widgets pane tile.
Default Value
- empty
reportItemExtensions.displayName string
Gets or sets the name for custom report item to display in the widgets pane tile.
Default Value
- empty
reportItemExtensions.category string
Gets or sets the category name for the report item.
Default Value
- empty
reportItemExtensions.toolTip object
Gets information to provide content for custom report item tooltip.
Name | Description |
---|---|
requirements | Gets or sets the minimum values required for the report item . |
description | Gets or sets the description content for the report item. |
title | Gets or sets the title for report item. |
Default Value
- null
Example
- Add a custom report item
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
reportItemExtensions: [{
name: 'barcode',
className: 'EJBarcode',
imageClass: 'customitem-barcode',
displayName: 'Barcode',
category: 'Custom report item',
toolTip: {
requirements: 'Add a report item to the designer area.',
description: 'Display the barcode lines as report item.',
title: 'Barcode'
}
}]
});
</script>
- Add multiple custom report items
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
reportItemExtensions: [
{
name: 'barcode',
className: 'EJBarcode',
imageClass: 'customitem-barcode',
displayName: 'Barcode',
category: 'Barcodes',
toolTip: {
requirements: 'Add a report item to the designer area.',
description: 'Display the barcode lines as report item.',
title: 'Barcode'
}
},
{
name: 'qrbarcode',
className: 'EJQRBarcode',
imageClass: 'customitem-qrbarcode',
displayName: 'QR Barcode',
category: 'Barcodes',
toolTip: <IItemTooltip>{
requirements: 'Add a report item to the designer area.',
description: 'Display the barcode lines as report item.',
title: 'QR Barcode'
}
}]
});
</script>
reportPath string
Gets or sets the report path of server.
Default Value
- null
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
reportPath: "/Sample Reports/invoice"
});
</script>
reportType string
Gets or sets the report type.
Name | Description |
---|---|
RDL | Renders designer in RDL mode. |
RDLC | Renders designer in RDLC mode. |
Default Value
- ej.ReportDesigner.ReportType.RDL
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
reportType: ej.ReportDesigner.ReportType.RDLC
});
</script>
reportServerUrl string
Gets or sets the reports server URL.
Default Value
- null
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
reportServerUrl: "https://reportserver.syncfusion.com/"
});
</script>
serviceAuthorizationToken string
Gets or sets the serviceAuthorizationToken to access the Report Server API services.
Default Value
- empty
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
serviceAuthorizationToken: token['token_type'] + ' ' + token['access_token']
});
</script>
serviceUrl string
Gets or sets the URL of the WebAPI service; it will be used for processing the report.
Default Value
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
serviceUrl: '../../api/ReportingService'
});
</script>
tenantName string
Gets or sets the tenant name of the user groups; it will be used when integrating report designer with server.
Default Value
- null
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
tenantName: "site"
});
</script>
toolbarSettings object
Defines the settings of the ReportDesigner toolbar.
toolbarSettings.items enum
Shows or hides the grouped items in the toolbar with the help of enum ej.ReportDesigner.ToolbarItems.
Name | Description |
---|---|
New | Creates a new, blank report. |
Open | Displays the Open dialog box to retrieve an existing report. |
Save | Saves the active report to a specified location. |
Cut | Removes the selected item from the active report. |
Copy | Copies selected text or object to the clipboard. |
Paste | Pastes the item that cut or copied into (the position of the insertion point) the report from the clipboard. |
Delete | Deletes the selected item or text from the report. |
Undo | Reverses the last action or deletes the last entry that is typed. |
Redo | Reverses the action of the last Undo command. |
Zoom | Used to "zoom in" to get a close-up view of a report or "zoom out" to see more of the page at a reduced size. |
Order | Used to change the layout order of report items in design area surface. |
Center | Aligns all report items to the center position of design surface in horizontal or vertical direction. |
Alignment | Aligns the selected report item in the design surface. |
Distribute | Distributes selected report items at equal intervals from each other. |
Sizing | Equally size the selected report items in the design surface. |
AlignGrid | Snaps the selected report items to the closest gridline. |
EditDesign | Switches from preview to design view of the report. |
View | Contains options to show or hide `Header`, `Footer`, `Grid Lines`, `Snap To Shape` in the report design. |
Preview | Previews the active report in report viewer. |
All | Shows all the toolbar items. |
Default Value
Example
- Show all toolbar items
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
toolbarSettings: { items: ej.ReportDesigner.ToolbarItems.All }
});
</script>
- Hide all toolbar items
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
toolbarSettings: { items: ~ej.ReportDesigner.ToolbarItems.All }
});
</script>
- Hide Zoom option from toolbar
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
toolbarSettings: { items: ej.ReportDesigner.ToolbarItems.All & ~ej.ReportDesigner.ToolbarItems.Zoom }
});
</script>
- Hide Open and Save option from toolbar
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
toolbarSettings: { items: ej.ReportDesigner.ToolbarItems.All & ~ej.ReportDesigner.ToolbarItems.Open & ~ej.ReportDesigner.ToolbarItems.Save }
});
</script>
toolbarSettings.showToolbar boolean
Shows or hides the toolbar.
Default Value
-
true
-
Show report designer toolbar.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
toolbarSettings: { showToolbar: true }
});
</script>
- Hide report designer toolbar.
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
toolbarSettings: { showToolbar: false }
});
</script>
toolbarSettings.templateId string
Specifies the toolbar template ID.
Default Value
- empty
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner(
{
toolbarSettings:{templateId: "customtoolbarId"}
});
</script>
Methods
addDataSet(dataset)
Add a dataset to the report at runtime.
Name | 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").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
var dataset =
{
__type:'Syncfusion.RDL.DOM.DataSet',
Name:'DataSet1',
Fields:[
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "DepartmentID",Name: "DepartmentID",TypeName: "System.Int16",Value: null},
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "Name",Name: "Name",TypeName: "System.String",Value: null},
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "GroupName",Name: "GroupName",TypeName: "System.String",Value: null },
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "ModifiedDate",Name: "ModifiedDate",TypeName: "System.DateTime",Value: null}
],
Query: {
__type: "Syncfusion.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: "Syncfusion.RDL.DOM.QueryDesignerState",
Expressions: null,
Filters: null,
Joins: null,
StoredProcedure: null,
Tables: [
{
__type: "Syncfusion.RDL.DOM.Table",
Columns: [
{ __type: "Syncfusion.RDL.DOM.Column",AggregateTye: undefined,AliasName: null,IsDuplicate: false,
IsSelected: true, Name: "DepartmentID"
},
{__type: "Syncfusion.RDL.DOM.Column",AggregateTye: undefined,AliasName: null,IsDuplicate: false,
IsSelected: true,Name: "Name"
},
{__type: "Syncfusion.RDL.DOM.Column",AggregateTye: undefined,AliasName: null,IsDuplicate: false,
IsSelected: true,Name: "GroupName"
},
{__type: "Syncfusion.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").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
var dataset =
{
__type:'Syncfusion.RDL.DOM.DataSet',
Name:'DataSet1',
Fields:[
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "ProdCat",Name: "ProdCat",TypeName: "System.String",Value: null},
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "SubCat",Name: "SubCat",TypeName: "System.String",Value: null},
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "OrderYear",Name: "OrderYear",TypeName: "System.Int32",Value: null },
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "OrderQtr",Name: "OrderQtr",TypeName: "System.String",Value: null},
{ __type: "Syncfusion.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: "Syncfusion.RDL.DOM.SharedDataSet",
QueryParameters: [],
SharedDataSetReference: 'Sales'
},
InterpretSubtotalsAsDetails:0,
DataSetInfo:null,
DataSetObject:null
};
designerObj.addDataSet(dataset);
</script>
addDataSource(datasource)
Add a datasource to the report at runtime.
Name | Type | Description |
---|---|---|
datasource | object | a JSON to define a connection properties for datasource. |
Example
<div id="container"></div>
<script>
//Create Report Designer Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
var datasource =
{
__type:'Syncfusion.RDL.DOM.DataSource',
Name:'DataSource1',
Transaction:false,
DataSourceReference:null,
SecurityType:'DataBase',
ConnectionProperties:{
__type:'Syncfusion.RDL.DOM.ConnectionProperties',
ConnectString:'Data Source=mvc.syncfusion.com;Initial Catalog=AdventureWorks;',
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").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
var datasource =
{
__type:'Syncfusion.RDL.DOM.DataSource',
Name:'DataSource1',
Transaction:false,
DataSourceReference: 'AdventureWorks',
SecurityType:'None',
ConnectionProperties:null
};
designerObj.addDataSource(datasource);
</script>
addItem(item)
Add a report item to the report at runtime.
Name | Type | Description |
---|---|---|
item | object | JSON for the new report item to be added |
Example
- Add a report item to report body
<div id="container"></div>
<script>
//Create Report Designer Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
var item = { left: 300, top: 100, itemType: 'Tablix', container: { name: 'Body' } };
designerObj.addItem(item);
</script>
- Add a report item to report header
<div id="container"></div>
<script>
//Create Report Designer Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
var item = { left: 100, top: 30, itemType: 'Image', container: { name: 'Header' } };
designerObj.addItem(item);
</script>
- Add a report item to report footer
<div id="container"></div>
<script>
//Create Report Designer Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
var item = { left: 50, top: 50, itemType: 'TextBox', container: { name: 'Footer' } };
designerObj.addItem(item);
</script>
- Add a report item into a tablix cell
<div id="container"></div>
<script>
//Create Report Designer Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
//Add image report item into tablix cell
var item = { left: 50, top: 50, itemType: 'Image', container: { name: 'Tablix1',rowIndex:0,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").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
//Add rectangle item
var item = { left: 50, top: 50, itemType: 'Rectangle', container: { name: 'Body' } };
designerObj.addItem(item);
//Add image report item into rectangle item
var item = { left: 10, top: 20, itemType: 'Image', container: { name: 'Rectangle1'} };
designerObj.addItem(item);
</script>
bringForward()
Visually move the selected report item over its closest intersected report items.
Example
<div id="container"></div>
<script>
//Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.bringForward();
</script>
bringToFront()
Visually move the selected report item over all other intersected report items.
Example
<div id="container"></div>
<script>
//Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.bringToFront();
</script>
canCopy()
Determines whether a copy operation is possible.
Returns
- boolean
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.canCopy();
</script>
canCut()
Determines whether a cut operation is possible.
Returns
- boolean
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.canCut();
</script>
canPaste()
Determines whether a paste operation is possible.
Returns
- boolean
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
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 ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.canRedo();
</script>
canRemove()
Determines whether a delete operation is possible.
Returns
- boolean
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
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 ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.canUndo();
</script>
cloneDataSet(name)
Clone the existing dataset in the report at runtime.
Name | Type | Description |
---|---|---|
name | string | Name of the existing dataset. |
Example
<div id="container"></div>
<script>
//Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.cloneDataSet('DataSet1');
</script>
cloneDataSource(name)
Clone the existing datasource in the report at runtime.
Name | Type | Description |
---|---|---|
name | string | Name of the existing datasource. |
Example
<div id="container"></div>
<script>
//Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
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 ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
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 ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.cut();
</script>
hasReportChanges()
Returns the boolean value that specifies whether the report has changes or not.
Returns
- boolean
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
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 ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
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 ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
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 ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.isServerReport();
</script>
newReport()
To create a new report.
Name | Type | Description |
---|---|---|
name | string(optional) | Name of the new report. |
dataSetPath | string(optional) | Name of the shared dataset. |
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.newReport();
</script>
newServerReport()
To create a new report in the server.
Name | Type | Description |
---|---|---|
name | string(optional) | Name of the new report. |
dataSetPath | string(optional) | Name of the shared dataset. |
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.newServerReport('Test1', 'ab018ae7-f747-49a1-9e26-759e35c0a0db');
</script>
openReport()
This method opens the report from the server.
Name | Type | Description |
---|---|---|
reportPath | string(optional) | Path of the server report |
serverUrl | string(optional) | Reports server URL |
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.openReport();
</script>
openReportDefinition()
This method opens the report using raw report data.
Name | Type | Description |
---|---|---|
rdlData | JSON | string | XML | Provide the report definition in the JSON or string or XML format |
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
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 ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.openReportFromDevice();
</script>
openServerReportDialog()
Opens the report designer browse dialog to browse the available reports in the reportserver.
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
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 ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.paste();
</script>
redo()
Reverses the action of the last Undo command.
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.redo();
</script>
remove()
Deletes the selected report item from the report.
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.remove();
</script>
removeDataSet(dataset)
Remove a dataset from the report at runtime.
Name | Type | Description |
---|---|---|
dataset | string | Name of the dataset. |
Example
<div id="container"></div>
<script>
//Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.removeDataSet('DataSet1');
</script>
removeDatasource(datasource)
Remove a datasource from the report at runtime.
Name | Type | Description |
---|---|---|
datasource | string | Name of the datasource. |
Example
<div id="container"></div>
<script>
//Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.removeDatasource('DataSource1');
</script>
removeItem(itemName)
Remove the given report item from the report.
Name | Type | Description |
---|---|---|
itemName | string | Name of the report item to be removed from report |
Example
<div id="container"></div>
<script>
//Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.removeItem('Tablix1');
</script>
saveReport()
This method saves the report into the server.
Name | Type | Description |
---|---|---|
reportPath | string(optional) | Path of the ReportServer report |
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.saveReport();
</script>
saveReportDefinition()
This method returns the report in JSON or XML format.
Name | Type | Description |
---|---|---|
callback | function | Callback method to return the report data |
type | string(optional) | Specify the format as JSON or XML to save the report. |
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.saveReportDefinition((args: any) => {},'JSON');
</script>
saveServerReportDialog()
Opens the report designer browse dialog to save the report into server.
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.saveServerReportDialog();
</script>
saveToDevice()
To download the designed report.
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.saveToDevice();
</script>
selectItems(itemNames)
Update the selection to report items at runtime.
Name | Type | Description |
---|---|---|
itemNames | array | Name of the report items as string array. |
Example
<div id="container"></div>
<script>
//Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
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 ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.sendBackward();
</script>
sendToBack()
Visually move the selected report item behind all other intersected report items.
Example
<div id="container"></div>
<script>
//Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.sendToBack();
</script>
showDesign()
Performs switch action from viewer to designer at runtime.
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.showDesign();
</script>
showNewReportDialog()
To open the new report dialog.
Name | Type | Description |
---|---|---|
callback | function | Callback method of new report dialog actions. |
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.showNewReportDialog((args: any) => {
});
</script>
showOpenSaveReportDialog()
To open the server browse dialog.
Name | Type | Description |
---|---|---|
browseType | enum(Open/Save) | Open/Save the dialog type. |
callback | function | Callback method of open/save dialog actions. |
reportName | string(optional) | Name of the report to save. |
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.showOpenSaveReportDialog(browseType, (args: any) => {
});
</script>
showPreview()
Performs switch action from designer to viewer at runtime.
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.showPreview();
</script>
undo()
Reverses the last action that was performed.
Example
<div id="container"></div>
<script>
//Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.undo();
</script>
updateDataset(datasetName,dataset)
Update the dataset in the report at runtime.
Name | 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 ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
var dataset =
{
__type:'Syncfusion.RDL.DOM.DataSet',
Name:'DataSet2',
Fields:[
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "DepartmentID",Name: "DepartmentID",TypeName: "System.Int16",Value: null},
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "Name",Name: "Name",TypeName: "System.String",Value: null},
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "GroupName",Name: "GroupName",TypeName: "System.String",Value: null },
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "ModifiedDate",Name: "ModifiedDate",TypeName: "System.DateTime",Value: null}
],
Query: {
__type: "Syncfusion.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: "Syncfusion.RDL.DOM.QueryDesignerState",
Expressions: null,
Filters: null,
Joins: null,
StoredProcedure: null,
Tables: [
{
__type: "Syncfusion.RDL.DOM.Table",
Columns: [
{ __type: "Syncfusion.RDL.DOM.Column",AggregateTye: undefined,AliasName: null,IsDuplicate: false,
IsSelected: true, Name: "DepartmentID"
},
{__type: "Syncfusion.RDL.DOM.Column",AggregateTye: undefined,AliasName: null,IsDuplicate: false,
IsSelected: true,Name: "Name"
},
{__type: "Syncfusion.RDL.DOM.Column",AggregateTye: undefined,AliasName: null,IsDuplicate: false,
IsSelected: true,Name: "GroupName"
},
{__type: "Syncfusion.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").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
var dataset =
{
__type:'Syncfusion.RDL.DOM.DataSet',
Name:'DataSet2',
Fields:[
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "ProdCat",Name: "ProdCat",TypeName: "System.String",Value: null},
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "SubCat",Name: "SubCat",TypeName: "System.String",Value: null},
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "OrderYear",Name: "OrderYear",TypeName: "System.Int32",Value: null },
{ __type: "Syncfusion.RDL.DOM.Field",DataField: "OrderQtr",Name: "OrderQtr",TypeName: "System.String",Value: null},
{ __type: "Syncfusion.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: "Syncfusion.RDL.DOM.SharedDataSet",
QueryParameters: [],
SharedDataSetReference: 'Sales'
},
InterpretSubtotalsAsDetails:0,
DataSetInfo:null,
DataSetObject:null
};
designerObj.updateDataset('DataSet1',dataset);
</script>
updateDatasource(datasourceName,datasource)
Update the datasource in the report at runtime.
Name | Type | Description |
---|---|---|
datasourceName | string | Name of the existing datasource. |
datasource | object | a JSON to define a connection properties for datasource. |
Example
<div id="container"></div>
<script>
//Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
var datasource = {
__type:'Syncfusion.RDL.DOM.DataSource',
Name:'DataSource2',
Transaction:false,
DataSourceReference:null,
SecurityType:'DataBase',
ConnectionProperties:{
__type:'Syncfusion.RDL.DOM.ConnectionProperties',
ConnectString:'Data Source=mvc.syncfusion.com;Initial Catalog=AdventureWorks;',
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").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
var datasource =
{
__type:'Syncfusion.RDL.DOM.DataSource',
Name:'DataSource2',
Transaction:false,
DataSourceReference: 'AdventureWorks',
SecurityType:'None',
ConnectionProperties:null
};
designerObj.updateDatasource('DataSource1',datasource);
</script>
Events
ajaxBeforeLoad
This event will be triggered before AJAX loads.
Name | Type | Description |
---|---|---|
|
array | AJAX headers, we can pass any custom header through this property. |
|
object | To pass the custom data while AJAX post back. |
|
String | Token of report designer. |
|
string | Token of ReportingService. |
|
String | Action type of AJAX call back. |
Example
$("#container").ejReportDesigner({
ajaxBeforeLoad: function(args) {
if (args && args.headers) {
args.headers.push({ 'Key': 'keyCode', 'Value': ("Authorization") });
}
}
});
ajaxError
This event will be triggered when AJAX result is failed.
Example
$("#container").ejReportDesigner({
ajaxError: function(args) {
// Write your block of code
}
});
ajaxSuccess
This event will be triggered when AJAX result is succeeded.
Example
$("#container").ejReportDesigner({
ajaxSuccess: function(args) {
// Write your block of code
}
});
create
This event will be triggered when the Report Designer widget is created.
Example
$("#container").ejReportDesigner({
create: function(args) {
// Write your block of code
}
});
destroy
This event will be triggered when the Report Designer widget is destroyed.
Example
$("#container").ejReportDesigner({
destroy: function(args) {
// Write your block of code
}
});
newDataClick
This event will be triggered while initiating new data click action. You can suppress the new data creation panel and perform custom actions.
Example
$("#container").ejReportDesigner({
newDataClick: function(args) {
// Write your block of code
}
});
openReportClick
This event will be triggered while clicking open menu items.
Name | Type | Description |
---|---|---|
|
jQuery | DOM of the clicked target. |
|
string | Name of selected item. |
Example
$("#container").ejReportDesigner({
openReportClick: function(args) {
// Write your block of code
}
});
previewReport
This event will be triggered while previewing the report in RDLC mode. It can be used to suppress the preview data dialog in RDLC mode.
Name | Type | Description |
---|---|---|
|
object | Contains the instance of Report Viewer component. |
|
boolean | Specifies whether to show or hide preview data dialog. |
|
array | Contains the required data to load the report. |
Example
$("#container").ejReportDesigner({
previewReport: function(args) {
// Write your block of code
}
});
reportModified
This event will be triggered when the report is modified.
Name | Type | Description |
---|---|---|
|
boolean | Specifies whether the report is modified or not. |
|
string | Name of Opened Report. |
Example
$("#container").ejReportDesigner({
reportModified: function(args) {
// Write your block of code
}
});
reportOpened
This event will be triggered when the report is opened.
Name | Type | Description |
---|---|---|
|
boolean | Specifies whether report opened from device or server. |
|
string | Name of Opened Report. |
Example
$("#container").ejReportDesigner({
reportOpened: function(args) {
// Write your block of code
}
});
reportSaved
This event will be triggered when the report is saved.
Name | Type | Description |
---|---|---|
|
boolean | Specifies whether report opened from device or server. |
|
string | States whether report is downloaded from ReportServer. |
Example
$("#container").ejReportDesigner({
reportSaved: function (args) {
// Write your block of code
}
});
saveReportClick
This event will be triggered when the save menu items are clicked.
Name | Type | Description |
---|---|---|
|
jQuery | DOM of the clicked target. |
|
string | Name of selected item. |
Example
$("#container").ejReportDesigner({
saveReportClick: function(args) {
// Write your block of code
}
});
toolbarClick
This event will be triggered while clicking the toolbar items.
Name | Type | Description |
---|---|---|
|
jQuery | DOM of the clicked target. |
|
string | Name of clicked item. |
Example
$("#container").ejReportDesigner({
toolbarClick: function(args) {
// Write your block of code
}
});
toolbarRendering
This event will be triggered on rendering the Report Designer toolbar.
Example
$("#container").ejReportDesigner({
toolbarRendering: function(args) {
// Write your block of code
}
});