DevExtreme DataGrid - Bind to an OData Service

This example binds the DevExtreme DataGrid component to an OData v4 service. The ODataStore is configured to run server-side data operations including filtering, record selection, and sorting.

Implementation Details

Setup the OData Server

This example includes a pre-configured ASP.NET Core OData server (see ODataServer) that uses OData REST APIs to expose sample data. The server runs at http://localhost:5005 and creates the following endpoint: /odata/Products.

Configure the DataGrid

All framework projects share the same implementation:

1. Create an ODataStore. Specify the service url, key data field, and OData version.
2. You can configure a standalone ODataStore service (see OData for details), but this examples uses a DataSource to implement data filtering and selection operations.
3. Bind the DataGrid to the data source.

Run the Example

Angular, React, Vue, and jQuery

1. Start the OData Server Execute the following command to start the OData server:

   cd ODataServer
   dotnet run

   The server is available at the following URL: http://localhost:5005.

2. Run the Client Application Execute one of the following commands to run the client application:

   • Angular: cd Angular && npm install && npm start
   • React: cd React && npm install && npm run dev
   • Vue: cd Vue && npm install && npm run dev
   • jQuery: cd jQuery && npm install && npm start

ASP.NET Core

Our ASP.NET Core example includes a standalone OData server. Run the following command to start the client application and server:

cd "ASP.NET Core"
dotnet run

The application is available at the following URL: http://localhost:59183 .

Files to Review

• OData Server

  • Program.cs - OData service configuration
  • ProductsController.cs - OData controller
  • Product.cs - Product entity model

• Angular

  • app.component.html
  • app.component.ts

• React

  • App.tsx

• Vue

  • HomeContent.vue

• jQuery

  • index.js

• ASP.NET Core

  • Index.cshtml
  • Program.cs
  • ProductsController.cs
  • Product.cs

Documentation

• Getting Started with DataGrid
• Specify a Data Source - OData
• Data Source Examples - OData

More Examples

• ODataContext for DevExtreme - How to filter data by a foreign key value

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)