ejReportDesigner

Report Designer allows to design the report that can be published in the Report Server or downloaded in the local physical path.

Syntax

JS

$(element).ejReportDesigner();

Example

JS

<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

HTML

<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

JS

<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

JS

<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

JS

<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

null

Example

JS

<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

ej.ReportDesigner.ToolbarItems.All

Example

HTML

<div id="container"></div>
<script>
    $("#container").ejReportDesigner({
        toolbarSettings: { items: ej.ReportDesigner.ToolbarItems.All }
    });
</script>

toolbarSettings.showToolbar boolean

Shows or hides the toolbar.

Default value

true

Example

HTML

<div id="container"></div>
<script>
    $("#container").ejReportDesigner({
        toolbarSettings: { showToolbar: true }
    });
</script>

toolbarSettings.templateId string

Specifies the toolbar template ID.

Default Value

• empty

Example

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

JS

$("#container").ejReportDesigner({
        ajaxBeforeLoad: function(args) {
            // Write your block of code
        }
    });

Name	Type	Description
HTML headers	array	AJAX headers, we can pass any custom header through this property.
HTML data	object	To pass the custom data while AJAX post back.
HTML reportDesignerToken	String	Token of report designer.
HTML serviceAuthorizationToken	string	Token of ReportingService.
HTML actionType	String	Action type of AJAX call back.

ajaxError

This event will be triggered when AJAX result is failed.

Example

JS

$("#container").ejReportDesigner({
        ajaxError: function(args) {
            // Write your block of code
        }
    });

ajaxSuccess

This event will be triggered when AJAX result is succeeded.

Example

JS

$("#container").ejReportDesigner({
        ajaxSuccess: function(args) {
            // Write your block of code
        }
    });

create

This event will be triggered when the Report Designer widget is created.

Example

JS

$("#container").ejReportDesigner({
        create: function(args) {
            // Write your block of code 
        }
    });

destroy

This event will be triggered when the Report Designer widget is destroyed.

Example

JS

$("#container").ejReportDesigner({
        destroy: function(args) {
            // Write your block of code
        }
    });

openReportClick

This event will be triggered while clicking open menu items.

Example

JS

$("#container").ejReportDesigner({
        openReportClick: function(args) {
            // Write your block of code
        }
    });

Name	Type	Description
HTML target	jQuery	DOM of the clicked target.
HTML select	string	Name of selected item.

reportModified

This event will be triggered when the report is modified.

Example

JS

$("#container").ejReportDesigner({
        reportModified: function(args) {
            // Write your block of code
        }
    });

Name	Type	Description
HTML isModified	boolean	Specifies whether the report is modified or not.
HTML reportName	string	Name of Opened Report.

reportOpened

This event will be triggered when the report is opened.

Example

JS

$("#container").ejReportDesigner({
        reportOpened: function(args) {
            // Write your block of code
        }
    });

Name	Type	Description
HTML isServerReport	boolean	Specifies whether report opened from device or server.
HTML reportName	string	Name of Opened Report.

reportSaved

This event will be triggered when the report is saved.

Example

JS

$("#container").ejReportDesigner({ 
        reportSaved: function (args) {
                // Write your block of code
        }
    });

Name	Type	Description
HTML isServerReport	boolean	Specifies whether report opened from device or server.
HTML reportAction	string	States whether report is downloaded from ReportServer.

saveReportClick

This event will be triggered when the save menu items are clicked.

Example

JS

$("#container").ejReportDesigner({
        saveReportClick: function(args) {
            // Write your block of code
        }
    });

Name	Type	Description
HTML target	jQuery	DOM of the clicked target.
HTML select	string	Name of selected item.

toolbarClick

This event will be triggered while clicking the toolbar items.

Example

JS

$("#container").ejReportDesigner({
        toolbarClick: function(args) {
            // Write your block of code
        }
    });

Name	Type	Description
HTML target	jQuery	DOM of the clicked target.
HTML click	string	Name of clicked item.

toolbarRendering

This event will be triggered on rendering the Report Designer toolbar.

Example

JS

$("#container").ejReportDesigner({
        toolbarRendering: function(args) {
            // Write your block of code 
        }
    });

extensionLocaleChanged

This event will be triggered on locale change action in report designer.

Example

JS

$("#container").ejReportDesigner({
        extensionLocaleChanged: function(args) {
            // Write your block of code
        }
    });