DxDateEditSettings Class

Contains auto-generated date editor settings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxDateEditSettings :
    DxDropDownEditSettings,
    IDateEditSettings,
    IDropDownEditSettings,
    IButtonEditSettings,
    ITextEditSettings,
    IEditSettings

Remarks

The DxDateEditSettings class contains settings for auto-generated date editors displayed in the edit cells, filter row, and edit forms.

Auto-Generated Date Editor in Filter Row and Edit Cells

The Grid component automatically generates editors for columns based on their data types. For DateTime and DateTimeOffset types, the Grid generates date editors. Use DxDateEditSettings class properties to customize auto-generated date editor settings. To apply these settings, specify a DxDateEditSettings object in a column’s EditSettings property.

Note that if you specify date editor settings for a column that contains non-datetime values, these settings will have no effect and the Grid will render a read-only text box editor instead.

In the example below, the Grid renders date editors for BirthDate and HireDate columns. The HireDate column’s markup contains the DxDateEditSettings object that customizes the auto-generated editor.

Razor

<DxGrid Data="@employees" EditMode="GridEditMode.EditRow" ShowFilterRow="true">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="BirthDate" >
            <EditSettings>
                <DxDateEditSettings DisplayFormat="M" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="HireDate" />
        <DxGridDataColumn FieldName="Email" />
    </Columns>
</DxGrid>

EmployeeService.cs

public class EmployeeService {
    public Task<Employee[]> GetData() {
        List<Employee> employee = new List<Employee>();

        employee.Add(new Employee() { ID = 00156, FirstName = "Nancy", LastName = "Davolio", BirthDate = new DateTime(1978, 08, 12), HireDate= new DateTime(2002, 10, 01), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 01200, FirstName = "Andrew", LastName = "Fuller", BirthDate = new DateTime(1974, 02, 11), HireDate = new DateTime(2002, 06, 21), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 00567, FirstName = "Janet", LastName = "Leverling", BirthDate = new DateTime(1985, 06, 30), HireDate = new DateTime(2010, 07, 17), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 00168, FirstName = "Margaret", LastName = "Peacock", BirthDate = new DateTime(1990, 12, 25), HireDate = new DateTime(2014, 11, 09), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 01290, FirstName = "Steven", LastName = "Buchanan", BirthDate = new DateTime(1995, 03, 05), HireDate = new DateTime(2020, 01, 13), Email = "[e-mail]" });
        employee.Add(new Employee() { ID = 00938, FirstName = "Michael", LastName = "Suyama", BirthDate = new DateTime(1987, 02, 28), HireDate = new DateTime(2018, 03, 22), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 01098, FirstName = "Robert", LastName = "King", BirthDate = new DateTime(1992, 11, 08), HireDate = new DateTime(2018, 12, 15), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 03027, FirstName = "Laura", LastName = "Callahan", BirthDate = new DateTime(1991, 10, 18), HireDate = new DateTime(2015, 11, 03), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 00633, FirstName = "Anne", LastName = "Dodsworth", BirthDate = new DateTime(1983, 01, 21), HireDate = new DateTime(2004, 08, 21), Email= "[e-mail]" });
        return Task.FromResult(employee.ToArray());
    }
}

Employee.cs

    public class Employee {
        public int ID { get; set; }
        public string? FirstName { get; set; }
        public string? LastName { get; set; }
        public DateTime? BirthDate { get; set; }
        public DateTime? HireDate { get; set; }
        public string? Email { get; set; }
    }

Auto-Generated Date Editor in Edit Forms

You can display an auto-generated column editor in the edit form or popup edit form. Call the GetEditor(String) method to get the column editor in the edit form template.

<DxGrid Data="@employees">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="BirthDate" >
            <EditSettings>
                <DxDateEditSettings DisplayFormat="M" Format="d" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="HireDate" />
        <DxGridDataColumn FieldName="Email" />
    </Columns>
    <EditFormTemplate Context="EditFormContext">
        <DxFormLayout >
            <DxFormLayoutItem Caption="First Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("FirstName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Birth Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("BirthDate")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("LastName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("HireDate")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Email:" ColSpanMd="6">
                @EditFormContext.GetEditor("Email")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

@code {
    Employee[]? employees;
    protected override async Task OnInitializedAsync() {
        employees = await EmployeeData.GetData();
    }
}

Runtime Customization

At runtime, call the GetColumnEditSettings<T>(String) method to access settings of a date editor in the specified column.

In the code sample below, the hire date can be specified only for new employees.

@inject EmployeeService EmployeeData

<DxGrid @ref="grid" Data="@employees" PageSize="4"
        EditMode="GridEditMode.EditRow" EditStart="OnEditStart">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="BirthDate" />
        <DxGridDataColumn FieldName="HireDate" />
        <DxGridDataColumn FieldName="Email" />
    </Columns>
</DxGrid>

@code {
    IGrid grid { get; set; }
    Employee[]? employees;
    protected override async Task OnInitializedAsync() {
        employees = await EmployeeData.GetData();
    }
    void OnEditStart(GridEditStartEventArgs e) {
        var settingsHireDate = grid.GetColumnEditSettings<IDateEditSettings>("HireDate");
        grid.BeginUpdate();
        // Allows users to edit the hire date for new employees only
        settingsHireDate.Enabled = e.IsNew;
        settingsHireDate.ShowDropDownButton = e.IsNew;
        grid.EndUpdate();
    }
}

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

IDateEditSettings

IDropDownEditSettings

IButtonEditSettings

ITextEditSettings

IEditSettings

Inheritance

Object

ComponentBase

DevExpress.Blazor.Internal.BranchedRenderComponent

DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent

DxEditSettings

DxTextEditSettings

DxButtonEditSettings

DxDropDownEditSettings

DxDateEditSettings