Skip to main content
All docs
V25.1
  • DxDateEditSettings Class

    Contains auto-generated date editor settings.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.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 edit cells, filter row, inline, and pop-up edit forms.

    Auto-Generated Date Editor in Filter Row and Edit Cells

    Grid and TreeList components automatically generate editors for columns based on their data types. For DateTime, DateOnly, and DateTimeOffset types, they generate 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 component 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 inline or pop-up edit form. Call the GetEditor 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 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