DxGrid.DataColumnCellEditTemplate Property

Allows you to replace automatically generated editors with custom content in all edit row cells displayed for data columns.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
RenderFragment<GridDataColumnCellEditTemplateContext>	The common template for data column edit cells.

Remarks

In edit row mode, the Grid displays automatically generated inline editors instead of the edited row. Editor types depend on data types of the corresponding column fields. You can use a column’s EditSettings property to customize the default column editor or replace it with another editor.

A column’s CellEditTemplate allows you to display custom content in the edit row 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.

Note

The Grid does not render automatically generated editors in edit row cells if you define DataColumnCellEditTemplate.

The Grid component renders editors in the edit row as standalone components with borders and paddings between editors and cell borders. If a cell in the edit row contains only a DevExpress Blazor editor, you can hide editor borders and render the editor so that it occupies the entire cell. For this purpose, set the Grid’s EditorRenderMode property to Integrated.

The example below demonstrates how to render edit cell editors within the <div> element when editor validation fails. You can hover the mouse pointer over the element to display a tooltip with the corresponding validation message:

Razor

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

<DxGrid @ref="Grid"
        Data="DataSource"
        KeyFieldName="EmployeeId"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
    <DataColumnCellEditTemplate>
        @{
            var employee = (EditableEmployee)context.EditModel;
        }
        <Grid_Editing_EditRowValidation_ValidationMessage EditTemplateContext="context">
            @switch(context.DataColumn.FieldName) {
                case "FirstName":
                    <DxTextBox @bind-Text="@employee.FirstName" CssClass="w-100" />
                    break;
                case "LastName":
                    <DxTextBox @bind-Text="@employee.LastName" CssClass="w-100" />
                    break;
                case "Title":
                    <DxTextBox @bind-Text="@employee.Title" CssClass="w-100" />
                    break;
                case "HireDate":
                    <DxDateEdit @bind-Date="@employee.HireDate" CssClass="w-100" />
                    break;
                default:
                    throw new NotImplementedException();
            }
        </Grid_Editing_EditRowValidation_ValidationMessage>
    </DataColumnCellEditTemplate>
</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);
    }
    // ...
}

ValidationMessage.razor

@{
    var message = GetMessage();
}
<div class="d-flex align-items-center">
    @if(!string.IsNullOrWhiteSpace(message)) {
            <div class="grid-validation-message bg-danger" title="@message">
            @ChildContent
            </div>
    }
    else
        @ChildContent
</div>

@code {
    [Parameter]
    public GridDataColumnCellEditTemplateContext EditTemplateContext { get; set; }
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    string GetMessage() {
        var field = EditTemplateContext.EditContext.Field(EditTemplateContext.DataColumn.FieldName);
        return string.Join("\n", EditTemplateContext.EditContext.GetValidationMessages(field));
    }
}

Employee.cs

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

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

Implements

DataColumnCellEditTemplate