[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Expand]Controls and Libraries
 [Collapse]Common Features
  [Collapse]Data Binding Common Concepts
    How to: Bind GridControl to Database and Implement Master-Detail Mode at Design Time
    How to: Bind a Control to a Database at Runtime
    How to: Bind a Control to Data Created at Runtime
    How to: Bind a Control to Data in an XML File
    Traditional Data Binding Methods
    Data Source Configuration Wizard
    Data Binding Mechanism in ADO.NET
    Binding Controls to XML Data
    Binding Controls to Data Created at Runtime
    Add Unbound Data to a Data-Aware Control (XtraGrid, XtraPivotGrid)
    Binding to Excel Data Sources
    Binding to LINQ to SQL Classes
    Unbound Sources
    Binding to Entity Framework Core
    Binding to OData
    Bind to JSON Data
    Bind to XPO Data
    Bind to Azure SQL Database
    Binding to SQL Data
    Data Annotation Attributes
    How to: Add Virtual Rows Using the UnboundSource Component
    Obtaining Fields Available in Data Source
  [Expand]Data Source Wizard
  [Expand]Application Appearance and Skin Colors
  [Expand]Filtering UI Context
   Find Panel Syntax
  [Expand]Graphics Performance and High DPI
  [Expand]Scaffolding Wizard
  [Expand]Formatting Values
   HTML-inspired Text Formatting
  [Expand]Save and Restore Layouts
   Clipboard - Copy and Paste Operations. Data Formatting
   Version Compatibility: Default Property Values
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Bind to JSON Data

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.

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

  1. Choose the "JSON Data Source" option and click "New Data Source...". This will automatically add a new JsonDataSource component to the form and invoke its Data Source Editor dialog.

  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.

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.

  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.

  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.

  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.

  1. Run the application to see the result.

Expanded Bind to JSON Data in Code

To bind to JSON-formatted Data in Code, create a new JsonDataSource object.

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

Is this topic helpful?​​​​​​​