How to add the data source and dataset for Report Designer from the application
To add a data source and dataset to the Bold Reports® JavaScript Report Designer from your application, call the addDataSource and addDataSet functions when the Report Designer initializes. The functions add the data source and dataset for the reports at the time of initialization of the Report Designer.
Use the following steps to add the data source and dataset for the Report Designer from your application.
-
Create a function and bind it with the
createAPI as shown in the following code snippet:$(function () { $("#designer").boldReportDesigner({ serviceUrl: "/api/ReportingAPI", create: "controlInitialized" }); }); function controlInitialized(){ ... } -
Use the
addDatasourcemethod to add the data source in the Report Designer as shown in the following code snippet:<script> 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:[] } }; function controlInitialized(){ var designerObj = $("#designer").data("boldReportDesigner"); designerObj.addDataSource(datasource); } </script> -
Use the
addDataSetmethod to add the dataset in the Report Designer as shown in the following code snippet:<script> 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 }; function controlInitialized(){ var designerObj = $("#designer").data("boldReportDesigner"); designerObj.addDataSet(dataset); } </script>