DxGridDataColumn.CellEditTemplate Property

Allows you to replace an automatically generated editor with custom content in the column’s edit cell.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.Grid.v26.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

In EditRow and EditCell edit modes, the Grid displays automatically generated inline editors in the edited row. Editor types depend on the data types of the corresponding column fields.

You can customize cell editors using editor settings or a cell template. Choose between these options based your scenario:

Task	Recommended Option
Display a standard cell editor[1]	Editor Settings
Customize standard editor appearance or behavior[1]	Editor Settings
Use any DevExpress or third-party component as a cell editor	Cell Edit Template
Implement advanced data binding	Cell Edit Template
Handle editor events	Cell Edit Template
Add custom buttons to an editor	Cell Edit Template
Focus an editor programmatically	Cell Edit Template

The column’s CellEditTemplate allows you to display custom content in the data column’s edit cell. To define a common cell edit template for all data columns, use the Grid’s DataColumnCellEditTemplate. Both templates include the context parameter that contains DataColumn and DataItem objects. The context’s Grid property allows you to access the Grid and its extensive API.

The following code snippet displays a date editor with custom command buttons in an edit cell:

Razor

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

<DxGrid @ref="Grid"
        Data="Data"
        KeyFieldName="EmployeeId"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate">
            <CellEditTemplate>
                @{
                    var employee = (Employee)context.EditModel;
                }
                <DxDateEdit @bind-Date="@employee.HireDate">
                    <Buttons>
                        <DxEditorButton IconCssClass="editor-icon editor-icon-chevron-left-small"
                                        Tooltip="Previous date"
                                        Position="@EditorButtonPosition.Left"
                                        Click="@(_ => employee.HireDate = employee.HireDate?.AddDays(-1))" />
                        <DxEditorButton IconCssClass="editor-icon editor-icon-chevron-right-small"
                                        Tooltip="Next date"
                                        Position="@EditorButtonPosition.Right"
                                        Click="@(_ => employee.HireDate = employee.HireDate?.AddDays(1))" />
                    </Buttons>
                </DxDateEdit>
            </CellEditTemplate>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

@code {
    IEnumerable<object> Data { get; set; }
    NorthwindContext Northwind { get; set; }
    DateTime DateTimeValue { get; set; } = DateTime.Today;
    bool CalendarVisible { get; set; }

    void OnChangeDayButtonClick(bool isAdd) {
        CalendarVisible = false;
        DateTimeValue = DateTimeValue.AddDays(isAdd ? 1 : -1);
    }
    // ...
}

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.mdf");
    options.UseSqlServer("Server=(localdb)\\MSSQLLocalDB;Integrated Security=true;AttachDbFileName=" + dbPath);
});

CSS

.editor-icon {
    width: 1rem;
    height: 1rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.editor-icon-chevron-right-small {
    -webkit-mask-image: url("../images/icons/chevron-right-small.svg");
    mask-image: url("../images/icons/chevron-right-small.svg");
}

.editor-icon-chevron-left-small {
    -webkit-mask-image: url("../images/icons/chevron-left-small.svg");
    mask-image: url("../images/icons/chevron-left-small.svg");
}

For additional information about templates in the Grid component, refer to the following topic: Templates in Blazor Grid.

Implements

CellEditTemplate

Footnotes

1. Standard editors include DevExpress Blazor CheckBox, ComboBox, Date Edit, Masked Input, Memo, Spin Edit, Text Box, and TimeEdit components.