All docs
V20.1
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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

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.

wizard

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

wizard

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

wizard

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

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

wizard

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

wizard

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

wizard

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

wizard

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

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