Bind to JSON Data
- 4 minutes to read
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.
Bind to JSON Data at Design Time
Important
The JsonDataSource wizard is not available for .NET projects. Please set up the JsonDataSource 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 Newtonsoft.Json NuGet package (“Project | Manage NuGet Packages…”) for .NET Framework platforms. For .NET 6+ platforms, JsonDataSource uses System.Text.Json.
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:
- Web Service Endpoint (URI) — Select this option if you have the URI of the JSON file stored on the web.
- JSON File — Choose this type if you have a JSON data file on local storage.
- JSON String — Select this option to paste JSON data in raw text form.
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.
Bind to JSON Data in Code
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;
}
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;
}