# Data Binding ## Content Data binding creates a connection between the data source and the UI component, ensuring that updates in the data source are automatically reflected in the UI component, and vice versa. FlexReport supports binding to various data sources to display records. For details on the supported datasources, see [DataSources](/componentone/docs/reporting/online-flexreport/datasources). The following sections explore how to retrieve data from database and other sources. ## Retrieve Data from Database A FlexReport definition can include multiple data sources, all accessible through **DataSources** collection both in .NET and .NET Framework. Each data source in the collection is uniquely identified by its name. These data sources serve as the primary data source, which is referred as the **Main** data source for a report. The main data source is specified by using **DataSourceName** property in the report. If the main data source is not specified (DataSourceName is empty or contains a name not found in the DataSources collection), the FlexReport is rendered in unbound mode, containing a single instance of the Detail section. Follow the steps in below section to access and display data using the OLEDB datasource in .NET and .NET Framework Editions. 1. Create a new report definition in **FlexReportDesigner** application using **FlexReport Wizard** as done in the Report Creation section. For example, we use the C1Nwind.mdb database and Employees table for displaying records. > type=note > **Note**: You can find the **C1Nwind.mdb** database in Documents\\ComponentOne Samples\\WinForms\\vx.0\\FlexReport\\CS\\FlexReportExplorer\\Data folder. 2. Create a new **Windows Forms App (For WinForms)** or **WPF Application (For WPF)** in Visual Studio. 3. Add the **FlexViewer** control to the form. Set the Name of **FlexViewer** control as **c1FlexViewer1**. 4. Add the below code to load the report to FlexReport control and bind it with the FlexViewer control. ```csharp c1FlexReport1.Load(@"..\..\..\employeereport.flxr", "Employees_Report"); DataSource ds1 = new DataSource(); ds1.Name = c1FlexReport1.DataSourceName; ds1.DataProvider = DataProvider.OLEDB; ds1.ConnectionString = @"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=..\..\..\C1NWind.mdb;Persist Security Info=False"; ds1.RecordSource = "Employees"; ds1.RecordSourceType = RecordSourceType.TableDirect; c1FlexReport1.DataSources.Add(ds1); c1FlexViewer1.DocumentSource = c1FlexReport1; ``` 5. Run the application and observe the output. ## DataTable object as DataSource Many applications require processing data outside of **C1FlexReport** before loading it into DataTable objects. In these scenarios, DataTable objects can serve as report data sources, eliminating the need for reloading during report rendering. This approach is also useful in applications where: * Security restrictions dictate that connection strings must be kept private, and only the data itself may be exposed (not its source). * The database is not supported by OleDb, the provider used internally by C1FlexReport. * The data does not come from a database at all. Instead, the DataTable is created and populated using custom code. Perform the following steps to load and render data from a data table: 1. Create a new report definition in **FlexReportDesigner** application using FlexReport Wizard as done in the **Report Creation** section. 2. Create a new **Windows Forms App (For WinForms)** or **WPF Application (For WPF)** in Visual Studio. 3. Add the **C1FlexViewer** control in the design window. Set the Name of **C1FlexViewer** control as **flexdataViewer**. 4. Create the following data table with the name GetMyDataTable, as shown in the following code snippet. ```csharp public DataTable GetMyDataTable() { DataTable result = new DataTable(); result.Columns.Add("PiD", typeof(string)); result.Columns.Add("Name", typeof(string)); result.Columns.Add("Supplier", typeof(string)); result.Columns.Add("UnitPrice", typeof(string)); result.Columns.Add("Discontinued", typeof(string)); result.Rows.Add("P001", "Chai", "Bigfoot Breweries", "S100", "False"); result.Rows.Add("P002", "Chang", "Leka Trading", "S200", "True"); result.Rows.Add("P003", "Aniseed", "Karkki Oy", "S130", "False"); result.Rows.Add("P004", "Syrup", "Ma Maison", "S150", "True"); result.Rows.Add("P005", "Konbu", "Tokyo Traders", "S100", "False"); result.Rows.Add("P001", "Chai", "Leka Trading", "S100", "True"); result.Rows.Add("P011", "Chang", "Leka Trading", "S200", "True"); result.Rows.Add("P012", "Aniseed", "Karkki Oy", "S130", "False"); result.Rows.Add("P013", "Syrup", "Ma Maison", "S150", "True"); result.Rows.Add("P014", "Konbu", "Tokyo Traders", "S100", "False"); result.Rows.Add("P015", "Konbu", "Tokyo Traders", "S100", "False"); return result; } ``` 5. Add the following code to load and render the report. To use a DataTable object as a C1FlexReport data source, simply load the report definition and then assign the DataTable to C1FlexReport.DataSource.Recordset property. ```csharp rep.Load(@"..\..\..\productreportqs.flxr", "ProductDataBinding"); DataTable dt = GetMyDataTable(); rep.DataSource.Recordset = dt; flexdataViewer.DocumentSource = rep; ``` 6. Run the application and observe the output. ## Retrieve Data from a Stored Procedure Stored procedures facilitate a consistent implementation of logic across applications, enhance performance, and abstract the underlying database table details from users. One key advantage of stored procedures is their ability to accept parameters, enabling the database to filter the recordset. This results in a smaller, more manageable data set that is faster and easier for the report to process. You can populate a report from a stored procedure in the **C1FlexReport Wizard**. To open the **C1FlexReport Wizard**, click the **New Report** button from the **Reports** tab the **C1FlexReportDesigner** application. Complete the following steps: 1. In the **C1FlexReportDesigner** application, click the **New Report** button from the **Reports** tab 2. Populating a report from a stored procedure is no different than using SQL statements or straight tables. In the **C1FlexReport Wizard**, click the **ellipses** button to choose a data source. Then choose a **Stored Procedure** from the list of available Data sources. 3. Select **Next** and continue through the wizard. 4. Save the report with the name productsreporqs.flxr. 5. Add the following code to load and render the report using stored procedure: ```csharp flexReport.Load(@"..\..\..\productspreport.flxr", "ProductReportSP"); DataSource ds1 = new DataSource(); ds1.Name = "Mainsp"; ds1.DataProvider = DataProvider.OLEDB; ds1.ConnectionString = @"Provider=Microsoft.ACE.OLEDB.12.0;..\..\..\C1NWind.mdb;Persist Security Info=False"; ds1.RecordSource = "[Products by Category]"; ds1.RecordSourceType = RecordSourceType.StoredProcedure; flexReport.DataSources.Add(ds1); flexViewer.DocumentSource = flexReport; ``` > type=note > In this case the stored procedure name has spaces, so it's enclosed in square brackets. ## Retrieve Data Using SQL Query You can interact with a relational database using SQL statements instead of stored procedures. SQL statements are useful for simple operations where the overhead of invoking a stored procedure is unnecessary. They can be used to query data, insert or update records, delete data, create or modify database objects (such as tables and views), and manage database permissions. Commonly used SQL statements for accessing and modifying data include SELECT, INSERT, DELETE, and UPDATE. Perform the following steps to load and render data from a database using the SQL statement: 1. Create a new report definition in **FlexReportDesigner** application using **FlexReport Wizard** as done in the **Report Creation** section. 2. Create a new **Windows Forms App (For WinForms)** or **WPF Application (For WPF)** in Visual Studio. 3. Add the **C1FlexViewer** control to the design view. Set the Name of **C1FlexViewer** control as **flexViewer**. 4. Add the following code to load the report using SQL query: ```csharp ds1.ConnectionString = @"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=..\..\..\C1NWind.mdb;Persist Security Info=False"; ds1.RecordSource = "SELECT DISTINCT Products.ProductID, Products.ProductName,Categories.CategoryName,Products.UnitPrice FROM (Categories INNER JOIN Products ON Categories.CategoryID = Products.CategoryID)"; ds1.RecordSourceType = RecordSourceType.Text; ``` > type=note > Note that these data binding methods are supported only in WinForms and WPF.