How to Load CSV Data in a .NET Datagrid Using Visual Studio 2022

We introduced the CSV DataConnector Data Service API with the 2022v3 version of ComponentOne, which supports CRUD operations over CSV files using ADO.NET or Entity Framework Core. We can connect to CSV data via Visual Studio Server Explorer and create queries using SQL or the query builder to retrieve the required data.

This blog will demonstrate how to connect to CSV data and display it on the form without writing a single line of code, using only the designer. We will cover:

1. Creating a New Windows Form App Project
2. Connecting with the CSV Data Source
3. Creating DataSet from the CSV Data Source
4. Binding Data to FlexGrid

Ready to Test it Out? Download ComponentOne Today!

Create a New Windows Form App Project

To display the CSV table data, we are using our flagship grid control, "FlexGrid." Therefore, in Visual Studio 2022, create a new Windows Form App project and drag the FlexGrid component from the toolbox into the Form Designer.

Connecting with the CSV Data Source

In the next step, we will create a connection with the CSV data source using Visual Studio’s Server Explorer Window. To see all the C1DataConnectors service components in the Server Explorer window, first, we need to install the latest version of Data Service using the ComponentOneControlPanel, as suggested here.
The following steps are required to establish a connection with CSV data: 

1. Open the “Server Explorer” Window by navigating to VIEW -> Server Explorer in the Visual Studio.
2. Click the “Connect to Database” option in Server Explorer.
3. The “Add Connection” Window will open.
4. Click on the Change button next to the Data Source option, which will open the “Change Data Source” window.
5. Choose “C1 CSV Data Source” as the data source and click OK, which will open the “Add Connection” window.
6. Set the location of the CSV file to the Uri property.
7. Click the “Test Connection” button to verify if everything works fine in building the connection with the CSV data.
8. If everything goes well, click OK.
9. Server Explorer will show the new Data Connection “C1 CSV”.
10. Expand the items in the Data Connections to navigate to the CSV table and choose the “Retrieve Data” option to see all the records.

Creating DataSet from the CSV Data Source

Now that we have established a successful connection with our CSV Data Source, we will create a DataSet using the connected CSV Data Source and bind it to our FlexGrid. The steps are as follows:

1. Add a new DataSet item to the project.
2. Open the DataSet designer.
3. Drag and drop the table from the “C1 CSV” data connection to the DataSet designer.
4. A data table with a DataAdapter will be added to the dataset.
5. We can also configure the data table to remove any column we do not want to show.

Binding Data to FlexGrid

Since we now have our dataset ready with the data table, the final step is to bind it to the FlexGrid by following the steps below:

1. Using the smart button on the FlexGrid designer, navigate to the Choose Data Source option.
2. Open the dropdown by pressing the button in front of the Choose Data Source option.
3. In the dropdown, Expand the “Other Data Sources” node.
4. Then expand the “Project Data Sources” node.
5. Choose the dataset that was just created.
6. The designer will create an instance of the dataset and a BindingSource and assign it to FlexGrid.
7. Set the DataMember property of the Binding Source to the name of the Table. Since the FlexGrid is already bound to the BindingSource, as soon as you set the DataMember, FlexGrid will show the columns from the data table, as shown in the GIF below.

When we launch the application, the resulting grid will look as shown in the GIF below.

Download the latest version of ComponentOne today and try the above-given steps to bind a data grid with data from a CSV data source using the C1CSV Data Connector’s Visual Studio integration.

Contact our support team on the Support portal if you face any issues while using any of the C1 controls and components. 

Happy Coding!