Methods

addDataSet

Add a dataset to the report at runtime.

Example

• Add embedded dataset to the report

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var dataset =
      {
      __type:'BoldReports.RDL.DOM.DataSet',
      Name:'DataSet1',
      Fields:[
          { __type: "BoldReports.RDL.DOM.Field", DataField: "DepartmentID", Name: "DepartmentID", TypeName: "System.Int16",Value: null},
          { __type: "BoldReports.RDL.DOM.Field", DataField: "Name", Name: "Name", TypeName: "System.String",Value: null},
          { __type: "BoldReports.RDL.DOM.Field", DataField: "GroupName", Name: "GroupName", TypeName: "System.String",Value: null },
          { __type: "BoldReports.RDL.DOM.Field", DataField: "ModifiedDate", Name: "ModifiedDate", TypeName: "System.DateTime",Value: null}
          ],
      Query: {
          __type: "BoldReports.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: "BoldReports.RDL.DOM.QueryDesignerState",
              Expressions: null,
              Filters: null,
              Joins: null,
              StoredProcedure: null,
              Tables: [
                  {
                  __type: "BoldReports.RDL.DOM.Table",
                  Columns: [
                      { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null, IsDuplicate: false,
                      IsSelected: true, Name: "DepartmentID"
                      },
                      { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null, IsDuplicate: false,
                      IsSelected: true, Name: "Name"
                      },
                      { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null, IsDuplicate: false,
                      IsSelected: true, Name: "GroupName"
                      },
                      { __type: "BoldReports.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

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
  
      var dataset =
      {
      __type:'BoldReports.RDL.DOM.DataSet',
      Name:'DataSet1',
      Fields:[
          { __type: "BoldReports.RDL.DOM.Field", DataField: "ProdCat", Name: "ProdCat", TypeName: "System.String", Value: null},
          { __type: "BoldReports.RDL.DOM.Field", DataField: "SubCat", Name: "SubCat", TypeName: "System.String", Value: null},
          { __type: "BoldReports.RDL.DOM.Field", DataField: "OrderYear", Name: "OrderYear", TypeName: "System.Int32", Value: null },
          { __type: "BoldReports.RDL.DOM.Field", DataField: "OrderQtr", Name: "OrderQtr", TypeName: "System.String", Value: null},
          { __type: "BoldReports.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: "BoldReports.RDL.DOM.SharedDataSet",
              QueryParameters: [],
              SharedDataSetReference: 'Sales'
      },
      InterpretSubtotalsAsDetails:0,
      DataSetInfo:null,
      DataSetObject:null
      };
  
      designerObj.addDataSet(dataset);
  </script>

addDataSource

Add a datasource to the report at runtime.

Example

• Add embedded datasource to the report

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var datasource =
      {
      __type:'BoldReports.RDL.DOM.DataSource',
      Name:'DataSource1',
      Transaction:false,
      DataSourceReference:null,
      SecurityType:'DataBase',
      ConnectionProperties:{
              __type:'BoldReports.RDL.DOM.ConnectionProperties',
              ConnectString:'Data Source=<instancename>;Initial Catalog=<database>;',
              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

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var datasource =
      {
      __type:'BoldReports.RDL.DOM.DataSource',
      Name:'DataSource1',
      Transaction:false,
      DataSourceReference: '<database>',
      SecurityType:'None',
      ConnectionProperties:null
      };
  
      designerObj.addDataSource(datasource);
  </script>

addItem

Add a report item to the report at runtime.

Examples

• Add a report item to report body

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var item =  {
          left: 300, top: 100, itemType: 'Tablix',
          designArea: ej.ReportDesigner.DesignArea.Body,
          parentName : null,
          rowIndex: -1, colIndex: -1
      };
      designerObj.addItem(item);
  </script>

• Add a report item to report header

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var item =  {
          left: 100, top: 30, itemType: 'Image',
          designArea: ej.ReportDesigner.DesignArea.Header,
          parentName : null,
          rowIndex: -1, colIndex: -1
      };
      designerObj.addItem(item);
  </script>

• Add a report item to report footer

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var item =  {
          left: 50, top: 50, itemType: 'TextBox',
          designArea: ej.ReportDesigner.DesignArea.Footer,
          parentName : null,
          rowIndex: -1, colIndex: -1
      };
      designerObj.addItem(item);
  </script>

• Add a report item into a tablix cell

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      //Add tablix item
      var item =  {
          left: 50, top: 50, itemType: 'Tablix',
          designArea: ej.ReportDesigner.DesignArea.Body,
          parentName:null,
          rowIndex: -1, colIndex: -1
      };
      designerObj.addItem(item);
      //Add image report item into tablix cell
      var item =  {
          left: 50, top: 50, itemType: 'Image',
          designArea: ej.ReportDesigner.DesignArea.Body,
          parentName: 'Tablix1',
          rowIndex: 1, colIndex: 0
      };
      designerObj.addItem(item);
  </script>

• Add a report item into a rectangle report item

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      //Add rectangle item
      var item =  {
          left: 50, top: 50, itemType: 'Rectangle',
          designArea: ej.ReportDesigner.DesignArea.Body,
          parentName:null,
          rowIndex: -1, colIndex: -1
      };
      designerObj.addItem(item);
      //Add image report item into rectangle item
      var item =  {
          left: 10, top: 20, itemType: 'Image',
          designArea: ej.ReportDesigner.DesignArea.Body,
          parentName: 'Rectangle1',
          rowIndex: -1, colIndex: -1
      };
      designerObj.addItem(item);
  </script>

• Add a chart report item to report at runtime

  By default, Column chart type will be added to the report.

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var item =  {
          left: 50, top: 50, itemType: 'Chart',
          designArea: ej.ReportDesigner.DesignArea.Body,
          parentName : null,
          rowIndex: -1, colIndex: -1
      };
      designerObj.addItem(item);
  </script>

• Add a Pie chart report item to report at runtime

  To add specific chart type to the report, follow the syntax : Chart-[chart-type]. Refer Chart Types sections for details about supported chart types.

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var item =  {
          left: 50, top: 50, itemType: 'Chart-Pie',
          designArea: ej.ReportDesigner.DesignArea.Body,
          parentName : null,
          rowIndex: -1, colIndex: -1
      };
      designerObj.addItem(item);
  </script>

• Add a custom report item to report at runtime

  To add specific custom report item type to the report, follow the syntax : Custom-[custom-report-item-name]. Refer reportItemExtensions property to render custom report item in Report Designer.

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var item =  {
          left: 50, top: 50, itemType: 'Custom-Barcode',
          designArea: ej.ReportDesigner.DesignArea.Body,
          parentName : null,
          rowIndex: -1, colIndex: -1
      };
      designerObj.addItem(item);
  </script>

addParameter

Add a parameter to the report at runtime.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    var parameter =
    {
        __type: 'BoldReports.RDL.DOM.ReportParameter',
        Name: 'ReportParameter1',
        Prompt: 'ReportParameter1',
        DataType: 3,
        Hidden: true,
        AllowBlank: false,
        Nullable: false,
        MultiValue: false,
        ValidValues: {
            __type: 'BoldReports.RDL.DOM.ValidValues',
            ParameterValues: [
            {
                __type: 'BoldReports.RDL.DOM.ParameterValue',
                Label: 'System.Double',
                Value: 'report'
            }
            ],
            DataSetReference: null
        },
        DefaultValue: null
    };
    designerObj.addParameter(parameter);
</script>

bringForward

Visually move the selected report item over its closest intersected report items.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.bringForward();
</script>

bringToFront

Visually move the selected report item over all other intersected report items.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.bringToFront();
</script>

canCopy

Determines whether a copy operation is possible.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.canCopy();
</script>

canCut

Determines whether a cut operation is possible.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.canCut();
</script>

canPaste

Determines whether a paste operation is possible.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.canPaste();
</script>

canRedo

Returns the boolean value indicating whether the user can redo the previous action in the report.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.canRedo();
</script>

canRemove

Determines whether a delete operation is possible.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.canRemove();
</script>

canUndo

Returns a boolean value indicating whether the user can undo the previous action in the report.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.canUndo();
</script>

cloneDataSet

Clone the existing dataset in the report at runtime.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.cloneDataSet('DataSet1');
</script>

cloneDataSource

Clone the existing datasource in the report at runtime.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.cloneDataSource('DataSource1');
</script>

copy

Copies the selected report item from design panel to the Report Designer internal clipboard.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.copy();
</script>

cut

Cuts the selected report item from design panel to the Report Designer internal clipboard.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.cut();
</script>

destroy

Destroy the client and server side report designer processing objects.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.destroy();
</script>

getDataSets

Get the list of datasets from the report.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.getDataSets(); // Returns the datasets as an array of objects
</script>

getDataSources

Get the list of datasources from the report.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.getDataSources(); // Returns the datasources as an array of objects
</script>

getParameters

Get the list of parameters from the report.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.getParameters(); // Returns the parameters as an array of objects
</script>

hasReportChanges

Returns the boolean value that specifies whether the report has changes or not.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.hasReportChanges();
</script>

isNewReport

Returns the boolean value that specifies whether the currently processing report is a new report or not.

Returns boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    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

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    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

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.isServerReport();
</script>

newReport

To create a new report.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.newReport();
</script>

newServerReport

To create a new report in the report server.

Example

<div id="container"></div>
<script>
   // Create Report Designer Instance
   $("#container").boldReportDesigner();
   var designerObj = $("#container").data("boldReportDesigner");
   designerObj.newServerReport('Test1', 'ab018ae7-f747-49a1-9e26-759e35c0a0db');
</script>

openReport

This method opens the report from the report server.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.openReport();
</script>

openReportDefinition

This method opens the report using raw report data.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    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

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.openReportFromDevice();
</script>

openServerReportDialog

Opens the report designer browse dialog to browse the available reports in the report server.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.openServerReportDialog();
</script>

paste

Pastes the selected report item from the Report Designer internal clipboard to design panel.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.paste();
</script>

redo

Reverses the action of the last Undo command.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.redo();
</script>

remove

Deletes the selected report item from the report.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.remove();
</script>

removeDataSet

Remove a dataset from the report at runtime.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.removeDataSet('DataSet1');
</script>

removeDatasource

Remove a datasource from the report at runtime.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.removeDatasource('DataSource1');
</script>

removeItem

Remove the given report item from the report.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.removeItem('Tablix1');
</script>

removeParameter

Remove a parameter from the report at runtime.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.removeParameter('ReportParameter1');
</script>

saveReport

This method saves the report into the report server.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.saveReport();
</script>

saveReportDefinition

This method returns the report in JSON or XML format.

Example

• To save the report in JSON format.

  <div id="container"></div>
  <script>
      // Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      designerObj.saveReportDefinition((args) => {}, ej.ReportDesigner.DataFormat.JSON);
  </script>

• To save the report in XML format.

  <div id="container"></div>
  <script>
      // Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      designerObj.saveReportDefinition((args) => {}, ej.ReportDesigner.DataFormat.XML);
  </script>

saveServerReportDialog

Opens the report designer browse dialog to save the report into report server.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.saveServerReportDialog();
</script>

saveToDevice

To download the designed report.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.saveToDevice();
</script>

selectItems

Update the selection to report item at runtime.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    var itemNames = ['Tablix1','Chart1','Rectangle2']
    designerObj.selectItems(itemNames);
</script>

sendBackward

Visually move the selected report item behind its closest intersected report item.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.sendBackward();
</script>

sendToBack

Visually move the selected report item behind all other intersected report items.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.sendToBack();
</script>

showDesign

Performs switch action from viewer to designer at runtime.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.showDesign();
</script>

showNewReportDialog

Opens the new report dialog.

Example

<div id="container"></div>
<script>
   // Create Report Designer Instance
   $("#container").boldReportDesigner();
   var designerObj = $("#container").data("boldReportDesigner");
   designerObj.showNewReportDialog((args) => {
   });
</script>

showOpenSaveReportDialog

Opens the report designer browse dialog to open/save reports in the report server.

Example

• To launch open report dialog

  <div id="container"></div>
  <script>
  // Create Report Designer Instance
  $("#container").boldReportDesigner();
  var designerObj = $("#container").data("boldReportDesigner");
  var browseType = ej.ReportDesigner.BrowseType.Open;
  designerObj.showOpenSaveReportDialog(browseType, (args) => {
  });
  </script>

  • Handle the browse dialog close action.

    To handle the browse dialog close action, callBackInfo argument needs to be handled in the code snippet as explained in below scenario’s.

    Use the below code snippet, if you are intend to use the openReport method of report designer for report open action.

    <div id="container"></div>
    <script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    var browseType = ej.ReportDesigner.BrowseType.Open;
    designerObj.showOpenSaveReportDialog(browseType, (args) => {
        if(args) {
            designerObj.openReport(args.category + '/' + args.name, null, args.callBackInfo);
        }
    });
    </script>

    Use the below code snippet, if you are intend to use your own custom implementation. Handle the browse dialog close action after completion of report open action to the server.

    <div id="container"></div>
    <script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    var browseType = ej.ReportDesigner.BrowseType.Open;
    designerObj.showOpenSaveReportDialog(browseType, (args) => {
        //invoke your own custom method
        handleOpenAction(args);
    });
    
    function handleOpenAction(args) {
        if(args && args.callBackInfo && args.callBackInfo.closeDialog) {
            args.callBackInfo.closeDialog();
        }
    };
    </script>

• To launch save report dialog

  <div id="container"></div>
  <script>
  // Create Report Designer Instance
  $("#container").boldReportDesigner();
  var designerObj = $("#container").data("boldReportDesigner");
  var browseType = ej.ReportDesigner.BrowseType.Save;
  designerObj.showOpenSaveReportDialog(browseType, (args) => {
  });
  </script>

  • Handle the browse dialog close action.

    To handle the browse dialog close action, callBackInfo argument needs to be handled in the code snippet as explained in below scenario’s.

    Use the below code snippet, if you are intend to use the saveReport method of report designer for report save action.

    <div id="container"></div>
    <script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    var browseType = ej.ReportDesigner.BrowseType.Save;
    designerObj.showOpenSaveReportDialog(browseType, (args) => {
        if(args) {
            designerObj.saveReport(args.category + '/' + args.name, args.isExist, args.callBackInfo);
        }
    });
    </script>

    Use the below code snippet, if you are intend to use your own custom implementation. Handle the browse dialog close action after completion of report save action to the server.

    <div id="container"></div>
    <script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    var browseType = ej.ReportDesigner.BrowseType.Save;
    designerObj.showOpenSaveReportDialog(browseType, (args) => {
        //invoke your own custom method
        handleSaveAction(args);
    });
    
    function handleSaveAction(args) {
        if(args && args.callBackInfo && args.callBackInfo.closeDialog) {
            args.callBackInfo.closeDialog();
        }
    };
    </script>

showPreview

Performs switch action from designer to viewer at runtime.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.showPreview();
</script>

undo

Reverses the last action that was performed.

Example

<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    designerObj.undo();
</script>

updateDataset

Updates the existing dataset in the report at runtime.

Example

• Update embedded dataset

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var dataset = {
      __type:'BoldReports.RDL.DOM.DataSet',
      Name:'DataSet2',
      Fields:[
          { __type: "BoldReports.RDL.DOM.Field", DataField: "DepartmentID", Name: "DepartmentID", TypeName: "System.Int16",Value: null},
          { __type: "BoldReports.RDL.DOM.Field", DataField: "Name", Name: "Name", TypeName: "System.String",Value: null},
          { __type: "BoldReports.RDL.DOM.Field", DataField: "GroupName", Name: "GroupName", TypeName: "System.String",Value: null },
          { __type: "BoldReports.RDL.DOM.Field", DataField: "ModifiedDate", Name: "ModifiedDate", TypeName: "System.DateTime",Value: null}
          ],
      Query: {
          __type: "BoldReports.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: "BoldReports.RDL.DOM.QueryDesignerState",
              Expressions: null,
              Filters: null,
              Joins: null,
              StoredProcedure: null,
              Tables: [
                  {
                  __type: "BoldReports.RDL.DOM.Table",
                  Columns: [
                      { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null,IsDuplicate: false,
                      IsSelected: true, Name: "DepartmentID"
                      },
                      { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null,IsDuplicate: false,
                      IsSelected: true, Name: "Name"
                      },
                      { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null,IsDuplicate: false,
                      IsSelected: true, Name: "GroupName"
                      },
                      { __type: "BoldReports.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

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
  
      var dataset =
      {
      __type:'BoldReports.RDL.DOM.DataSet',
      Name:'DataSet2',
      Fields:[
          { __type: "BoldReports.RDL.DOM.Field", DataField: "ProdCat", Name: "ProdCat", TypeName: "System.String", Value: null},
          { __type: "BoldReports.RDL.DOM.Field", DataField: "SubCat", Name: "SubCat", TypeName: "System.String", Value: null},
          { __type: "BoldReports.RDL.DOM.Field", DataField: "OrderYear", Name: "OrderYear", TypeName: "System.Int32", Value: null },
          { __type: "BoldReports.RDL.DOM.Field", DataField: "OrderQtr", Name: "OrderQtr", TypeName: "System.String", Value: null},
          { __type: "BoldReports.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: "BoldReports.RDL.DOM.SharedDataSet",
              QueryParameters: [],
              SharedDataSetReference: 'Sales'
      },
      InterpretSubtotalsAsDetails:0,
      DataSetInfo:null,
      DataSetObject:null
      };
  
      designerObj.updateDataset('DataSet1',dataset);
  </script>

updateDatasource

Updates the existing datasource in the report at runtime.

Example

• Update embedded datasource

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var datasource = {
      __type:'BoldReports.RDL.DOM.DataSource',
      Name:'DataSource2',
      Transaction:false,
      DataSourceReference:null,
      SecurityType:'DataBase',
      ConnectionProperties:{
              __type:'BoldReports.RDL.DOM.ConnectionProperties',
              ConnectString:'Data Source=<instancename>;Initial Catalog=<database>;',
              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

  <div id="container"></div>
  <script>
      //Create Report Designer Instance
      $("#container").boldReportDesigner();
      var designerObj = $("#container").data("boldReportDesigner");
      var datasource =
      {
      __type:'BoldReports.RDL.DOM.DataSource',
      Name:'DataSource2',
      Transaction:false,
      DataSourceReference: '<database>',
      SecurityType:'None',
      ConnectionProperties:null
      };
  
      designerObj.updateDatasource('DataSource1',datasource);
  </script>

updateParameter

Updates the existing parameter in the report at runtime.

Example

<div id="container"></div>
<script>
    // Create Report Designer Instance
    $("#container").boldReportDesigner();
    var designerObj = $("#container").data("boldReportDesigner");
    var parameter =
    {
        __type: 'BoldReports.RDL.DOM.ReportParameter',
        Name: 'ReportParameter2',
        Prompt: 'ReportParameter2',
        DataType: 0,
        Hidden: true,
        AllowBlank: false,
        Nullable: false,
        MultiValue: false,
        ValidValues: {
            __type: 'BoldReports.RDL.DOM.ValidValues',
            ParameterValues: [
            {
                __type: 'BoldReports.RDL.DOM.ParameterValue',
                Label: 'System.Double',
                Value: 'report'
            }
            ],
            DataSetReference: null
        },
        DefaultValue: null
    };
    designerObj.updateParameter('ReportParameter1',parameter);
</script>