DxTimeEditSettings Class

Contains settings of an auto-generated time editor.

Assembly: DevExpress.Blazor.v23.2.dll

Declaration

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

Remarks

The DxTimeEditSettings class contains settings that the Grid uses to generate time editors.

The Grid component automatically generates editors for columns based on their data types. You can replace the default column editor with a time editor for columns of the DateTime and TimeSpan data types.

If you specify time editor settings for a column that contains values of another type, the settings have no effect and the Grid renders a read-only text box editor instead.

Auto-Generated Time Editor in Filter Row and Edit Cells

Specify a DxTimeEditSettings object in a column’s EditSettings property to replace the default column editor with a time editor in the filter row and in data rows during edit operations.

<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" >
            <EditSettings>
                <DxTimeEditSettings Format="h:mm"
                                    DisplayFormat="t" 
                                    ScrollPickerFormat="tt hh mm" />
            </EditSettings>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

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

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

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

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

Grid - Time Editor

Auto-Generated Time 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="@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();
    }
}

Editors in Edit Form

Runtime Customization

At runtime, call the GetColumnEditSettings<T>(String) method to access settings of the time editor in the specified column. The example below demonstrates how to dynamically disable 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();
    }
}

Grid - Disabled Editor