How to Connect JSON Data to a WinForms Datagrid in Visual Studio 2022

ComponentOne has recently introduced the JSON DataConnector. It enables quick connections to JSON data using ADO.NET or Entity Framework Core. You can connect to JSON web services through Visual Studio Server Explorer, view JSON tables, and create queries using SQL or query builder. You can bind controls without writing a single line of code by just dragging and dropping the JSON tables onto the dataset designer. 

In this blog, we will see how we can connect to a JSON web service through Visual Studio Server Explorer and then bind a FlexGrid to the data from the web service with no code. 

Ready to Test it Out? Download ComponentOne Today!

Connecting with the JSON Data Source

 The first step is to create a connection with the JSON data source using Visual Studio’s Server Explorer Window. Assuming you have already installed the ComponentOne Data Services and have Visual Studio open, the steps are as follows: 

• Open the “Server Explorer” Window by navigating to VIEW -> Server Explorer
• Click the “Connect to Database” button in Server Explorer
• The “Change Data Source” Window will open
• Choose “C1 JSON Data Source” as the data source
• The data provider will show “C1 ADO.NET provider for JSON” as the Data Provider
• Click OK
• The “Add Connection” window will open
• Set the connection properties like URI, Document Model, JsonPath, and others per your use case.  For more information on JSON Data Connection properties, you can refer to the C1JsonDataConnector Documentation
• Click OK
• Server Explorer will show the new Data Connection “C1 JSON”.
• Right-Click on a Table and choose “Retrieve Data” to see the records 

Creating DataSet from the JSON Data Source

Now that we have a data connection with our Json Data source. We will create a DataSet that we can then bind with the FlexGrid. The steps are as follows:

• Add a new DataSet item to the project
• Open the DataSet Designer
• Drag and drop the table from the “C1 Json” data connection to the dataset
• A DataTable with a DataAdapter will be added to the dataset
• Configure the DataTable to remove any column you do not want

Our DataSet is now ready with our DataTable.

Binding Data to FlexGrid

Now that we have our dataset ready, we will bind it to the FlexGrid. Assuming you have already created a Form with a FlexGrid, you can follow the steps given below:

• In the properties window, Navigate to the DataSource property of the FlexGrid
• Open the DropDown by pressing the button shown in front of the DataSource Property
• In the dropdown, Expand the “Other Data Sources” node
• Then Expand the “Project Data Sources” node
• Choose the DataSet that was just created
• The designer will create an instance of the DataSet and a BindingSource and assign it to the FlexGrid
• Set the DataMember property of the Binding Source to the name of the Table
• Since 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 image below

The final grid will look like the image below when you run the application.

Download the latest ComponentOne today, and you can see for yourself how easy it is to bind a Data grid with data from a JSON data source using the C1JsonDataConnector’s visual studio integration.

Ready to Test it Out? Download ComponentOne Today!