Skip to main content

DxDateEditSettings Class

Contains auto-generated date editor settings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.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, DateOnly, 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 following code snippet, 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.

<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>

Modified Editors

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

Editors in Edit Form

Runtime Customization

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

In the following code snippet, 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();
    }
}

Date Edit in Grid

Inheritance

Object
ComponentBase
DevExpress.Blazor.Internal.BranchedRenderComponent
DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent
See Also