ejReportDesigner

Report Designer allows to design the report that can be published in the 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

    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

  • js
  • <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

  • js
  • <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

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

    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

  • js
  • <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

  • js
  • $("#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

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

    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

  • js
  • $("#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

  • js
  • $("#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

  • js
  • $("#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

  • js
  • $("#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

  • js
  • $("#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

  • js
  • $("#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

  • js
  • $("#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

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

    toolbarRendering

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

    Example

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