Bind to JSON Data

• Oct 09, 2019
• 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

This walkthough 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…”).

1. Invoke the Data Source Configuration Wizard for the data-aware control you need to bind.

2. 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.

3. In the Data Source Editor dialog, select the required JSON Source type:

• Web Service Endpoint (URI) - select this option if you have an URI of the JSON file stored in web;
• JSON File - choose this type if you have a JSON data file on local storage;
• JSON String - this option allows you to paste JSON data in raw text form.

You can provide a real data source or use a test data set available online (e.g., GitHub).

4. If you have selected the Web Service Endpoint (URI) option, enter login credentials and optional HTTP Headers/Query Parameters.

5. A JSON source may have multiple data sets, all owned by the topmost “root” element. The “Select Root Element” page allows you to choose which of these data sets you want to bind to.

6. Rebuild your solution and open the Data Source Configuration Wizard again - you will see an available source in the “JSON Data Source” tab now. Select it and press “Next” to proceed.

7. Choose whether or not you want to utilize the System.Windows.Forms.BindingSource component, and choose which of the elements selected in step #5 you want to pass to a data-aware control.

8. 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.

C#

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("http://northwind.servicestack.net/customers.json"));

    jsonDataSource.Fill();
    //jsonDataSource.FillAsync();
    return jsonDataSource;
}

VB.NET

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("http://northwind.servicestack.net/customers.json"))

    jsonDataSource.Fill()
    'jsonDataSource.FillAsync()
    Return jsonDataSource
End Function

If you need to exclude specific data fields, build the JSON Schema manually.

C#

private JsonDataSource CreateDataSourceFromWeb()
{
    var jsonDataSource = new JsonDataSource();
    UriJsonSource uriJsonSource = new UriJsonSource();
    jsonDataSource.JsonSource = new UriJsonSource(new Uri("http://northwind.servicestack.net/customers.json"));

    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;
}

VB.NET

Private Function CreateDataSourceFromWeb() As JsonDataSource
    Dim jsonDataSource = New JsonDataSource()
    Dim uriJsonSource As New UriJsonSource()
    jsonDataSource.JsonSource = New UriJsonSource(New Uri("http://northwind.servicestack.net/customers.json"))

    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