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
            }
        });