Use OData Service for Data Grid

The dxDataGrid For ASP.NET Web Forms widget allows you to use an OData service as a data source. In this tutorial, you will learn how to do this. The grid will use a simple read-only OData v4 service provided by www.odata.org for demo purposes.

Download Code

Bind to OData Service

Drop the dxDataGrid widget from the DX.14.1: DevExtreme for ASP.NET WebForm group in the Toolbox to your web page. Bind this widget to an entity of the data model that describes the data exposed by an OData Service. For this purpose, use the grid's ODataOptions | Url property in the Property Grid. As an example, set this property to http://services.odata.org/V4/Northwind/Northwind.svc/Products - the data model entity describing Products data exposed by a sample Northwind OData service. In addition, set the version of the OData protocol used to interact with the data service using the grid's ODataOptions | Version property.

New Data Source

Here is an overview of all the grid properties from the ODataOptions group.

  • JSONP
    Specifies whether to use the JSONP approach to access non-CORS-compatible remote services.

  • KeyType
    Specifies the type of the key property. The following key types are supported out of the box: String, Int32, Int64, and Guid.

  • Url
    Specifies the URL that provides access to the an entity of the data model that describes the data exposed by an OData Service.

  • Version
    Specifies the version of the OData protocol used to interact with the data service.

  • WithCredentials
    Setting this option to true enables sending cookies and authorization headers to foreign domains (CORS-related).

Configure Column Set

When running, the dxDataGrid widget loads data from the specified data source, parses it and generates columns according to the parsing result. As a result, columns will be generated for all properties of the bound data model entity. To display a custom column set and/or configure the columns in a custom way, invoke the Columns dialog and add the required columns manually.

To invoke the Columns dialog, use one of the following techniques.

  • Use the Columns... option in the grid's smart tag menu.
  • Use the Columns... option in the grid's context menu.
  • Use the Columns... command at the bottom of the Property Grid.
  • Use the ellipsis button provided for the Configuration | Columns property in the Property Grid.

In the Columns dialog, use the Add button to add columns. For each added column, specify the essential DataField property. Set this property to one of the properties exposed by the data model entity to which the grid is bound.

Columns Dialog

In addition, you can specify the column order and set properties for columns individually.

Result

Columns Dialog

Configure the grid and enable the required features in the same way as detailed in the Get Started with dxDataGrid for Web Forms and Bind Grid Columns to Complex Fields tutorials.