Grid for Blazor - How to bind the component to an Instant Feedback data source and enable edit operations

This example demonstrates how to use the Entity Framework Core data access technology to bind the DevExpress Blazor Grid component to an Instant Feedback data source. In the example, you can add, edit, and delete data rows in the Grid component. The Grid validates input data and displays error messages.

Overview

Instant Feedback data sources are designed to work with large data collections. They load data in small portions on demand in background threads and do not freeze the Grid UI. Instant Feedback data sources help you to reduce memory consumption but impose multiple limitations. Refer to the following topic for more information: Server Mode Sources - Common Specifics and Limitations.

Bind the Grid to an Instant Feedback Data Source

Follow the steps below to use the Entity Framework Core technology to bind the Grid component to an Instant Feedback data source:

1. Add the following NuGet packages to your project:

   • EntityFrameworkCore
   • EntityFrameworkCore.Tools
   • EntityFrameworkCore.Sqlite

2. Create a model for your database and register the database context.

3. Register a DbContext factory in the Program.cs file.

4. Add references to the model, data source, and data access technology namespaces to the page that displays the Grid component. Use the @inject Razor directive to inject the DbContext factory service into the component:

   @using InstantFeedback.Models;
   @using Microsoft.EntityFrameworkCore
   @using DevExpress.Data.Linq
   @inject IDbContextFactory<NorthwindContext> NorthwindContextFactory

5. Create an instance of the EntityInstantFeedbackSource class, specify its parameters, and bind it to the Grid's Data property:

   <DxGrid Data="InstantFeedbackSource">
       <!-- ... -->
   </DxGrid>
   
   @code {
       EntityInstantFeedbackSource InstantFeedbackSource { get; set; }
       NorthwindContext Northwind { get; set; }
   
       protected override void OnInitialized() {
           Northwind = NorthwindContextFactory.CreateDbContext();
           InstantFeedbackSource = new EntityInstantFeedbackSource(e => {
               e.KeyExpression = "OrderId";
               e.QueryableSource = Northwind.Orders;
           });
       }
   }

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

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

Enable Edit Operations

The Grid component supports multiple edit modes. Follow the steps below to allow users to edit grid data in edit form mode:

1. Declare a DxGridCommandColumn object in the Grid's Columns template. This column displays the predefined New, Edit, and Delete command buttons.

2. Use the EditFormTemplate property to define edit form content.

3. The EditModelSaving event occurs after a user submits the edit form and validation is passed. Use the EditModel event argument to access the edit model that stores all changes. Copy the values of all edit model fields that can be changed to the corresponding fields of the DataItem event argument, then save changes to the bound data source. To assign all edit model field values to the data item fields simultaneously, you can call the AutoMapper library's Map method.

4. The DataItemDeleting event occurs once a user confirms the delete operation in the delete confirmation dialog. In the event handler, check user input and access permissions and post changes to the data source.

5. If your data object has a primary key, assign it to the KeyFieldName or KeyFieldNames property. If you do not specify these properties, the Grid uses standard .NET value equality comparison to identify data items.

Files to Review

• Index.razor
• Program.cs
• Invoice.cs
• NorthwindContext.cs

Documentation

• Bind to Data
• Bind Components to Data with Entity Framework Core
• Edit Data
• Validate User Input
• Examples

More Examples

• Bind the Grid to data with Entity Framework Core
• Disable Row Editing Depending on Row Values
• Create a Custom Record Deletion Confirmation Dialog

Does this example address your development requirements/objectives?

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