DxGridDataColumn.EditSettings Property

Allows you to customize the editor associated with this column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.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 filter row and edit row. You can also place these editors in the edit form or pop-up edit form.

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 whose FilterMode is 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[1]	Boolean	All data types
DxComboBoxSettings	Enum	All data types
DxDateEditSettings	DateTime, DateTimeOffset	DateTime, DateTimeOffset
DxMaskedInputSettings	-	Numeric, DateTime, DateTimeOffset, TimeSpan, String
DxMemoSettings	-	String
DxSpinEditSettings	Numeric	Numeric
DxTextBoxSettings	String	String
DxTimeEditSettings	-	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.

The example below customizes editors of Birth Date and Home Phone columns:

Razor

@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory

<DxGrid @ref="Grid"
        Data="Employees"
        EditMode="GridEditMode.EditRow"
        EditorRenderMode="GridEditorRenderMode.Integrated">
    <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. The Grid replaces a checkbox editor with a combo box in the filter row.