Search results

Methods

addDataSet

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

Add a datasource to the report at runtime.

Name Type Description
datasource object a JSON to define a connection properties for datasource

Example

  • Add embedded datasource to the report
<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
<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>

addReportItem

Add a report item to the report at runtime.

Name Type Description
item object JSON for the new report item to be added.
Name Type Description
left number Set the left position value to the report item.
top number Set the top position value to the report item.
itemType string Set the type of the report item.
Input Text
TextBox
Image
Line
Rectangle
Chart
Table
List
Grid
PivotGrid
SubReport
Custom
designArea enum Set the target to render report item.
parentName string Set the name of the parent item.
rowIndex number Set the index of the row in table/list report item.
colIndex number Set the index of the column in table/list report item.

Examples

  • Add a report item to report body
<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").ejReportDesigner();
    var designerObj = $("#container").data("ejReportDesigner");
    var item =  {
        left: 300, top: 100, itemType: 'Tablix',
        designArea: ej.ReportDesigner.DesignArea.Body,
        parentName : null,
        rowIndex: -1, colIndex: -1
    };
    designerObj.addReportItem(item);
</script>
  • Add a report item to report header
<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").ejReportDesigner();
    var designerObj = $("#container").data("ejReportDesigner");
    var item =  {
        left: 100, top: 30, itemType: 'Image',
        designArea: ej.ReportDesigner.DesignArea.Header,
        parentName : null,
        rowIndex: -1, colIndex: -1
    };
    designerObj.addReportItem(item);
</script>
  • Add a report item to report footer
<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").ejReportDesigner();
    var designerObj = $("#container").data("ejReportDesigner");
    var item =  {
        left: 50, top: 50, itemType: 'TextBox',
        designArea: ej.ReportDesigner.DesignArea.Footer,
        parentName : null,
        rowIndex: -1, colIndex: -1
    };
    designerObj.addReportItem(item);
</script>
  • Add a report item into a tablix cell
<div id="container"></div>
<script>
    //Create Report Designer Instance
    $("#container").ejReportDesigner();
    var designerObj = $("#container").data("ejReportDesigner");
    //Add tablix item
    var item =  {
        left: 50, top: 50, itemType: 'Tablix',
        designArea: ej.ReportDesigner.DesignArea.Body,
        parentName:null,
        rowIndex: -1, colIndex: -1
    };
    designerObj.addReportItem(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.addReportItem(item);
</script>
  • Add a report item into a rectangle report item
<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',
        designArea: ej.ReportDesigner.DesignArea.Body,
        parentName:null,
        rowIndex: -1, colIndex: -1
    };
    designerObj.addReportItem(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.addReportItem(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").ejReportDesigner();
    var designerObj = $("#container").data("ejReportDesigner");
    var item =  {
        left: 50, top: 50, itemType: 'Chart',
        designArea: ej.ReportDesigner.DesignArea.Body,
        parentName : null,
        rowIndex: -1, colIndex: -1
    };
    designerObj.addReportItem(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").ejReportDesigner();
    var designerObj = $("#container").data("ejReportDesigner");
    var item =  {
        left: 50, top: 50, itemType: 'Chart-Pie',
        designArea: ej.ReportDesigner.DesignArea.Body,
        parentName : null,
        rowIndex: -1, colIndex: -1
    };
    designerObj.addReportItem(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 of the Report Designer.

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

canCopy

Determines whether a copy operation is possible.

Returns

  • boolean

Example

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

canCut

Determines whether a cut operation is possible.

Returns

  • boolean

Example

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

canPaste

Determines whether a paste operation is possible.

Returns

  • boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer 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

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

canRemove

Determines whether a delete operation is possible.

Returns

  • boolean

Example

<div id="container"></div>
<script>
    // Create Report Designer 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

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

cloneDataSet

Clone the existing dataset in the report at runtime.

Name Type Description
name string Name of the existing dataset in report

Example

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

cloneDataSource

Clone the existing datasource in the report at runtime.

Name Type Description
name string Name of the existing datasource in report

Example

<div id="container"></div>
<script>
    //Create Report Designer 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

<div id="container"></div>
<script>
    // Create Report Designer 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

<div id="container"></div>
<script>
    // Create Report Designer 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

<div id="container"></div>
<script>
    // Create Report Designer 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

<div id="container"></div>
<script>
    // Create Report Designer 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

<div id="container"></div>
<script>
    // Create Report Designer 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

<div id="container"></div>
<script>
    // Create Report Designer 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

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

newServerReport

To create a new report in the report server.

Name Type Description
name string(optional) Name of the new report
dataSetPath string(optional) Name of the shared dataset

Example

<div id="container"></div>
<script>
   // Create Report Designer 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 report server.

Name Type Description
reportPath string(optional) Path of the report server report
serverUrl string(optional) Reports server URL

Example

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

openReportFromDevice

Opens the client browse dialog to browse the report.

Example

<div id="container"></div>
<script>
    // Create Report Designer 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 report server.

Example

<div id="container"></div>
<script>
    // Create Report Designer 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

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

redo

Reverses the action of the last Undo command.

Example

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

remove

Deletes the selected report item from the report.

Example

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

removeDataSet

Remove a dataset from the report at runtime.

Name Type Description
dataset string Name of the dataset

Example

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

removeDatasource

Remove a datasource from the report at runtime.

Name Type Description
datasource string Name of the datasource

Example

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

removeReportItem

Remove the given report item from the report.

Name Type Description
itemName string Name of the report item to be removed from the report

Example

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

saveReport

This method saves the report into the report server.

Name Type Description
reportPath string(optional) Path of the report server report

Example

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

saveToDevice

To download the designed report.

Example

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

selectReportItem

Update the selection to report item at runtime.

Name Type Description
itemName string Name of the report item

Example

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

showDesign

Performs switch action from viewer to designer at runtime.

Example

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

showNewReportDialog

Opens the new report dialog.

Name Type Description
callback function Callback method of new report dialog actions

Example

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

showOpenSaveReportDialog

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

Name Type Description
browseType enum(Open/Save) Open/Save the dialog type
callback function Callback method of open/save dialog actions
reportName string Name of the report to save

Example

<div id="container"></div>
<script>
   // Create Report Designer 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

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

undo

Reverses the last action that was performed.

Example

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

updateDataset

Updates the existing 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
<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: "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
<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

Updates the existing 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

  • Update embedded datasource
<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: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
<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>