DxGridDataColumn.CellEditTemplate Property

Specifies a template used to display a data column‘s edit cell.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<GridDataColumnCellEditTemplateContext> CellEditTemplate { get; set; }

Property Value

Type	Description
RenderFragment<GridDataColumnCellEditTemplateContext>	The template for the data column’s edit cell.

Remarks

Users can employ an inline edit row or invoke a standard or pop-up edit form to edit data in the Grid. The EditMode property specifies the current edit mode.

In EditRow mode, specify the CellEditTemplate for each data column to define Grid edit row content. To define a common cell edit template for all data columns, use the DataColumnCellEditTemplate.

Use the template’s context parameter to access the DataColumn and DataItem objects. You can also obtain the Grid object and call the edit-related methods (for example, SaveChangesAsync() or CancelEditAsync()).

The code below activates the EditRow mode and defines the CellEditTemplate for each data column.

Razor

    @inject NwindDataService NwindDataService

    <DxGrid @ref="Grid"
            Data="DataSource"
            PageSize="12"
            KeyFieldName="EmployeeId"
            ValidationEnabled="false"
            CustomizeEditModel="Grid_CustomizeEditModel"
            EditModelSaving="Grid_EditModelSaving"
            DataItemDeleting="Grid_DataItemDeleting"
            PopupEditFormCssClass="pw-800"
            EditMode="GridEditMode.EditRow">
        <Columns>
            <DxGridCommandColumn Width="140px" />
            <DxGridDataColumn FieldName="FirstName" MinWidth="80">
                <CellEditTemplate>
                    @{
                        var employee = (EditableEmployee)context.EditModel;
                    }
                    <DxTextBox @bind-Text="@employee.FirstName"></DxTextBox>
                </CellEditTemplate>
            </DxGridDataColumn>
            <DxGridDataColumn FieldName="LastName" MinWidth="80">
                <CellEditTemplate>
                    @{
                        var employee = (EditableEmployee)context.EditModel;
                    }
                    <DxTextBox @bind-Text="@employee.LastName"></DxTextBox>
                </CellEditTemplate>
            </DxGridDataColumn>
            <DxGridDataColumn FieldName="Title" MinWidth="100">
                <CellEditTemplate>
                    @{
                        var employee = (EditableEmployee)context.EditModel;
                    }
                    <DxTextBox @bind-Text="@employee.Title"></DxTextBox>
                </CellEditTemplate>
            </DxGridDataColumn>
            <DxGridDataColumn FieldName="HireDate" Width="10%" MinWidth="80">
                <CellEditTemplate>
                    @{
                        var employee = (EditableEmployee)context.EditModel;
                    }
                    <DxDateEdit @bind-Date="@employee.HireDate"></DxDateEdit>
                </CellEditTemplate>
            </DxGridDataColumn>
        </Columns>
    </DxGrid>

@code {
    IEnumerable<EditableEmployee> DataSource { get; set; }
    IGrid Grid { get; set; }

    protected override async Task OnInitializedAsync() {
        DataSource = await NwindDataService.GetEmployeesEditableAsync();
    }
    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if(firstRender)
            await Grid.StartEditRowAsync(0);
    }
    void Grid_CustomizeEditModel(GridCustomizeEditModelEventArgs e) {
        if(e.IsNew) {
            var newEmployee = (EditableEmployee)e.EditModel;
            newEmployee.FirstName = "John";
            newEmployee.LastName = "Doe";
        }
    }
    async Task Grid_EditModelSaving(GridEditModelSavingEventArgs e) {
        if(e.IsNew)
            await NwindDataService.InsertEmployeeAsync((EditableEmployee)e.EditModel);
        else
            await NwindDataService.UpdateEmployeeAsync((EditableEmployee)e.DataItem, (EditableEmployee)e.EditModel);
        await UpdateDataAsync();
    }
    async Task Grid_DataItemDeleting(GridDataItemDeletingEventArgs e) {
        await NwindDataService.RemoveEmployeeAsync((EditableEmployee)e.DataItem);
        await UpdateDataAsync();
    }
    async Task UpdateDataAsync() {
        DataSource = await NwindDataService.GetEmployeesEditableAsync();
    }
}

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);
});

Run Demo: Edit Row

Implements

CellEditTemplate