ejReportDesigner
Report Designer allows to design the report that can be published in the Report 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
locale string
Specifies the locale for report designer.
Default Value
- “en-US”
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
locale: "fr-FR"
});
</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>
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
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>
toolbarSettings object
Specifies the toolbar settings.
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. |
Preview | Previews the active report in report viewer. |
GridLine | Enables/Disables the gridline in active report. |
Header | Enables header area in the report. |
Footer | Enables footer area in the report. |
EditDesign | Switches from preview to design view of the report. |
All | Shows all the toolbar items. |
Default value
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
toolbarSettings: { items: ej.ReportDesigner.ToolbarItems.All }
});
</script>
toolbarSettings.showToolbar boolean
Shows or hides the toolbar.
Default value
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({
toolbarSettings: { showToolbar: true }
});
</script>
toolbarSettings.templateId string
Specifies the toolbar template ID.
Default Value
- empty
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner(
{
toolbarSettings:{templateId: "customtoolbarId"}
});
</script>
reportItemExtensions array
Gets or sets the list of custom report item.
Default Value
- []
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({ reportItemExtensions: [{
name: 'barcode',
className: 'EJBarcode',
imageClass: 'customitem-barcode',
displayName: 'Barcode',
category: 'Custom ReportItem',
toolTip: {
requirements: 'Add a report item to the designer area.',
description: 'Display the barcode lines as report item.',
title: 'Barcode'
}
}]
});
</script>
reportItemExtensions.name string
Gets or sets the name for the report item.
Default Value
- empty
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({ reportItemExtensions: [{
name: 'barcode',
className: 'EJBarcode',
imageClass: 'customitem-barcode',
displayName: 'Barcode',
category: 'Custom ReportItem',
toolTip: {
requirements: 'Add a report item to the designer area.',
description: 'Display the barcode lines as report item.',
title: 'Barcode'
}
}]
});
</script>
reportItemExtensions.className string
Gets or sets the class name of the report item.
Default Value
- empty
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({ reportItemExtensions: [{
name: 'barcode',
className: 'EJBarcode',
imageClass: 'customitem-barcode',
displayName: 'Barcode',
category: 'Custom ReportItem',
toolTip: {
requirements: 'Add a report item to the designer area.',
description: 'Display the barcode lines as report item.',
title: 'Barcode'
}
}]
});
</script>
reportItemExtensions.imageClass string
Gets or sets the image class name to load image in widgets pane tile.
Default Value
- empty
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({ reportItemExtensions: [{
name: 'barcode',
className: 'EJBarcode',
imageClass: 'customitem-barcode',
displayName: 'Barcode',
category: 'Custom ReportItem',
toolTip: {
requirements: 'Add a report item to the designer area.',
description: 'Display the barcode lines as report item.',
title: 'Barcode'
}
}]
});
</script>
reportItemExtensions.displayName string
Gets or sets the name for custom report item to display in the widgets pane tile.
Default Value
- empty
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({ reportItemExtensions: [{
name: 'barcode',
className: 'EJBarcode',
imageClass: 'customitem-barcode',
displayName: 'Barcode',
category: 'Custom ReportItem',
toolTip: {
requirements: 'Add a report item to the designer area.',
description: 'Display the barcode lines as report item.',
title: 'Barcode'
}
}]
});
</script>
reportItemExtensions.category string
Gets or sets the category name for the report item.
Default Value
- empty
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({ reportItemExtensions: [{
name: 'barcode',
className: 'EJBarcode',
imageClass: 'customitem-barcode',
displayName: 'Barcode',
category: 'Custom ReportItem',
toolTip: {
requirements: 'Add a report item to the designer area.',
description: 'Display the barcode lines as report item.',
title: 'Barcode'
}
}]
});
</script>
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
<div id="container"></div>
<script>
$("#container").ejReportDesigner({ reportItemExtensions: [{
name: 'barcode',
className: 'EJBarcode',
imageClass: 'customitem-barcode',
displayName: 'Barcode',
category: 'Custom ReportItem',
toolTip: {
requirements: 'Add a report item to the designer area.',
description: 'Display the barcode lines as report item.',
title: 'Barcode'
}
}]
});
</script>
reportDataExtensions array
Gets or sets the list of custom data extension item.
Default Value
- []
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({ reportDataExtensions: [{
className: 'WebAPIDataSource',
name: 'WebAPI',
imageClass: 'e-reportdesigner-datasource-webapi',
displayName: 'WebAPI'
}]
});
</script>
reportDataExtensions.name string
Gets or sets the name of the datasource type.
Default Value
- empty
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({ reportDataExtensions: [{
className: 'WebAPIDataSource',
name: 'WebAPI',
imageClass: 'e-reportdesigner-datasource-webapi',
displayName: 'WebAPI'
}]
});
</script>
reportDataExtensions.className string
Gets or sets the class name of the data extension.
Default Value
- empty
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({ reportDataExtensions: [{
className: 'WebAPIDataSource',
name: 'WebAPI',
imageClass: 'e-reportdesigner-datasource-webapi',
displayName: 'WebAPI'
}]
});
</script>
reportDataExtensions.imageClass string
Gets or sets the image class name to load image in data pane tile.
Default Value
- empty
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({ reportDataExtensions: [{
className: 'WebAPIDataSource',
name: 'WebAPI',
imageClass: 'e-reportdesigner-datasource-webapi',
displayName: 'WebAPI'
}]
});
</script>
reportDataExtensions.displayName string
Gets or sets the name for data extension item to display in the data pane tile.
Default Value
- empty
Example
<div id="container"></div>
<script>
$("#container").ejReportDesigner({ reportDataExtensions: [{
className: 'WebAPIDataSource',
name: 'WebAPI',
imageClass: 'e-reportdesigner-datasource-webapi',
displayName: 'WebAPI'
}]
});
</script>
Methods
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>
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>
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 bool 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>
canUndo()
Returns a bool 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>
copy()
Copies the selected ReportItem from design panel to 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 ReportItem from design panel to Report Designer internal clipboard.
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.cut();
</script>
remove()
Deletes the selected item from the report.
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.remove();
</script>
hasReportChanges()
Returns the bool 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 bool 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 bool 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 bool 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 ReportServer.
Name | Type | Description |
---|---|---|
reportPath | string(optional) | Path of the ReportServer 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>
openReportFromDevice()
To open the report client browse dialog.
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.openReportFromDevice();
</script>
openServerReportDialog()
To open the report open server browse dialog.
Example
<div id="container"></div>
<script>
// Create ReportDesigner Instance
$("#container").ejReportDesigner();
var designerObj = $("#container").data("ejReportDesigner");
designerObj.openServerReportDialog();
</script>
paste()
Pastes the selected ReportItem from 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>
saveReport()
This method saves the report into the ReportServer.
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>
saveServerReportDialog()
To open the report save server browse dialog.
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>
showDesign()
To show the report design.
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()
To show the report preview.
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>
Events
ajaxBeforeLoad
This event will be triggered before AJAX loads.
Example
$("#container").ejReportDesigner({
ajaxBeforeLoad: function(args) {
// Write your block of code
}
});
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. |
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
}
});
openReportClick
This event will be triggered while clicking open menu items.
Example
$("#container").ejReportDesigner({
openReportClick: function(args) {
// Write your block of code
}
});
Name | Type | Description |
---|---|---|
|
jQuery | DOM of the clicked target. |
|
string | Name of selected item. |
reportModified
This event will be triggered when the report is modified.
Example
$("#container").ejReportDesigner({
reportModified: function(args) {
// Write your block of code
}
});
Name | Type | Description |
---|---|---|
|
boolean | Specifies whether the report is modified or not. |
|
string | Name of Opened Report. |
reportOpened
This event will be triggered when the report is opened.
Example
$("#container").ejReportDesigner({
reportOpened: function(args) {
// Write your block of code
}
});
Name | Type | Description |
---|---|---|
|
boolean | Specifies whether report opened from device or server. |
|
string | Name of Opened Report. |
reportSaved
This event will be triggered when the report is saved.
Example
$("#container").ejReportDesigner({
reportSaved: function (args) {
// Write your block of code
}
});
Name | Type | Description |
---|---|---|
|
boolean | Specifies whether report opened from device or server. |
|
string | States whether report is downloaded from ReportServer. |
saveReportClick
This event will be triggered when the save menu items are clicked.
Example
$("#container").ejReportDesigner({
saveReportClick: function(args) {
// Write your block of code
}
});
Name | Type | Description |
---|---|---|
|
jQuery | DOM of the clicked target. |
|
string | Name of selected item. |
toolbarClick
This event will be triggered while clicking the toolbar items.
Example
$("#container").ejReportDesigner({
toolbarClick: function(args) {
// Write your block of code
}
});
Name | Type | Description |
---|---|---|
|
jQuery | DOM of the clicked target. |
|
string | Name of clicked item. |
toolbarRendering
This event will be triggered on rendering the Report Designer toolbar.
Example
$("#container").ejReportDesigner({
toolbarRendering: function(args) {
// Write your block of code
}
});
extensionLocaleChanged
This event will be triggered on locale change action in report designer.
Example
$("#container").ejReportDesigner({
extensionLocaleChanged: function(args) {
// Write your block of code
}
});