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

ej.ReportDesigner.ConfigureItems.All

Example

Show all configure pane items.

html

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

Hide all configure pane items.

html

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

Hide Properties panel from configure pane items.

html

<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.

html

<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

true

Example

Show configure pane.

html

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

Hide configure pane.

html

<div id="container"></div>
<script>
    $("#container").ejReportDesigner({
        configurePaneSettings: { showConfigurePane: false }
    });
</script>

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>

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

ej.ReportDesigner.Permission.All

Example

Show all options in dataset pane.

html

<div id="container"></div>
<script>
    $("#container").ejReportDesigner({
        permissionSettings: { dataSet: ej.ReportDesigner.Permission.All }
    });
</script>

Hide all options in dataset pane.

html

<div id="container"></div>
<script>
    $("#container").ejReportDesigner({
        permissionSettings: { dataSet: ~ej.ReportDesigner.Permission.All }
    });
</script>

Hide Create option from dataset pane.

html

<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.

html

<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

ej.ReportDesigner.Permission.All

Example

Show all options in data source pane.

html

<div id="container"></div>
<script>
    $("#container").ejReportDesigner({
        permissionSettings: { dataSource: ej.ReportDesigner.Permission.All }
    });
</script>

Hide all options in data source pane.

html

<div id="container"></div>
<script>
    $("#container").ejReportDesigner({
        permissionSettings: { dataSource: ~ej.ReportDesigner.Permission.All }
    });
</script>

Hide Create option from data source pane.

html

<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.

html

<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

html

<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

html

<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

html

<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

html

<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

null

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

ej.ReportDesigner.ToolbarItems.All

Example

Show all toolbar items

html

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

Hide all toolbar items

html

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

Hide Zoom option from toolbar

html

<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

html

<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.

html

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

Hide report designer toolbar.

html

<div id="container"></div>
<script>
    $("#container").ejReportDesigner({
        toolbarSettings: { showToolbar: false }
    });
</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>

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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

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>

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 boolean 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>

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>

canUndo()

Returns a boolean 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>

cloneDataSet(name)

Clone the existing dataset in the report at runtime.

Name	Type	Description
name	string	Name of the existing dataset.

Example

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

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 server.

Name	Type	Description
reportPath	string(optional)	Path of the server 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>

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

html

<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

html

<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

html

<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

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>

remove()

Deletes the selected report item from the report.

Example

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

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>

selectItems(itemNames)

Update the selection to report items at runtime.

Name	Type	Description
itemNames	array	Name of the report items as string array.

Example

html

<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

html

<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

html

<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

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()

Performs switch action from designer to viewer at runtime.

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>

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

html

<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

html

<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

html

<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

html

<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
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.

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
html `target`	jQuery	DOM of the clicked target.
html `select`	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
html `reportViewer`	object	Contains the instance of Report Viewer component.
html `cancelDataInputDialog`	boolean	Specifies whether to show or hide preview data dialog.
html `dataSets`	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
html `isModified`	boolean	Specifies whether the report is modified or not.
html `reportName`	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
html `isServerReport`	boolean	Specifies whether report opened from device or server.
html `reportName`	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
html `isServerReport`	boolean	Specifies whether report opened from device or server.
html `reportAction`	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
html `target`	jQuery	DOM of the clicked target.
html `select`	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
html `target`	jQuery	DOM of the clicked target.
html `click`	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 
        }
    });

ejReportDesigner

Syntax

Example

Requires

Members

configurePaneSettings object

configurePaneSettings.items enum

Default value

Example

configurePaneSettings.showConfigurePane boolean

Default value

Example

locale string

Default Value

Example

permissionSettings object

permissionSettings.dataSet enum

Default value

Example

permissionSettings.dataSource enum

Default value

Example

reportDataExtensions array

Default Value

reportDataExtensions.name string

Default Value

reportDataExtensions.className string

Default Value

reportDataExtensions.imageClass string

Default Value

reportDataExtensions.displayName string

Default Value

Example

reportItemExtensions array

Default Value

reportItemExtensions.name string

Default Value

reportItemExtensions.className string

Default Value

reportItemExtensions.imageClass string

Default Value

reportItemExtensions.displayName string

Default Value

reportItemExtensions.category string

Default Value

reportItemExtensions.toolTip object

Default Value

Example

reportPath string

Default Value

Example

reportType string

Default Value

Example

reportServerUrl string

Default Value

Example

serviceAuthorizationToken string

Default Value

Example

serviceUrl string

Default Value

Example

tenantName string

Default Value

Example

toolbarSettings object

toolbarSettings.items enum

Default Value

Example

toolbarSettings.showToolbar boolean

Default Value

toolbarSettings.templateId string

Default Value

Example

Methods

addDataSet(dataset)

Example

addDataSource(datasource)

Example

configurePaneSettings `object`

configurePaneSettings.items `enum`

configurePaneSettings.showConfigurePane `boolean`

locale `string`

permissionSettings `object`

permissionSettings.dataSet `enum`

permissionSettings.dataSource `enum`

reportDataExtensions `array`

reportDataExtensions.name `string`

reportDataExtensions.className `string`

reportDataExtensions.imageClass `string`

reportDataExtensions.displayName `string`

reportItemExtensions `array`

reportItemExtensions.name `string`

reportItemExtensions.className `string`

reportItemExtensions.imageClass `string`

reportItemExtensions.displayName `string`

reportItemExtensions.category `string`

reportItemExtensions.toolTip `object`

reportPath `string`

reportType `string`

reportServerUrl `string`

serviceAuthorizationToken `string`

serviceUrl `string`

tenantName `string`

toolbarSettings `object`

toolbarSettings.items `enum`

toolbarSettings.showToolbar `boolean`

toolbarSettings.templateId `string`