Blazor Grid - Bind to OData Instant Feedback Data Source

This example binds the DevExpress Blazor Grid UI component to an OData Instant Feedback data source. The data source retrieves records on demand in background threads to maintain app responsiveness. It reduces memory consumption and improves overall performance when working with large collections.

Note: Instant Feedback data sources impose limitations on available Grid features. Refer to the following topic for additional information in this regard: Bind Blazor Grid to Server Mode Data Sources.

Quick Start

1. Run the ODataServer application.
2. Run the InstantFeedback application.

InstantFeedback connects to ODataServer at https://localhost:5006/odata. If port 5006 is already in use, update URLs in Program.cs and OrdersContext.cs.

Implementation Details

In this example, the DevExpress Blazor Grid retrieves data from an OData service. To bind our Blazor Grid component to this type of service, you must:

1. Add the following NuGet package to your project: Microsoft.OData.Client

2. Create data model and service context classes.

3. Add required namespaces to the page that hosts the Grid:

   @using InstantFeedback.Models
   @using DevExpress.Data.ODataLinq

4. Create an ODataInstantFeedbackSource instance, configure connection parameters, and assign the instance to the Grid's Data property:

   <DxGrid Data="ODataSource">
       <!-- ... -->
   </DxGrid>
   
   @code {
       ODataInstantFeedbackSource ODataSource { get; set; }
   
       protected override void OnInitialized() {
           ODataSource = new ODataInstantFeedbackSource();
           ODataSource.KeyExpression = "OrderId";
           ODataSource.GetSource += (sender, e) => e.Query = new OrdersContext().Orders;
       }
   }

5. Implement the IDisposable interface and dispose of the data source in the page's Dispose method:

   @implements IDisposable
   // ...
   @code {
       //...
       public void Dispose() {
           ODataSource?.Dispose();
       }
   }

Files to Review

InstantFeedback:

• Index.razor
• Order.cs
• OrdersContext.cs

ODataServer:

• OrdersController.cs
• Order.cs
• NorthwindContext.cs
• Program.cs

Documentation

• Bind Blazor Grid to Data
• Bind Blazor Grid to Server Mode Data Sources

More Examples

• Server Mode Data Processing
• Bind to an Instant Feedback Data Source Using Entity Framework Core

Does This Example Address Your Development Requirements/Objectives?

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