windowsforms-401013-common-features-data-binding-bind-to-json-data.md
JSON (JavaScript Object Notation) is an open-standard file format that stores data in a human-readable text format. For that reason, JSON data can be easily transmitted to and from servers, and used by any programming language.
Important
The JsonDataSource wizard is not available for .NET projects. Please set up the JsonDataSource in code.
How to Bind to JSON Data in Code
This walkthrough explains how to configure a JSON data connection for data-aware controls that support the Data Source Configuration Wizard. If you need to bind any other control, manually add the DevExpress.DataAccess.Json.JsonDataSource component from the Visual Studio Toolbox, and follow steps 3 to 5 of this tutorial. Note that in this case, you will also need to manually install the System.Text.Json NuGet package (“Project | Manage NuGet Packages…”) for .NET Framework platforms.
Note
DevExpress.DataAccess.Json.JsonDataSource is a read-only data source.
Invoke the Data Source Configuration Wizard for the data-aware control you need to bind.
Choose the “JSON Data Source” option and click “New Data Source…”. This will automatically add a new DevExpress.DataAccess.Json.JsonDataSource component to the form and invoke its Data Source Editor dialog.
In the Data Source Editor dialog, select the required JSON data source type:
You can supply a real data source or use a test data set available online (for example, on GitHub).
If you have selected the Web Service Endpoint (URI) option, enter login credentials and optional HTTP Headers/Query Parameters.
A JSON data source may have multiple data sets, all owned by the topmost “root” element. The “Select Root Element” page allows you to choose the data sets to which you wish to bind.
Rebuild your solution and open the Data Source Configuration Wizard again — you will now see an available source in the “JSON Data Source” tab. Select it and click “Next” to proceed.
Choose whether or not you want to utilize the System.Windows.Forms.BindingSource component, and select which elements selected in step 5 you want to pass to a data-aware control.
Run the application to see the result.
To bind to JSON-formatted data in code, create a new DevExpress.DataAccess.Json.JsonDataSource object.
private void Form1_Load(object sender, EventArgs e)
{
gridControl1.DataMember = "Customers";
gridControl1.DataSource = CreateDataSourceFromWeb();
}
private JsonDataSource CreateDataSourceFromWeb()
{
var jsonDataSource = new JsonDataSource();
//Specify the data source location
jsonDataSource.JsonSource = new UriJsonSource(new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.jso"));
jsonDataSource.Fill();
//jsonDataSource.FillAsync();
return jsonDataSource;
}
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
gridControl1.DataMember = "Customers"
gridControl1.DataSource = CreateDataSourceFromWeb()
End Sub
Private Function CreateDataSourceFromWeb() As JsonDataSource
Dim jsonDataSource = New JsonDataSource()
'Specify the data source location
jsonDataSource.JsonSource = New UriJsonSource(New Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.jso"))
jsonDataSource.Fill()
'jsonDataSource.FillAsync()
Return jsonDataSource
End Function
If you need to exclude specific data fields, build the JSON Schema manually.
private JsonDataSource CreateDataSourceFromWeb()
{
var jsonDataSource = new JsonDataSource();
UriJsonSource uriJsonSource = new UriJsonSource();
jsonDataSource.JsonSource = new UriJsonSource(new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.jso"));
JsonSchemaNode root = new JsonSchemaNode("root", null);
JsonSchemaNode nodeCustomers = new JsonSchemaNode("Customers", true, JsonNodeType.Array);
JsonSchemaNode nodeCompanyName = new JsonSchemaNode("CompanyName", true, JsonNodeType.Property, typeof(string));
JsonSchemaNode nodeContactName = new JsonSchemaNode("ContactName", true, JsonNodeType.Property, typeof(string));
JsonSchemaNode nodeContactTitle = new JsonSchemaNode("ContactTitle", true, JsonNodeType.Property, typeof(string));
JsonSchemaNode nodeAddress = new JsonSchemaNode("Address", true, JsonNodeType.Property, typeof(string));
JsonSchemaNode nodeCity = new JsonSchemaNode("City", true, JsonNodeType.Property, typeof(string));
nodeCustomers.Nodes.AddRange(new DevExpress.DataAccess.Node<JsonNode>[] {
nodeCompanyName,
nodeContactName,
nodeContactTitle,
nodeAddress,
nodeCity,
});
root.Nodes.Add(nodeCustomers);
jsonDataSource.Schema = root;
jsonDataSource.Fill();
//jsonDataSource.FillAsync();
return jsonDataSource;
}
Private Function CreateDataSourceFromWeb() As JsonDataSource
Dim jsonDataSource = New JsonDataSource()
Dim uriJsonSource As New UriJsonSource()
jsonDataSource.JsonSource = New UriJsonSource(New Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.jso"))
Dim root As New JsonSchemaNode("root", Nothing)
Dim nodeCustomers As New JsonSchemaNode("Customers", True, JsonNodeType.Array)
Dim nodeCompanyName As New JsonSchemaNode("CompanyName", True, JsonNodeType.Property, GetType(String))
Dim nodeContactName As New JsonSchemaNode("ContactName", True, JsonNodeType.Property, GetType(String))
Dim nodeContactTitle As New JsonSchemaNode("ContactTitle", True, JsonNodeType.Property, GetType(String))
Dim nodeAddress As New JsonSchemaNode("Address", True, JsonNodeType.Property, GetType(String))
Dim nodeCity As New JsonSchemaNode("City", True, JsonNodeType.Property, GetType(String))
nodeCustomers.Nodes.AddRange(New DevExpress.DataAccess.Node(Of JsonNode)() { nodeCompanyName, nodeContactName, nodeContactTitle, nodeAddress, nodeCity})
root.Nodes.Add(nodeCustomers)
jsonDataSource.Schema = root
jsonDataSource.Fill()
'jsonDataSource.FillAsync()
Return jsonDataSource
End Function