DxGridDataColumn.EditSettings Property

Allows you to customize the editor associated with this column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.Grid.v26.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment EditSettings { get; set; }

Property Value

Type	Description
RenderFragment	A render fragment that declares cell editor settings.

Remarks

The Grid component generates and configures cell editors for columns based on associated data types. The component automatically displays column editors in the filter row and in data rows during edit operations. You can also place these editors in the edit form or pop-up edit form.

Editor Settings vs Cell Edit Template

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

Configure Editor Settings

Declare an object that contains editor settings in the <EditSettings> tag. This is how you can customize the default editor or replace it with another editor. If the editor does not support the associated data type, the Grid replaces it with a read-only text box. In the filter row, the Grid displays text box editors for all columns that have FilterMode set to DisplayText.

The table below list classes that define cell editor settings and the corresponding data types:

Editor Settings	Generated for Data Types	Supported Data Types
DxCheckBoxSettings[2]	Boolean	All data types
DxComboBoxSettings	Enum	All data types
DxDateEditSettings	DateOnly, DateTime, DateTimeOffset	DateOnly, DateTime, DateTimeOffset
DxMaskedInputSettings	Never generated	Numeric, String, TimeSpan, TimeOnly, DateTime, DateOnly, DateTimeOffset
DxMemoSettings	Never generated	String
DxSpinEditSettings	Numeric	Numeric
DxTextBoxSettings	String	String
DxTimeEditSettings	TimeOnly	TimeOnly, TimeSpan, DateTime

Handle the Grid’s CustomizeFilterRowEditor event to customize editors in the filter row. The CustomizeDataRowEditor event allows you to customize editors displayed in data rows, edit forms, or pop-up edit forms. At runtime, call the GetColumnEditSettings<T>(String) to access and customize editor settings.

Example

The following code snippet customizes editors of Birth Date and Home Phone columns:

Razor

@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory

<DxGrid @ref="Grid"
        Data="Employees"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="BirthDate">
            <EditSettings>
                <DxDateEditSettings DisplayFormat="M" Format="d" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="HomePhone" >
            <EditSettings>
                <DxMaskedInputSettings Mask="[phone]"
                                       ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
            </EditSettings>
        </DxGridDataColumn>
    </Columns>
</DxGrid>


@code {
    NorthwindContext Northwind { get; set; }
    List<Employee> Employees { get; set; }

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

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

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

Employee.cs

public partial class Employee {
        public int EmployeeId { get; set; }
        public string LastName { get; set; }
        public string FirstName { get; set; }
        public string Title { get; set; }
        public string TitleOfCourtesy { get; set; }
        public Nullable<System.DateTime> BirthDate { get; set; }
        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";
    }

Implements

EditSettings

Footnotes

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

2. The Grid replaces a checkbox editor with a combo box in the filter row.