DxTimeEditSettings Class

Contains settings of an auto-generated time editor.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxTimeEditSettings :
    DxDropDownEditSettings,
    ITimeEditSettings,
    IDropDownEditSettings,
    IButtonEditSettings,
    ITextEditSettings,
    IEditSettings

Remarks

The DxTimeEditSettings class contains settings that Grid and TreeList components use to generate time editors.

Auto-Generated Time Editor in Filter Row and Edit Cells

Grid and TreeList components automatically generate editors for columns based on their data types. For the TimeOnly type, they generate time editors. Use DxTimeEditSettings class properties to customize auto-generated time editor settings.

For DateTime and TimeSpan data types, Grid and TreeList generate date editors. You can specify a DxTimeEditSettings object in a column’s EditSettings property to replace the default date editor with a time editor. Note that if you specify time editor settings for a column that contains values of another type, these settings have no effect and the component renders a read-only text box editor instead.

In the following code snippet, the Grid renders time editors for StartTime and EndTime columns. The StartTime column’s markup contains the DxTimeEditSettings object that customizes the auto-generated editor.

Razor

<DxGrid Data="@timetable" ShowFilterRow="true"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ID" Visible="false" />
        <DxGridDataColumn FieldName="Nickname" />
        <DxGridDataColumn FieldName="StartTime">
            <EditSettings>
                <DxTimeEditSettings Format="h:mm" DisplayFormat="t" ScrollPickerFormat="tt hh mm" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="EndTime" />
    </Columns>
</DxGrid>

@code {
    Result[]? timetable;
    protected override async Task OnInitializedAsync() {
        timetable = await TimeTable.GetData();
    }
}

ResultService.cs

public class TimeTable {
    public Task<Result[]> GetData() {
        List<Result> results = new List<Result>();

        results.Add(new Result() { ID = 11156, Nickname = "Maria", StartTime= new TimeOnly(09, 01, 52), EndTime = new TimeOnly(12, 54, 57) });
        results.Add(new Result() { ID = 21200, Nickname = "Maxx", StartTime = new TimeOnly(09, 12, 36), EndTime = new TimeOnly(10, 30, 12) });
        results.Add(new Result() { ID = 23567, Nickname = "User1862", StartTime = new TimeOnly(10, 02, 43), EndTime = new TimeOnly(11, 54, 17) });
        results.Add(new Result() { ID = 34168, Nickname = "Laura", StartTime = new TimeOnly(10, 07, 58), EndTime = new TimeOnly(13, 12, 42) });
        results.Add(new Result() { ID = 51290, Nickname = "Christina", StartTime = new TimeOnly(11, 13, 10), EndTime = new TimeOnly(12, 14, 20) });
        results.Add(new Result() { ID = 56938, Nickname = "Moonlight", StartTime = new TimeOnly(12, 48, 52), EndTime = new TimeOnly(13, 52, 52) });
        results.Add(new Result() { ID = 21098, Nickname = "Fred", StartTime = new TimeOnly(13, 02, 00), EndTime = new TimeOnly(14, 03, 12) });
        results.Add(new Result() { ID = 13027, Nickname = "Fox", StartTime = new TimeOnly(13, 17, 07), EndTime = new TimeOnly(14, 07, 02) });
        results.Add(new Result() { ID = 11633, Nickname = "LEX", StartTime = new TimeOnly(14, 16, 34), EndTime = new TimeOnly(15, 01, 50) });
        return Task.FromResult(results.ToArray());
    }
}

Result.cs

    public class Result {
        public int ID { get; set; }
        public string? Nickname { get; set; }
        public TimeOnly StartTime { get; set; }
        public TimeOnly EndTime { get; set; }
    }

Auto-Generated Time 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 a column editor in the edit form template.

<DxGrid Data="@timetable" CssClass="my-grid" ShowFilterRow="true" >
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ID" Visible="false" />
        <DxGridDataColumn FieldName="Nickname" />
        <DxGridDataColumn FieldName="StartTime">
            <EditSettings>
                <DxTimeEditSettings Format="h:mm" DisplayFormat="t" ScrollPickerFormat="tt hh mm" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="EndTime">
            <EditSettings>
                <DxTimeEditSettings Format="h:mm" DisplayFormat="t" ScrollPickerFormat="tt hh mm" />
            </EditSettings>
        </DxGridDataColumn>
    </Columns>
    <EditFormTemplate Context="EditFormContext">
        <DxFormLayout >
            <DxFormLayoutItem Caption="ID:" ColSpanMd="6">
                @EditFormContext.GetEditor("ID")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Nickname:" ColSpanMd="6">
                @EditFormContext.GetEditor("Nickname")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Start Time:" ColSpanMd="6">
                @EditFormContext.GetEditor("StartTime")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="End Time:" ColSpanMd="6">
                @EditFormContext.GetEditor("EndTime")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

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

Runtime Customization

At runtime, call the GetColumnEditSettings method to access settings of the time editor in the specified column. The following code snippet dynamically disables the editor.

<DxGrid @ref="grid" Data="@timetable" EditMode="GridEditMode.EditRow" EditStart="OnEditStart">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ID" Visible="false" />
        <DxGridDataColumn FieldName="Nickname" />
        <DxGridDataColumn FieldName="StartTime">
            <EditSettings>
                <DxTimeEditSettings Format="h:mm" DisplayFormat="t" ScrollPickerFormat="tt hh mm" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="EndTime">
            <EditSettings>
                <DxTimeEditSettings Format="h:mm" DisplayFormat="t" ScrollPickerFormat="tt hh mm" />
            </EditSettings>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

@code {
    IGrid grid { get; set; }
    Result[]? timetable;
    protected override async Task OnInitializedAsync() {
        timetable = await TimeTable.GetData();
    }
    void OnEditStart(GridEditStartEventArgs e) {
        var settingsStartTime = grid.GetColumnEditSettings<ITimeEditSettings>("StartTime");
        grid.BeginUpdate();
        // Disable start time editing.
        settingsStartTime.Enabled = e.IsNew;
        settingsStartTime.ShowDropDownButton = e.IsNew;
        grid.EndUpdate();
    }
}

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

ITimeEditSettings

IDropDownEditSettings

IButtonEditSettings

ITextEditSettings

IEditSettings

Inheritance

Object

ComponentBase

DevExpress.Blazor.Internal.BranchedRenderComponent

DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent

DxEditSettings

DxTextEditSettings

DxButtonEditSettings

DxDropDownEditSettings

DxTimeEditSettings