Cell Editing in Blazor Grid

• Aug 24, 2026
• 41 minutes to read

In EditCell mode, users can click a data cell to display its in-place editor. When focus moves to another row, the control validates pending user input and saves changes.

Run Demo: Edit Cell Run Demo: Edit Batch View Example: Batch Data Editing with Entity Framework Core

The following shortcuts are available in EditCell mode:

Enter or Shift+Enter

Default behavior: Opens an in-place editor for the focused cell if an editor is not already open. If an in-place editor is open, the shortcut applies changes and closes the editor.

Advanced behavior: Use the EnterKeyDirection property to move focus within the current row or column after the shortcut closes the editor. Set the EditNextCellOnEnter property to true to automatically display an in-place editor for the newly focused cell.

Esc

When a cell editor is visible, press Esc to hide the editor and discard changes made to this cell. If you press Esc when the editor is hidden, the Grid discards all changes made to the row and cancels row editing.

Tab or Shift+Tab

Hides the editor in the current cell, focuses the next or previous data cell, and shows an editor in the newly focused cell.

Video Tutorial

Enable Editing

Follow the steps below to enable cell editing:

1. Set the EditMode property to EditCell.

2. If your data object has a primary key, assign it to the KeyFieldName or KeyFieldNames property.

3. Handle EditModelSaving and DataItemDeleting events to save changes and reload Grid data. Refer to the following topic for additional information: Edit Model in Blazor Grid.

4. (Optional) Declare a DxGridCommandColumn object in the Columns template to display the command column.

5. (Optional) Use the EditNewRowPosition property to display the new item row or change the position of cell editors displayed for new records.

6. (Optional) Use the following properties to improve keyboard navigation and shortcuts: EditOnKeyPress, EditNextCellOnEnter, and EnterKeyDirection.

When users start editing a row, the Grid creates a clone of the edited data item, called an edit model. During edit operations, the Grid applies user changes only to the edit model and keeps the data item unchanged until the EditModelSaving or DataItemDeleting event fires. Refer to the following topic for additional information: Edit Model in Blazor Grid.

The following code sample allows users to edit Grid cells:

Razor

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="Data"
        KeyFieldName="EmployeeId"
        EditModelSaving="OnEditModelSaving"
        DataItemDeleting="OnDataItemDeleting"
        CustomizeEditModel="OnCustomizeEditModel"
        EditMode="GridEditMode.EditCell">
    <Columns>
        <DxGridCommandColumn EditButtonVisible="false"
                             CancelButtonVisible="false"
                             SaveButtonVisible="false" />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
</DxGrid>

@code {
    IEnumerable<Employee> Data { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Data = await Northwind.Employees.ToListAsync();
    }

    void OnCustomizeEditModel(GridCustomizeEditModelEventArgs e) {
        if(e.IsNew) {
            var editModel = (Employee)e.EditModel;
            editModel.EmployeeId = Data.Max(x => x.EmployeeId) + 1;
        }
    }

    async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
        var editModel = (Employee)e.EditModel;
        if (e.IsNew)
            await Northwind.AddAsync(editModel);
        else
            e.CopyChangesToDataItem();
        // Post changes to the database.
        await Northwind.SaveChangesAsync();
        // Reload the entire Grid.
        Data = await Northwind.Employees.ToListAsync();
    }

    async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
        // Remove the data item from the database.
        Northwind.Remove(e.DataItem);
        await Northwind.SaveChangesAsync();
        // Reload the entire Grid.
        Data = await Northwind.Employees.ToListAsync();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Employee

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace Grid.Northwind {
    public partial class Employee {
        public int EmployeeId { get; set; }
        [Required]
        public string LastName { get; set; }
        [Required]
        public string FirstName { get; set; }
        [Required]
        public string Title { get; set; }
        public string TitleOfCourtesy { get; set; }
        public Nullable<System.DateTime> BirthDate { get; set; }
        [Required]
        [Range(typeof(DateTime), "1/1/2000", "1/1/2020",
        ErrorMessage = "HireDate must be between {1:d} and {2:d}")]
        public Nullable<System.DateTime> HireDate { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string HomePhone { get; set; }
        public string Extension { get; set; }
        public byte[] Photo { get; set; }
        public string Notes { get; set; }
        public Nullable<int> ReportsTo { get; set; }
        public string PhotoPath { get; set; }
        public virtual ICollection<Order> Orders { get; set; }
        public string Text => $"{FirstName} {LastName} ({Title})";
        public string ImageFileName => $"Employees/{EmployeeId}.jpg";
    }
}

NorthwindContext

using Microsoft.EntityFrameworkCore;
#nullable disable

namespace Grid.Northwind {
    public partial class NorthwindContext : DbContext {

        public NorthwindContext(DbContextOptions<NorthwindContext> options)
            : base(options) {
        }
        // ...
        public virtual DbSet<Employee> Employees { get; set; }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
            if(!optionsBuilder.IsConfigured) {
                optionsBuilder.UseSqlServer("Server=.\\sqlexpress;Database=Northwind;Integrated Security=true");
            }
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder) {
            modelBuilder.HasAnnotation("Relational:Collation", "SQL_Latin1_General_CP1_CI_AS");
            // ...
            modelBuilder.Entity<Employee>(entity => {
                entity.HasIndex(e => e.EmployeeId, "EmployeeId");
                entity.HasIndex(e => e.LastName, "LastName");
                entity.HasIndex(e => e.FirstName, "FirstName");
                entity.HasIndex(e => e.Title, "Title");
                entity.HasIndex(e => e.BirthDate, "BirthDate");
                entity.HasIndex(e => e.HireDate, "HireDate");
                entity.HasIndex(e => e.Notes, "Notes");
            });
            OnModelCreatingPartial(modelBuilder);
        }

        partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
    }
}

Program.cs

using Microsoft.EntityFrameworkCore;
// ...
builder.Services.AddDbContextFactory<NorthwindContext>((sp, options) => {
    var env = sp.GetRequiredService<IWebHostEnvironment>();
    var dbPath = Path.Combine(env.ContentRootPath, "Northwind-5e44b51f.mdf");
    options.UseSqlServer("Server=(localdb)\\MSSQLLocalDB;Integrated Security=true;AttachDbFileName=" + dbPath);
});

Limitations

The EditCell mode has the following specifics and limitations:

• The mode is compatible only with DevExpress Blazor editors.
• The Grid component does not support this mode when you use a Server Mode data source or GridDevExtremeDataSource.
• The mode requires active keyboard navigation. The Grid component automatically turns on keyboard navigation unless you disable the KeyboardNavigationEnabled property or the DisableKeyboardNavigationInGrid compatibility setting.
• After a user performs a data shaping operation that hides the edited row from the view (for instance, after a user navigates to the next page), the Grid validates row values. If validation succeeds, the Grid saves changes. If validation fails, the Grid discards changes and displays a notification message: “Unsaved changes were discarded”.

• During edit operations, the Grid applies user changes only to the edit model. The data item remains unchanged until focus leaves the edited row.

  To display the modified cell value in the CellDisplayTemplate or DataColumnCellDisplayTemplate, use the template context’s Value property instead of DisplayText. To access current values of other fields, use the edit model’s field values instead of the template context’s DataItem object. You can obtain the edit model as follows:

  <DxGridDataColumn FieldName="FirstName">
      <CellDisplayTemplate Context="displayContext">
          @{
              string value;
              if (displayContext.Grid.IsEditingRow(displayContext.VisibleIndex)) {
                  var editModel = (Employee)displayContext.Grid.GetEditContext().Model;
                  value = editModel.FirstName;
              }
              else
                  value = displayContext.DisplayText;
          }
          <span>@value</span>
      </CellDisplayTemplate>
  </DxGridDataColumn>
  

Related API

This section contains comprehensive editing-related API references.

Show API References

DxGrid API member	Type	Description
CustomValidators	Property	Allows you to declare custom validator components.
DataColumnCellEditTemplate	Property	Allows you to replace automatically generated editors with custom content in all edit cells displayed for data columns.
EditMode	Property	Specifies how users edit Grid data.
EditNextCellOnEnter	Property	In EditCell mode, specifies whether the Grid starts editing the next cell after a user presses Enter. Available in v26.1.4+.
EditNewRowPosition	Property	Specifies the position of UI elements used to create new rows.
EditOnKeyPress	Property	In EditCell mode, specifies whether cell editing starts once a user begins typing a new value.
EditorRenderMode	Property	Specifies how the Grid renders editors in the filter row and in data rows during edit operations.
EnterKeyDirection	Property	In EditCell mode, specifies where focus moves after a user presses Enter.
ValidationEnabled	Property	Specifies whether the Grid validates user input in DevExpress data editors located in the edit form or edit cells.
CancelEditAsync()	Method	Cancels row editing and discards changes.
GetColumnEditSettings<T>(String)	Method	Returns editor settings of the column bound to the specified data source field.
GetEditContext()	Method	Returns the edit context.
IsEditing()	Method	Returns whether the Grid is being edited.
IsEditingNewRow()	Method	Returns whether a new Grid row is being edited.
IsEditingRow(Int32)	Method	Returns whether the specified Grid row is being edited.
SaveChangesAsync()	Method	Triggers validation and raises the EditModelSaving event if validation succeeds. The method immediately raises this event if validation is disabled.
ShowDataItemDeleteConfirmation(Object)	Method	Displays the delete confirmation dialog for the specified data item. If a user confirms the operation, the method raises the DataItemDeleting event.
ShowRowDeleteConfirmation(Int32)	Method	Displays the delete confirmation dialog for the specified row. If a user confirms the operation, the method raises the DataItemDeleting event.
StartEditDataItemAsync(Object, String)	Method	Starts editing the specified data item.
StartEditNewRowAsync(String)	Method	Starts editing a new row.
StartEditRowAsync(Int32, String)	Method	Starts editing the row with the specified visible index.
CustomizeDataRowEditor	Event	Allows you to customize a cell editor in a data row.
CustomizeEditModel	Event	Allows you to create a custom edit model or customize an automatically generated edit model.
DataItemDeleting	Event	Fires when a user confirms the delete operation in the delete confirmation dialog.
EditCanceling	Event	Fires before the Grid cancels the edit operation and discards changes.
EditModelSaving	Event	Fires if validation succeeds after a user saves changes or you call the SaveChangesAsync() method.
EditStart	Event	Fires before the Grid starts editing a row.

DxGridCommandColumn API member	Type	Description
CancelButtonVisible	Property	Specifies whether the command column displays the Cancel button in EditRow or EditCell edit mode.
CellDisplayTemplate	Property	Specifies a template used to display command column cells.
CellEditTemplate	Property	Specifies a template used to display the command column’s edit cell.
DeleteButtonVisible	Property	Specifies whether the command column displays Delete buttons.
DisplayMode	Property	Specifies whether command buttons display icons, captions, or both.
EditButtonVisible	Property	Specifies whether the command column displays Edit buttons.
HeaderTemplate	Property	Specifies a template used to display the command column header.
NewButtonVisible	Property	Specifies whether the command column displays the New button.
SaveButtonVisible	Property	Specifies whether the command column displays the Save button in EditRow or EditCell edit mode.

DxGridDataColumn API member	Type	Description
CellEditTemplate	Property	Allows you to replace an automatically generated editor with custom content in the column’s edit cell.
DataRowEditorVisible	Property	Specifies whether to render the editor associated with this column in the column edit cell, edit form, or pop-up edit form.
EditSettings	Property	Allows you to customize the editor associated with this column.
ReadOnly	Property	Specifies whether a user can change the column editor value when the Grid is in edit mode.

Task-Based Examples

This section includes code samples that demonstrate cell-editing functionality.

Display New Item Row

A new item row is an empty row that allows users to add new records. Set the EditNewRowPosition property to FixedOnTop to display the new item row fixed to the top of the current page. Set this property to LastRow to display this row on the last page after the last data row.

<DxGrid Data="Data"
        KeyFieldName="EmployeeId"
        EditModelSaving="OnEditModelSaving"
        DataItemDeleting="OnDataItemDeleting"
        CustomizeEditModel="OnCustomizeEditModel"
        EditMode="GridEditMode.EditCell"
        EditNewRowPosition="GridEditNewRowPosition.FixedOnTop">
    <Columns>
        *@* ... *@
    </Columns>
</DxGrid>

Users can press Tab or Shift + Tab keys to navigate between row cells. If focus goes beyond the last/first cell, the Grid focuses the cell on the opposite end and validates user input. Depending on validation results, the following variants are possible:

• If validation fails, the component displays error icons.
• If validation succeeds, the component saves changes and starts editing a new row.

Start Editing on Typing

The Grid component starts cell editing after a user clicks a cell or focuses it and presses Enter. Enable the EditOnKeyPress property to also enter edit mode once a user starts typing a new value:

<DxGrid Data="Data"
        KeyFieldName="EmployeeId"
        EditModelSaving="OnEditModelSaving"
        DataItemDeleting="OnDataItemDeleting"
        CustomizeEditModel="OnCustomizeEditModel"
        EditMode="GridEditMode.EditCell"
        EditOnKeyPress="true">
    <Columns>
        *@* ... *@
    </Columns>
</DxGrid>

Start Editing Next Cell on Enter

Use the EnterKeyDirection property to focus the next cell in the current row or column after users press Enter. Set the EditNextCellOnEnter to true to automatically switch the newly focused cell to edit mode:

<DxGrid Data="Data"
        KeyFieldName="EmployeeId"
        EditModelSaving="OnEditModelSaving"
        DataItemDeleting="OnDataItemDeleting"
        CustomizeEditModel="OnCustomizeEditModel"
        EditMode="GridEditMode.EditCell"
        EnterKeyDirection="GridEnterKeyDirection.Column"
        EditNextCellOnEnter="true">
    <Columns>
        *@* ... *@
    </Columns>
</DxGrid>

Disable Column Editing

You can use one of the following column properties to prevent users from editing a specific column:

ReadOnly

Specifies whether column editors are in read-only mode.

DataRowEditorVisible

Specifies whether to display editors for data cells in this column. If set to false, the Grid does not enter edit mode when users click a cell in the column. In edit mode, keyboard navigation with Tab or Enter skips this column.

The following code snippet prevents users from editing the Employee ID column:

<DxGrid Data="Data"
        KeyFieldName="EmployeeId"
        EditModelSaving="OnEditModelSaving"
        DataItemDeleting="OnDataItemDeleting"
        CustomizeEditModel="OnCustomizeEditModel"
        EditMode="GridEditMode.EditCell">
    <Columns>
        <DxGridCommandColumn EditButtonVisible="false"
                             CancelButtonVisible="false"
                             SaveButtonVisible="false" />
        <DxGridDataColumn FieldName="EmployeeId" DataRowEditorVisible="false" />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
</DxGrid>

Conditionally Disable Row Editing

To prevent users from editing a specific record, handle the EditStart event and set the Cancel argument to true for the corresponding row. The following code sample prevents users from editing discontinued products:

Razor

@inject DataService DataService

<DxGrid Data="@products"
        EditMode="GridEditMode.EditCell"
        EditStart="OnEditStart"
        DataItemDeleting="OnDataItemDeleting"     
        EditModelSaving="OnEditModelSaving">
    <Columns>
        <DxGridCommandColumn EditButtonVisible="false"
                             CancelButtonVisible="false"
                             SaveButtonVisible="false" />
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="QuantityPerUnit" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" />
        <DxGridDataColumn FieldName="Discontinued" ReadOnly="true" />
    </Columns>
</DxGrid>

@code {
    private List<Product> products = new();
    private List<Category> categories = new();

    void OnEditStart(GridEditStartEventArgs e) {
        if ((e.DataItem as Product)?.Discontinued == true)
            e.Cancel = true;
    }
    protected override void OnInitialized() {
        products = DataService.GetProducts().ToList();
        categories = DataService.GetCategories().ToList();
    }   
    void OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
        if (e.DataItem is Product product)
            products.Remove(product);
    }
    void OnEditModelSaving(GridEditModelSavingEventArgs e) {
        var editModel = (Product)e.EditModel;
        if (e.IsNew)
            products.Add(editModel);
        else
            e.CopyChangesToDataItem();
    }
}

Model.cs

using System.Collections.ObjectModel;

public class Category {
    public int CategoryID { get; set; }
    public string CategoryName { get; set; } = string.Empty;
    public string? Description { get; set; }
}

public class Customer(int id, string? firstName, string? lastName, string? country, string? city, string? address, string? phone, string? postalCode) {
    public Customer() : this(-1, null, null, null, null, null, null, null) {
    }
    public int Id { get; set; } = id;
    public string? FirstName { get; set; } = firstName;
    public string? LastName { get; set; } = lastName;
    public string? Country { get; set; } = country;
    public string? City { get; set; } = city;
    public string? Address { get; set; } = address;
    public string? Phone { get; set; } = phone;
    public string? PostalCode { get; set; } = postalCode;
    public virtual ObservableCollection<Order> Orders { get; set; } = new ObservableCollection<Order>();

    public string FullName {
        get => $"{FirstName} {LastName}";
    }
    public override string ToString() => FullName;
}

public enum OrderState {
    Draft,
    Shipping,
    Paid,
    Processed
}

public class Order {
    public int Id { get; set; }
    public virtual Customer? Customer { get; set; }
    public DateTime OrderDate { get; set; }
    public virtual ObservableCollection<OrderItem> Items { get; set; } = new();

    public int ItemsCount { get => Items.Count; }
    public decimal TotalAmount { get => Items.Sum(d => d.Amount); }
}

public class OrderItem {
    public int Id { get; set; }
    public int Quantity { get; set; }
    public virtual Order? Order { get; set; }
    public virtual Product? Product { get; set; }
    public decimal Amount {
        get { return (Product != null) ? (Quantity * Product.UnitPrice) : 0; }
    }
}

public class Product() {
    public int ProductID { get; set; }
    public string ProductName { get; set; } = string.Empty;
    public int? SupplierID { get; set; }
    public int? CategoryID { get; set; }
    public string? QuantityPerUnit { get; set; }
    public decimal UnitPrice { get; set; }
    public short? UnitsInStock { get; set; }
    public short? UnitsOnOrder { get; set; }
    public short? ReorderLevel { get; set; }
    public bool Discontinued { get; set; }
    public DateTime? RestockDate { get; set; }
}

DataService.cs

using System.Collections.ObjectModel;

public class DataService {
    List<Customer> customers = [
        new(1, "John", "Doe", "USA", "Homesville", "123 Home Lane", "[phone]", "55555"),
        new(2, "Sam", "Hill", "Germany", "Berlin", "Friedrichstraße 123", "[phone]", "10117"),
        new(3, "Karen", "Holmes", "USA", "Hillsville", "45 Hill St.", "[phone]", "44444"),
        new(4, "Bobbie", "Valentine", "Germany", "Munich", "Maximilianstraße 45", "[phone]", "80539"),
        new(5, "Jennie", "Fuller", "Germany", "Hamburg", "Reeperbahn 89", "[phone]", "20359"),
        new(6, "Albert", "Menendez", "USA", "Chicago", "933 Heart St. Suite", "[phone]", "9900"),
        new(7, "Frank", "Frankson", "France", "Paris", "25 Rue de Rivoli", "[phone]", "75004"),
        new(8, "Christa", "Christie", "UK", "London", "221B Baker Street", "[phone]", "NW1 6XE"),
        new(9, "Jimmie", "Jones", "USA", "Newman", "900 Newman Center.", "[phone]", "89123"),
        new(10, "Alfred", "Newman", "Germany", "Frankfurt", "Goethestraße 10", "[phone]", "60313"),
        new(11, "Benjamin", "Johnson", "UK", "Manchester", "50 Deansgate", "[phone]", "M3 2BW"),
        new(12, "Alex", "James", "USA", "Los Angeles", "349 Graphic Design L", "[phone]", "12211"),
        new(13, "Beau", "Alessandro", "UK", "Birmingham", "30 New Street", "[phone]", "B2 4ND"),
        new(14, "Bruce", "Campbell", "USA", "San Francisco", "350 Market Street", "[phone]", "94103"),
        new(15, "Cindy", "Haneline", "USA", "Houston", "600 Main Street", "[phone]", "77002"),
        new(16, "Andrea", "Deville", "France", "Bordeaux", "14 Cours de l'Intendance", "[phone]", "33000"),
        new(17, "Anita", "Ryan", "UK", "Cardiff", "30 Castle Street", "[phone]", "CF10 1BT"),
        new(18, "George", "Bunkelman", "UK", "Liverpool", "100 Albert Dock", "[phone]", "L3 4AA"),
        new(19, "Anita", "Cardle", "USA", "Seattle", "1200 Pine Street", "[phone]", "98101"),
        new(20, "Andrew", "Carter", "Germany", "Stuttgart", "Königstraße 20", "[phone]", "70173"),
        new(21, "Almas", "Bunch", "USA", "Boston", "75 Beacon Street", "[phone]", "02108"),
        new(22, "Abigail", "Hazel", "UK", "Glasgow", "75 Buchanan Street", "[phone]", "G1 3HL"),
        new(23, "Anthony", "Vicars", "Germany", "Düsseldorf", "Königsallee 85", "[phone]", "40212"),
        new(24, "Dora", "Geeter", "UK", "Bristol", "20 Queen Square", "[phone]", "BS1 4ND"),
        new(25, "Anthony", "Boyd", "USA", "Denver", "1500 Blake Street", "[phone]", "80202"),
        new(26, "Dora", "Catto", "USA", "Atlanta", "200 Peachtree Street", "[phone]", "30303"),
    ];
    static DateTime restockDate = DateTime.Today.AddMonths(1);
    List<Product> products = [
        new Product { ProductID = 1, ProductName = "Chai", SupplierID = 1, CategoryID = 1, QuantityPerUnit = "10 boxes x 20 bags", UnitPrice = 18.00m, UnitsInStock = 39, UnitsOnOrder = 0, ReorderLevel = 10, Discontinued = false },
        new Product { ProductID = 2, ProductName = "Chang", SupplierID = 1, CategoryID = 1, QuantityPerUnit = "24 - 12 oz bottles", UnitPrice = 19.00m, UnitsInStock = 17, UnitsOnOrder = 40, ReorderLevel = 25, Discontinued = false, RestockDate = restockDate },
        new Product { ProductID = 3, ProductName = "Aniseed Syrup", SupplierID = 1, CategoryID = 2, QuantityPerUnit = "12 - 550 ml bottles", UnitPrice = 10.00m, UnitsInStock = 13, UnitsOnOrder = 70, ReorderLevel = 25, Discontinued = false, RestockDate = restockDate },
        new Product { ProductID = 4, ProductName = "Chef Anton's Cajun Seasoning", SupplierID = 2, CategoryID = 2, QuantityPerUnit = "48 - 6 oz jars", UnitPrice = 22.00m, UnitsInStock = 53, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 5, ProductName = "Chef Anton's Gumbo Mix", SupplierID = 2, CategoryID = 2, QuantityPerUnit = "36 boxes", UnitPrice = 21.35m, UnitsInStock = 0, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = true },
        new Product { ProductID = 6, ProductName = "Grandma's Boysenberry Spread", SupplierID = 3, CategoryID = 2, QuantityPerUnit = "12 - 8 oz jars", UnitPrice = 25.00m, UnitsInStock = 120, UnitsOnOrder = 0, ReorderLevel = 25, Discontinued = false },
        new Product { ProductID = 7, ProductName = "Uncle Bob's Organic Dried Pears", SupplierID = 3, CategoryID = 7, QuantityPerUnit = "12 - 1 lb pkgs.", UnitPrice = 30.00m, UnitsInStock = 15, UnitsOnOrder = 0, ReorderLevel = 10, Discontinued = false, RestockDate = restockDate },
        new Product { ProductID = 8, ProductName = "Northwoods Cranberry Sauce", SupplierID = 3, CategoryID = 2, QuantityPerUnit = "12 - 12 oz jars", UnitPrice = 40.00m, UnitsInStock = 6, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false, RestockDate = restockDate },
        new Product { ProductID = 9, ProductName = "Mishi Kobe Niku", SupplierID = 4, CategoryID = 6, QuantityPerUnit = "18 - 500 g pkgs.", UnitPrice = 97.00m, UnitsInStock = 29, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = true },
        new Product { ProductID = 10, ProductName = "Ikura", SupplierID = 4, CategoryID = 8, QuantityPerUnit = "12 - 200 ml jars", UnitPrice = 31.00m, UnitsInStock = 31, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 11, ProductName = "Queso Cabrales", SupplierID = 5, CategoryID = 4, QuantityPerUnit = "1 kg pkg.", UnitPrice = 21.00m, UnitsInStock = 22, UnitsOnOrder = 30, ReorderLevel = 30, Discontinued = false },
        new Product { ProductID = 12, ProductName = "Queso Manchego La Pastora", SupplierID = 5, CategoryID = 4, QuantityPerUnit = "10 - 500 g pkgs.", UnitPrice = 38.00m, UnitsInStock = 86, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 13, ProductName = "Konbu", SupplierID = 6, CategoryID = 8, QuantityPerUnit = "2 kg box", UnitPrice = 6.00m, UnitsInStock = 24, UnitsOnOrder = 0, ReorderLevel = 5, Discontinued = false },
        new Product { ProductID = 14, ProductName = "Tofu", SupplierID = 6, CategoryID = 7, QuantityPerUnit = "40 - 100 g pkgs.", UnitPrice = 23.25m, UnitsInStock = 35, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 15, ProductName = "Genen Shouyu", SupplierID = 6, CategoryID = 2, QuantityPerUnit = "24 - 250 ml bottles", UnitPrice = 15.50m, UnitsInStock = 39, UnitsOnOrder = 0, ReorderLevel = 5, Discontinued = false },
        new Product { ProductID = 16, ProductName = "Pavlova", SupplierID = 7, CategoryID = 3, QuantityPerUnit = "32 - 500 g boxes", UnitPrice = 17.45m, UnitsInStock = 29, UnitsOnOrder = 0, ReorderLevel = 10, Discontinued = false },
        new Product { ProductID = 17, ProductName = "Alice Mutton", SupplierID = 7, CategoryID = 6, QuantityPerUnit = "20 - 1 kg tins", UnitPrice = 39.00m, UnitsInStock = 0, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = true },
        new Product { ProductID = 18, ProductName = "Carnarvon Tigers", SupplierID = 7, CategoryID = 8, QuantityPerUnit = "16 kg pkg.", UnitPrice = 62.50m, UnitsInStock = 42, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 19, ProductName = "Teatime Chocolate Biscuits", SupplierID = 8, CategoryID = 3, QuantityPerUnit = "10 boxes x 12 pieces", UnitPrice = 9.20m, UnitsInStock = 25, UnitsOnOrder = 0, ReorderLevel = 5, Discontinued = false },
        new Product { ProductID = 20, ProductName = "Sir Rodney's Marmalade", SupplierID = 8, CategoryID = 3, QuantityPerUnit = "30 gift boxes", UnitPrice = 81.00m, UnitsInStock = 40, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false }
    ];
    List<Category> categories = [
        new Category { CategoryID = 1, CategoryName = "Beverages", Description = "Soft drinks, coffees, teas, beers, and ales" },
        new Category { CategoryID = 2, CategoryName = "Condiments", Description = "Sweet and savory sauces, relishes, spreads, and seasonings" },
        new Category { CategoryID = 3, CategoryName = "Confections", Description = "Desserts, candies, and sweet breads" },
        new Category { CategoryID = 4, CategoryName = "Dairy Products", Description = "Cheeses" },
        new Category { CategoryID = 5, CategoryName = "Grains/Cereals", Description = "Breads, crackers, pasta, and cereal" },
        new Category { CategoryID = 6, CategoryName = "Meat/Poultry", Description = "Prepared meats" },
        new Category { CategoryID = 7, CategoryName = "Produce", Description = "Dried fruit and bean curd" },
        new Category { CategoryID = 8, CategoryName = "Seafood", Description = "Seaweed and fish" }
    ];
    List<Order> orders;

    public DataService() {
        orders = GenerateOrders(150);
    }
    public IEnumerable<Customer> GetCustomers() => customers;
    public IEnumerable<Product> GetProducts() => products;
    public IEnumerable<Category> GetCategories() => categories;
    public IEnumerable<Order> GetOrders() => orders;
    List<Order> GenerateOrders(int count) {
        Random random = new Random();
        var generatedOrders = new List<Order>();
        for (int i = 1; i <= count; i++) {
            var customer = customers[random.Next(customers.Count)];
            var order = new Order {
                Id = i,
                Customer = customer,
                OrderDate = DateTime.Now.AddDays(-random.Next(1, 500)),
                Items = new ObservableCollection<OrderItem>()
            };

            int itemsCount = random.Next(1, 5);
            for (int j = 0; j < itemsCount; j++) {
                var product = products[random.Next(products.Count)];
                order.Items.Add(new OrderItem {
                    Id = i * 10 + j,
                    Order = order,
                    Product = product,
                    Quantity = random.Next(1, 10)
                });
            }

            customer.Orders.Add(order);
            generatedOrders.Add(order);
        }
        return generatedOrders;
    }
}

Program.cs

// ...
builder.Services.AddScoped<DataService>();

Conditionally Disable Cell Editing

Use CellEditTemplate to dynamically disable editing for cells in a column based on other field values. In the template, display an editor bound to the data field and set the editor’s Enabled or ReadOnly value based on your custom condition.

The following code sample disables Unit Price column editors for discontinued products:

Razor

@inject DataService DataService

<DxGrid Data="@products"
        EditMode="GridEditMode.EditCell"
        DataItemDeleting="OnDataItemDeleting"     
        EditModelSaving="OnEditModelSaving">
    <Columns>
        <DxGridCommandColumn EditButtonVisible="false"
                             CancelButtonVisible="false"
                             SaveButtonVisible="false" />
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="QuantityPerUnit" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2">
            <CellEditTemplate Context="editContext">
                @{
                    var product = (Product)editContext.EditModel;
                }
                <DxSpinEdit @bind-Value="product.UnitPrice" DisplayFormat="c2"
                            Enabled="!product.Discontinued" />
            </CellEditTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="Discontinued" />
    </Columns>
</DxGrid>

@code {
    private List<Product> products = new();
    private List<Category> categories = new();

    protected override void OnInitialized() {
        products = DataService.GetProducts().ToList();
        categories = DataService.GetCategories().ToList();
    }

    void OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
        if (e.DataItem is Product product)
            products.Remove(product);
    }

    void OnEditModelSaving(GridEditModelSavingEventArgs e) {
        var editModel = (Product)e.EditModel;
        if (e.IsNew)
            products.Add(editModel);
        else
            e.CopyChangesToDataItem();
    }
}

Model.cs

using System.Collections.ObjectModel;

public class Category {
    public int CategoryID { get; set; }
    public string CategoryName { get; set; } = string.Empty;
    public string? Description { get; set; }
}

public class Customer(int id, string? firstName, string? lastName, string? country, string? city, string? address, string? phone, string? postalCode) {
    public Customer() : this(-1, null, null, null, null, null, null, null) {
    }
    public int Id { get; set; } = id;
    public string? FirstName { get; set; } = firstName;
    public string? LastName { get; set; } = lastName;
    public string? Country { get; set; } = country;
    public string? City { get; set; } = city;
    public string? Address { get; set; } = address;
    public string? Phone { get; set; } = phone;
    public string? PostalCode { get; set; } = postalCode;
    public virtual ObservableCollection<Order> Orders { get; set; } = new ObservableCollection<Order>();

    public string FullName {
        get => $"{FirstName} {LastName}";
    }
    public override string ToString() => FullName;
}

public enum OrderState {
    Draft,
    Shipping,
    Paid,
    Processed
}

public class Order {
    public int Id { get; set; }
    public virtual Customer? Customer { get; set; }
    public DateTime OrderDate { get; set; }
    public virtual ObservableCollection<OrderItem> Items { get; set; } = new();

    public int ItemsCount { get => Items.Count; }
    public decimal TotalAmount { get => Items.Sum(d => d.Amount); }
}

public class OrderItem {
    public int Id { get; set; }
    public int Quantity { get; set; }
    public virtual Order? Order { get; set; }
    public virtual Product? Product { get; set; }
    public decimal Amount {
        get { return (Product != null) ? (Quantity * Product.UnitPrice) : 0; }
    }
}

public class Product() {
    public int ProductID { get; set; }
    public string ProductName { get; set; } = string.Empty;
    public int? SupplierID { get; set; }
    public int? CategoryID { get; set; }
    public string? QuantityPerUnit { get; set; }
    public decimal UnitPrice { get; set; }
    public short? UnitsInStock { get; set; }
    public short? UnitsOnOrder { get; set; }
    public short? ReorderLevel { get; set; }
    public bool Discontinued { get; set; }
    public DateTime? RestockDate { get; set; }
}

DataService.cs

using System.Collections.ObjectModel;

public class DataService {
    List<Customer> customers = [
        new(1, "John", "Doe", "USA", "Homesville", "123 Home Lane", "[phone]", "55555"),
        new(2, "Sam", "Hill", "Germany", "Berlin", "Friedrichstraße 123", "[phone]", "10117"),
        new(3, "Karen", "Holmes", "USA", "Hillsville", "45 Hill St.", "[phone]", "44444"),
        new(4, "Bobbie", "Valentine", "Germany", "Munich", "Maximilianstraße 45", "[phone]", "80539"),
        new(5, "Jennie", "Fuller", "Germany", "Hamburg", "Reeperbahn 89", "[phone]", "20359"),
        new(6, "Albert", "Menendez", "USA", "Chicago", "933 Heart St. Suite", "[phone]", "9900"),
        new(7, "Frank", "Frankson", "France", "Paris", "25 Rue de Rivoli", "[phone]", "75004"),
        new(8, "Christa", "Christie", "UK", "London", "221B Baker Street", "[phone]", "NW1 6XE"),
        new(9, "Jimmie", "Jones", "USA", "Newman", "900 Newman Center.", "[phone]", "89123"),
        new(10, "Alfred", "Newman", "Germany", "Frankfurt", "Goethestraße 10", "[phone]", "60313"),
        new(11, "Benjamin", "Johnson", "UK", "Manchester", "50 Deansgate", "[phone]", "M3 2BW"),
        new(12, "Alex", "James", "USA", "Los Angeles", "349 Graphic Design L", "[phone]", "12211"),
        new(13, "Beau", "Alessandro", "UK", "Birmingham", "30 New Street", "[phone]", "B2 4ND"),
        new(14, "Bruce", "Campbell", "USA", "San Francisco", "350 Market Street", "[phone]", "94103"),
        new(15, "Cindy", "Haneline", "USA", "Houston", "600 Main Street", "[phone]", "77002"),
        new(16, "Andrea", "Deville", "France", "Bordeaux", "14 Cours de l'Intendance", "[phone]", "33000"),
        new(17, "Anita", "Ryan", "UK", "Cardiff", "30 Castle Street", "[phone]", "CF10 1BT"),
        new(18, "George", "Bunkelman", "UK", "Liverpool", "100 Albert Dock", "[phone]", "L3 4AA"),
        new(19, "Anita", "Cardle", "USA", "Seattle", "1200 Pine Street", "[phone]", "98101"),
        new(20, "Andrew", "Carter", "Germany", "Stuttgart", "Königstraße 20", "[phone]", "70173"),
        new(21, "Almas", "Bunch", "USA", "Boston", "75 Beacon Street", "[phone]", "02108"),
        new(22, "Abigail", "Hazel", "UK", "Glasgow", "75 Buchanan Street", "[phone]", "G1 3HL"),
        new(23, "Anthony", "Vicars", "Germany", "Düsseldorf", "Königsallee 85", "[phone]", "40212"),
        new(24, "Dora", "Geeter", "UK", "Bristol", "20 Queen Square", "[phone]", "BS1 4ND"),
        new(25, "Anthony", "Boyd", "USA", "Denver", "1500 Blake Street", "[phone]", "80202"),
        new(26, "Dora", "Catto", "USA", "Atlanta", "200 Peachtree Street", "[phone]", "30303"),
    ];
    static DateTime restockDate = DateTime.Today.AddMonths(1);
    List<Product> products = [
        new Product { ProductID = 1, ProductName = "Chai", SupplierID = 1, CategoryID = 1, QuantityPerUnit = "10 boxes x 20 bags", UnitPrice = 18.00m, UnitsInStock = 39, UnitsOnOrder = 0, ReorderLevel = 10, Discontinued = false },
        new Product { ProductID = 2, ProductName = "Chang", SupplierID = 1, CategoryID = 1, QuantityPerUnit = "24 - 12 oz bottles", UnitPrice = 19.00m, UnitsInStock = 17, UnitsOnOrder = 40, ReorderLevel = 25, Discontinued = false, RestockDate = restockDate },
        new Product { ProductID = 3, ProductName = "Aniseed Syrup", SupplierID = 1, CategoryID = 2, QuantityPerUnit = "12 - 550 ml bottles", UnitPrice = 10.00m, UnitsInStock = 13, UnitsOnOrder = 70, ReorderLevel = 25, Discontinued = false, RestockDate = restockDate },
        new Product { ProductID = 4, ProductName = "Chef Anton's Cajun Seasoning", SupplierID = 2, CategoryID = 2, QuantityPerUnit = "48 - 6 oz jars", UnitPrice = 22.00m, UnitsInStock = 53, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 5, ProductName = "Chef Anton's Gumbo Mix", SupplierID = 2, CategoryID = 2, QuantityPerUnit = "36 boxes", UnitPrice = 21.35m, UnitsInStock = 0, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = true },
        new Product { ProductID = 6, ProductName = "Grandma's Boysenberry Spread", SupplierID = 3, CategoryID = 2, QuantityPerUnit = "12 - 8 oz jars", UnitPrice = 25.00m, UnitsInStock = 120, UnitsOnOrder = 0, ReorderLevel = 25, Discontinued = false },
        new Product { ProductID = 7, ProductName = "Uncle Bob's Organic Dried Pears", SupplierID = 3, CategoryID = 7, QuantityPerUnit = "12 - 1 lb pkgs.", UnitPrice = 30.00m, UnitsInStock = 15, UnitsOnOrder = 0, ReorderLevel = 10, Discontinued = false, RestockDate = restockDate },
        new Product { ProductID = 8, ProductName = "Northwoods Cranberry Sauce", SupplierID = 3, CategoryID = 2, QuantityPerUnit = "12 - 12 oz jars", UnitPrice = 40.00m, UnitsInStock = 6, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false, RestockDate = restockDate },
        new Product { ProductID = 9, ProductName = "Mishi Kobe Niku", SupplierID = 4, CategoryID = 6, QuantityPerUnit = "18 - 500 g pkgs.", UnitPrice = 97.00m, UnitsInStock = 29, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = true },
        new Product { ProductID = 10, ProductName = "Ikura", SupplierID = 4, CategoryID = 8, QuantityPerUnit = "12 - 200 ml jars", UnitPrice = 31.00m, UnitsInStock = 31, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 11, ProductName = "Queso Cabrales", SupplierID = 5, CategoryID = 4, QuantityPerUnit = "1 kg pkg.", UnitPrice = 21.00m, UnitsInStock = 22, UnitsOnOrder = 30, ReorderLevel = 30, Discontinued = false },
        new Product { ProductID = 12, ProductName = "Queso Manchego La Pastora", SupplierID = 5, CategoryID = 4, QuantityPerUnit = "10 - 500 g pkgs.", UnitPrice = 38.00m, UnitsInStock = 86, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 13, ProductName = "Konbu", SupplierID = 6, CategoryID = 8, QuantityPerUnit = "2 kg box", UnitPrice = 6.00m, UnitsInStock = 24, UnitsOnOrder = 0, ReorderLevel = 5, Discontinued = false },
        new Product { ProductID = 14, ProductName = "Tofu", SupplierID = 6, CategoryID = 7, QuantityPerUnit = "40 - 100 g pkgs.", UnitPrice = 23.25m, UnitsInStock = 35, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 15, ProductName = "Genen Shouyu", SupplierID = 6, CategoryID = 2, QuantityPerUnit = "24 - 250 ml bottles", UnitPrice = 15.50m, UnitsInStock = 39, UnitsOnOrder = 0, ReorderLevel = 5, Discontinued = false },
        new Product { ProductID = 16, ProductName = "Pavlova", SupplierID = 7, CategoryID = 3, QuantityPerUnit = "32 - 500 g boxes", UnitPrice = 17.45m, UnitsInStock = 29, UnitsOnOrder = 0, ReorderLevel = 10, Discontinued = false },
        new Product { ProductID = 17, ProductName = "Alice Mutton", SupplierID = 7, CategoryID = 6, QuantityPerUnit = "20 - 1 kg tins", UnitPrice = 39.00m, UnitsInStock = 0, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = true },
        new Product { ProductID = 18, ProductName = "Carnarvon Tigers", SupplierID = 7, CategoryID = 8, QuantityPerUnit = "16 kg pkg.", UnitPrice = 62.50m, UnitsInStock = 42, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 19, ProductName = "Teatime Chocolate Biscuits", SupplierID = 8, CategoryID = 3, QuantityPerUnit = "10 boxes x 12 pieces", UnitPrice = 9.20m, UnitsInStock = 25, UnitsOnOrder = 0, ReorderLevel = 5, Discontinued = false },
        new Product { ProductID = 20, ProductName = "Sir Rodney's Marmalade", SupplierID = 8, CategoryID = 3, QuantityPerUnit = "30 gift boxes", UnitPrice = 81.00m, UnitsInStock = 40, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false }
    ];
    List<Category> categories = [
        new Category { CategoryID = 1, CategoryName = "Beverages", Description = "Soft drinks, coffees, teas, beers, and ales" },
        new Category { CategoryID = 2, CategoryName = "Condiments", Description = "Sweet and savory sauces, relishes, spreads, and seasonings" },
        new Category { CategoryID = 3, CategoryName = "Confections", Description = "Desserts, candies, and sweet breads" },
        new Category { CategoryID = 4, CategoryName = "Dairy Products", Description = "Cheeses" },
        new Category { CategoryID = 5, CategoryName = "Grains/Cereals", Description = "Breads, crackers, pasta, and cereal" },
        new Category { CategoryID = 6, CategoryName = "Meat/Poultry", Description = "Prepared meats" },
        new Category { CategoryID = 7, CategoryName = "Produce", Description = "Dried fruit and bean curd" },
        new Category { CategoryID = 8, CategoryName = "Seafood", Description = "Seaweed and fish" }
    ];
    List<Order> orders;

    public DataService() {
        orders = GenerateOrders(150);
    }
    public IEnumerable<Customer> GetCustomers() => customers;
    public IEnumerable<Product> GetProducts() => products;
    public IEnumerable<Category> GetCategories() => categories;
    public IEnumerable<Order> GetOrders() => orders;
    List<Order> GenerateOrders(int count) {
        Random random = new Random();
        var generatedOrders = new List<Order>();
        for (int i = 1; i <= count; i++) {
            var customer = customers[random.Next(customers.Count)];
            var order = new Order {
                Id = i,
                Customer = customer,
                OrderDate = DateTime.Now.AddDays(-random.Next(1, 500)),
                Items = new ObservableCollection<OrderItem>()
            };

            int itemsCount = random.Next(1, 5);
            for (int j = 0; j < itemsCount; j++) {
                var product = products[random.Next(products.Count)];
                order.Items.Add(new OrderItem {
                    Id = i * 10 + j,
                    Order = order,
                    Product = product,
                    Quantity = random.Next(1, 10)
                });
            }

            customer.Orders.Add(order);
            generatedOrders.Add(order);
        }
        return generatedOrders;
    }
}

Program.cs

// ...
builder.Services.AddScoped<DataService>();

Use Different Edit Modes for Add and Edit Operations

The following code snippet displays a pop-up edit form for new rows. Users can edit individual cells in existing rows directly with in-place editors:

Razor

@inject DataService DataService

<DxGrid @ref="Grid"
        Data="@products"
        EditMode="@editMode"
        DataItemDeleting="OnDataItemDeleting"
        EditStart="OnEditStart"
        EditCanceling="OnEditCanceling"
        EditModelSaving="OnEditModelSaving">
    <Columns>
        <DxGridCommandColumn EditButtonVisible="false"
                             CancelButtonVisible="false"
                             SaveButtonVisible="false" />
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="QuantityPerUnit" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" />
        <DxGridDataColumn FieldName="Discontinued" />
    </Columns>
    <EditFormTemplate Context="editFormContext">
        <DxFormLayout>
            <DxFormLayoutItem Caption="Product Name:" ColSpanMd="6">
                @editFormContext.GetEditor("ProductName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Quantity per Unit:" ColSpanMd="6">
                @editFormContext.GetEditor("QuantityPerUnit")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Unit Price:" ColSpanMd="6">
                @editFormContext.GetEditor("UnitPrice")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Discontinued:" ColSpanMd="6">
                @editFormContext.GetEditor("Discontinued")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

@code {
    IGrid Grid { get; set; }
    private GridEditMode editMode = GridEditMode.EditCell;
    private List<Product> products = new();
    private List<Category> categories = new();

    protected override void OnInitialized() {
        products = DataService.GetProducts().ToList();
        categories = DataService.GetCategories().ToList();
    }

    void OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
        if (e.DataItem is Product product)
            products.Remove(product);
    }

    void OnEditStart(GridEditStartEventArgs e) {
        SetEditMode(e.IsNew ? GridEditMode.PopupEditForm : GridEditMode.EditCell);
    }

    void OnEditCanceling(GridEditCancelingEventArgs e) {
        SetEditMode(GridEditMode.EditCell);
    }

    void OnEditModelSaving(GridEditModelSavingEventArgs e) {
        var editModel = (Product)e.EditModel;
        if (e.IsNew)
            products.Add(editModel);
        else
            e.CopyChangesToDataItem();

        SetEditMode(GridEditMode.EditCell);
    }

    void SetEditMode(GridEditMode mode) {
        if (editMode == mode) return;
        Grid.BeginUpdate();
        editMode = mode;
        Grid.EndUpdate();
    }
}

Model.cs

using System.Collections.ObjectModel;

public class Category {
    public int CategoryID { get; set; }
    public string CategoryName { get; set; } = string.Empty;
    public string? Description { get; set; }
}

public class Customer(int id, string? firstName, string? lastName, string? country, string? city, string? address, string? phone, string? postalCode) {
    public Customer() : this(-1, null, null, null, null, null, null, null) {
    }
    public int Id { get; set; } = id;
    public string? FirstName { get; set; } = firstName;
    public string? LastName { get; set; } = lastName;
    public string? Country { get; set; } = country;
    public string? City { get; set; } = city;
    public string? Address { get; set; } = address;
    public string? Phone { get; set; } = phone;
    public string? PostalCode { get; set; } = postalCode;
    public virtual ObservableCollection<Order> Orders { get; set; } = new ObservableCollection<Order>();

    public string FullName {
        get => $"{FirstName} {LastName}";
    }
    public override string ToString() => FullName;
}

public enum OrderState {
    Draft,
    Shipping,
    Paid,
    Processed
}

public class Order {
    public int Id { get; set; }
    public virtual Customer? Customer { get; set; }
    public DateTime OrderDate { get; set; }
    public virtual ObservableCollection<OrderItem> Items { get; set; } = new();

    public int ItemsCount { get => Items.Count; }
    public decimal TotalAmount { get => Items.Sum(d => d.Amount); }
}

public class OrderItem {
    public int Id { get; set; }
    public int Quantity { get; set; }
    public virtual Order? Order { get; set; }
    public virtual Product? Product { get; set; }
    public decimal Amount {
        get { return (Product != null) ? (Quantity * Product.UnitPrice) : 0; }
    }
}

public class Product() {
    public int ProductID { get; set; }
    public string ProductName { get; set; } = string.Empty;
    public int? SupplierID { get; set; }
    public int? CategoryID { get; set; }
    public string? QuantityPerUnit { get; set; }
    public decimal UnitPrice { get; set; }
    public short? UnitsInStock { get; set; }
    public short? UnitsOnOrder { get; set; }
    public short? ReorderLevel { get; set; }
    public bool Discontinued { get; set; }
    public DateTime? RestockDate { get; set; }
}

DataService.cs

using System.Collections.ObjectModel;

public class DataService {
    List<Customer> customers = [
        new(1, "John", "Doe", "USA", "Homesville", "123 Home Lane", "[phone]", "55555"),
        new(2, "Sam", "Hill", "Germany", "Berlin", "Friedrichstraße 123", "[phone]", "10117"),
        new(3, "Karen", "Holmes", "USA", "Hillsville", "45 Hill St.", "[phone]", "44444"),
        new(4, "Bobbie", "Valentine", "Germany", "Munich", "Maximilianstraße 45", "[phone]", "80539"),
        new(5, "Jennie", "Fuller", "Germany", "Hamburg", "Reeperbahn 89", "[phone]", "20359"),
        new(6, "Albert", "Menendez", "USA", "Chicago", "933 Heart St. Suite", "[phone]", "9900"),
        new(7, "Frank", "Frankson", "France", "Paris", "25 Rue de Rivoli", "[phone]", "75004"),
        new(8, "Christa", "Christie", "UK", "London", "221B Baker Street", "[phone]", "NW1 6XE"),
        new(9, "Jimmie", "Jones", "USA", "Newman", "900 Newman Center.", "[phone]", "89123"),
        new(10, "Alfred", "Newman", "Germany", "Frankfurt", "Goethestraße 10", "[phone]", "60313"),
        new(11, "Benjamin", "Johnson", "UK", "Manchester", "50 Deansgate", "[phone]", "M3 2BW"),
        new(12, "Alex", "James", "USA", "Los Angeles", "349 Graphic Design L", "[phone]", "12211"),
        new(13, "Beau", "Alessandro", "UK", "Birmingham", "30 New Street", "[phone]", "B2 4ND"),
        new(14, "Bruce", "Campbell", "USA", "San Francisco", "350 Market Street", "[phone]", "94103"),
        new(15, "Cindy", "Haneline", "USA", "Houston", "600 Main Street", "[phone]", "77002"),
        new(16, "Andrea", "Deville", "France", "Bordeaux", "14 Cours de l'Intendance", "[phone]", "33000"),
        new(17, "Anita", "Ryan", "UK", "Cardiff", "30 Castle Street", "[phone]", "CF10 1BT"),
        new(18, "George", "Bunkelman", "UK", "Liverpool", "100 Albert Dock", "[phone]", "L3 4AA"),
        new(19, "Anita", "Cardle", "USA", "Seattle", "1200 Pine Street", "[phone]", "98101"),
        new(20, "Andrew", "Carter", "Germany", "Stuttgart", "Königstraße 20", "[phone]", "70173"),
        new(21, "Almas", "Bunch", "USA", "Boston", "75 Beacon Street", "[phone]", "02108"),
        new(22, "Abigail", "Hazel", "UK", "Glasgow", "75 Buchanan Street", "[phone]", "G1 3HL"),
        new(23, "Anthony", "Vicars", "Germany", "Düsseldorf", "Königsallee 85", "[phone]", "40212"),
        new(24, "Dora", "Geeter", "UK", "Bristol", "20 Queen Square", "[phone]", "BS1 4ND"),
        new(25, "Anthony", "Boyd", "USA", "Denver", "1500 Blake Street", "[phone]", "80202"),
        new(26, "Dora", "Catto", "USA", "Atlanta", "200 Peachtree Street", "[phone]", "30303"),
    ];
    static DateTime restockDate = DateTime.Today.AddMonths(1);
    List<Product> products = [
        new Product { ProductID = 1, ProductName = "Chai", SupplierID = 1, CategoryID = 1, QuantityPerUnit = "10 boxes x 20 bags", UnitPrice = 18.00m, UnitsInStock = 39, UnitsOnOrder = 0, ReorderLevel = 10, Discontinued = false },
        new Product { ProductID = 2, ProductName = "Chang", SupplierID = 1, CategoryID = 1, QuantityPerUnit = "24 - 12 oz bottles", UnitPrice = 19.00m, UnitsInStock = 17, UnitsOnOrder = 40, ReorderLevel = 25, Discontinued = false, RestockDate = restockDate },
        new Product { ProductID = 3, ProductName = "Aniseed Syrup", SupplierID = 1, CategoryID = 2, QuantityPerUnit = "12 - 550 ml bottles", UnitPrice = 10.00m, UnitsInStock = 13, UnitsOnOrder = 70, ReorderLevel = 25, Discontinued = false, RestockDate = restockDate },
        new Product { ProductID = 4, ProductName = "Chef Anton's Cajun Seasoning", SupplierID = 2, CategoryID = 2, QuantityPerUnit = "48 - 6 oz jars", UnitPrice = 22.00m, UnitsInStock = 53, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 5, ProductName = "Chef Anton's Gumbo Mix", SupplierID = 2, CategoryID = 2, QuantityPerUnit = "36 boxes", UnitPrice = 21.35m, UnitsInStock = 0, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = true },
        new Product { ProductID = 6, ProductName = "Grandma's Boysenberry Spread", SupplierID = 3, CategoryID = 2, QuantityPerUnit = "12 - 8 oz jars", UnitPrice = 25.00m, UnitsInStock = 120, UnitsOnOrder = 0, ReorderLevel = 25, Discontinued = false },
        new Product { ProductID = 7, ProductName = "Uncle Bob's Organic Dried Pears", SupplierID = 3, CategoryID = 7, QuantityPerUnit = "12 - 1 lb pkgs.", UnitPrice = 30.00m, UnitsInStock = 15, UnitsOnOrder = 0, ReorderLevel = 10, Discontinued = false, RestockDate = restockDate },
        new Product { ProductID = 8, ProductName = "Northwoods Cranberry Sauce", SupplierID = 3, CategoryID = 2, QuantityPerUnit = "12 - 12 oz jars", UnitPrice = 40.00m, UnitsInStock = 6, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false, RestockDate = restockDate },
        new Product { ProductID = 9, ProductName = "Mishi Kobe Niku", SupplierID = 4, CategoryID = 6, QuantityPerUnit = "18 - 500 g pkgs.", UnitPrice = 97.00m, UnitsInStock = 29, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = true },
        new Product { ProductID = 10, ProductName = "Ikura", SupplierID = 4, CategoryID = 8, QuantityPerUnit = "12 - 200 ml jars", UnitPrice = 31.00m, UnitsInStock = 31, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 11, ProductName = "Queso Cabrales", SupplierID = 5, CategoryID = 4, QuantityPerUnit = "1 kg pkg.", UnitPrice = 21.00m, UnitsInStock = 22, UnitsOnOrder = 30, ReorderLevel = 30, Discontinued = false },
        new Product { ProductID = 12, ProductName = "Queso Manchego La Pastora", SupplierID = 5, CategoryID = 4, QuantityPerUnit = "10 - 500 g pkgs.", UnitPrice = 38.00m, UnitsInStock = 86, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 13, ProductName = "Konbu", SupplierID = 6, CategoryID = 8, QuantityPerUnit = "2 kg box", UnitPrice = 6.00m, UnitsInStock = 24, UnitsOnOrder = 0, ReorderLevel = 5, Discontinued = false },
        new Product { ProductID = 14, ProductName = "Tofu", SupplierID = 6, CategoryID = 7, QuantityPerUnit = "40 - 100 g pkgs.", UnitPrice = 23.25m, UnitsInStock = 35, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 15, ProductName = "Genen Shouyu", SupplierID = 6, CategoryID = 2, QuantityPerUnit = "24 - 250 ml bottles", UnitPrice = 15.50m, UnitsInStock = 39, UnitsOnOrder = 0, ReorderLevel = 5, Discontinued = false },
        new Product { ProductID = 16, ProductName = "Pavlova", SupplierID = 7, CategoryID = 3, QuantityPerUnit = "32 - 500 g boxes", UnitPrice = 17.45m, UnitsInStock = 29, UnitsOnOrder = 0, ReorderLevel = 10, Discontinued = false },
        new Product { ProductID = 17, ProductName = "Alice Mutton", SupplierID = 7, CategoryID = 6, QuantityPerUnit = "20 - 1 kg tins", UnitPrice = 39.00m, UnitsInStock = 0, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = true },
        new Product { ProductID = 18, ProductName = "Carnarvon Tigers", SupplierID = 7, CategoryID = 8, QuantityPerUnit = "16 kg pkg.", UnitPrice = 62.50m, UnitsInStock = 42, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false },
        new Product { ProductID = 19, ProductName = "Teatime Chocolate Biscuits", SupplierID = 8, CategoryID = 3, QuantityPerUnit = "10 boxes x 12 pieces", UnitPrice = 9.20m, UnitsInStock = 25, UnitsOnOrder = 0, ReorderLevel = 5, Discontinued = false },
        new Product { ProductID = 20, ProductName = "Sir Rodney's Marmalade", SupplierID = 8, CategoryID = 3, QuantityPerUnit = "30 gift boxes", UnitPrice = 81.00m, UnitsInStock = 40, UnitsOnOrder = 0, ReorderLevel = 0, Discontinued = false }
    ];
    List<Category> categories = [
        new Category { CategoryID = 1, CategoryName = "Beverages", Description = "Soft drinks, coffees, teas, beers, and ales" },
        new Category { CategoryID = 2, CategoryName = "Condiments", Description = "Sweet and savory sauces, relishes, spreads, and seasonings" },
        new Category { CategoryID = 3, CategoryName = "Confections", Description = "Desserts, candies, and sweet breads" },
        new Category { CategoryID = 4, CategoryName = "Dairy Products", Description = "Cheeses" },
        new Category { CategoryID = 5, CategoryName = "Grains/Cereals", Description = "Breads, crackers, pasta, and cereal" },
        new Category { CategoryID = 6, CategoryName = "Meat/Poultry", Description = "Prepared meats" },
        new Category { CategoryID = 7, CategoryName = "Produce", Description = "Dried fruit and bean curd" },
        new Category { CategoryID = 8, CategoryName = "Seafood", Description = "Seaweed and fish" }
    ];
    List<Order> orders;

    public DataService() {
        orders = GenerateOrders(150);
    }
    public IEnumerable<Customer> GetCustomers() => customers;
    public IEnumerable<Product> GetProducts() => products;
    public IEnumerable<Category> GetCategories() => categories;
    public IEnumerable<Order> GetOrders() => orders;
    List<Order> GenerateOrders(int count) {
        Random random = new Random();
        var generatedOrders = new List<Order>();
        for (int i = 1; i <= count; i++) {
            var customer = customers[random.Next(customers.Count)];
            var order = new Order {
                Id = i,
                Customer = customer,
                OrderDate = DateTime.Now.AddDays(-random.Next(1, 500)),
                Items = new ObservableCollection<OrderItem>()
            };

            int itemsCount = random.Next(1, 5);
            for (int j = 0; j < itemsCount; j++) {
                var product = products[random.Next(products.Count)];
                order.Items.Add(new OrderItem {
                    Id = i * 10 + j,
                    Order = order,
                    Product = product,
                    Quantity = random.Next(1, 10)
                });
            }

            customer.Orders.Add(order);
            generatedOrders.Add(order);
        }
        return generatedOrders;
    }
}

Program.cs

// ...
builder.Services.AddScoped<DataService>();

Implement Cascading ComboBoxes

To implement cascading cell editors, place DxComboBox components in the CellEditTemplate properties of the related columns. Bind each ComboBox to the corresponding edit model field and use the Data property to populate cascading editors with data.

In the following example, the Country ComboBox lists countries. When a user selects a country, the ValueChanged handler updates the Country field and clears the current City value. The City ComboBox filters its bound data source based on the selected country and displays matching cities.

Razor

@inject NwindDataService NwindDataService
@inject WorldcitiesDataService WorldcitiesDataService

<DxGrid Data="DataSource"
        KeyFieldName="SupplierId"
        EditModelSaving="Grid_EditModelSaving"
        DataItemDeleting="Grid_DataItemDeleting"
        EditMode="GridEditMode.EditCell">
    <Columns>
        <DxGridCommandColumn EditButtonVisible="false"
                             CancelButtonVisible="false"
                             SaveButtonVisible="false" />
        <DxGridDataColumn FieldName="CompanyName" />
        <DxGridDataColumn FieldName="ContactName" />
        <DxGridDataColumn FieldName="Country" Width="10%">
            <CellEditTemplate Context="cellEditContext">
                @{
                    var supplier = (Supplier)cellEditContext.EditModel;
                }
                <DxComboBox Data="@Countries"
                            NullText="Select Country..."
                            SearchMode="@ListSearchMode.AutoSearch"
                            SearchFilterCondition="@ListSearchFilterCondition.Contains"
                            TextFieldName="CountryName"
                            ValueFieldName="CountryName"
                            ValueExpression="() => supplier.Country"
                            Value="@supplier.Country"
                            ValueChanged="(string newCellValue) => {
                                supplier.Country = newCellValue;
                                supplier.City = null;
                            }">
                </DxComboBox>
            </CellEditTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="City" Width="10%">
            <CellEditTemplate Context="cellEditContext">
                @{
                    var supplier = (Supplier)cellEditContext.EditModel;
                    var countryId = Countries.Where(c => c.CountryName == supplier.Country)
                                             .FirstOrDefault()?.CountryId;
                    var cities = Cities.Where(x => x.CountryId == countryId);
                }
                <DxComboBox Data="@cities"
                            NullText="Select City..."
                            SearchMode="@ListSearchMode.AutoSearch"
                            SearchFilterCondition="@ListSearchFilterCondition.Contains"
                            @bind-Value="@supplier.City"
                            TextFieldName="CityName"
                            ValueFieldName="CityName">
                </DxComboBox>
            </CellEditTemplate>
        </DxGridDataColumn>
    </Columns>

</DxGrid>

@code {
    IEnumerable<Supplier> DataSource { get; set; }
    IEnumerable<Country> Countries { get; set; }
    IEnumerable<City> Cities { get; set; }

    protected override async Task OnInitializedAsync() {
        DataSource = await NwindDataService.GetSuppliersEditableAsync();
        Countries = await WorldcitiesDataService.GetCountriesAsync();
        Cities = await WorldcitiesDataService.GetCitiesAsync();
    }
    async Task Grid_EditModelSaving(GridEditModelSavingEventArgs e) {
        if (e.IsNew)
            await NwindDataService.InsertSupplierAsync((Supplier)e.EditModel);
        else
            await NwindDataService.UpdateSupplierAsync((Supplier)e.DataItem, (Supplier)e.EditModel);
        await UpdateDataAsync();
    }
    async Task Grid_DataItemDeleting(GridDataItemDeletingEventArgs e) {
        await NwindDataService.RemoveSupplierAsync((Supplier)e.DataItem);
        await UpdateDataAsync();
    }
    async Task UpdateDataAsync() {
        DataSource = await NwindDataService.GetSuppliersEditableAsync();
    }
}

Supplier.cs

using System;
using System.Collections.Generic;

namespace BlazorDemo.Data.Northwind {
    public partial class Supplier {
        public Supplier() {
            Products = new HashSet<Product>();
        }
        public int SupplierId { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string ContactTitle { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Phone { get; set; }
        public string Fax { get; set; }
        public string HomePage { get; set; }
        public virtual ICollection<Product> Products { get; set; }
    }
}

Country.cs

namespace BlazorDemo.Data.Worldcities {
    public class Country {
        public int CountryId { get; set; }
        public string CountryName { get; set; }
        public int CapitalId { get; set; }
    }
}

City.cs

namespace BlazorDemo.Data.Worldcities {
    public class City {
        public int CityId { get; set; }
        public string CityName { get; set; }
        public int CountryId { get; set; }
    }
}