GridViewDateTimeColumn - Display both date & time pickers

[Antoine]

Hello,

Currently, if I add a GridViewDateTimeColumn into a RadGridView, I can only edit the date component and I don't have a TimePicker part, even though I choose a DateTimePicker component as EditorType property. I'm even not allowed to set the time by typing it.

I also tried to trigger it manually with the following code, without any success:

 

var startDateColumn = radGridView1.Columns["StartDate"] as GridViewDateTimeColumn;
var picker = startDateColumn?.GetDefaultEditor() as RadDateTimeEditor;
var editor = picker.EditorElement as RadDateTimeEditorElement;
editor .ShowTimePicker = true;

 

 

How can I enable both date & time editing on a GridViewDateTimeColumn?

 

Windows 10 - VS2017 - .NET Framework 4.6.1 - Telerik R1 2019 - Fluent theme

[Dess | Tech Support Engineer, Principal]

Hello, Antoine,  

In order to customize the editor in RadGridView, it is necessary to handle the CellEditorInitialized event and apply the desired changes. Please refer to the following code snippet:

private void RadForm1_Load(object sender, EventArgs e)
{
    this.ordersTableAdapter.Fill(this.nwindDataSet.Orders);

    this.radGridView1.BestFitColumns();
    GridViewDateTimeColumn dateColumn = radGridView1.Columns["OrderDate"] as GridViewDateTimeColumn;
    dateColumn.Format = DateTimePickerFormat.Custom;
    dateColumn.CustomFormat = "dd/MM/yyyy hh:mm";

    this.radGridView1.CellEditorInitialized += radGridView1_CellEditorInitialized;
}

private void radGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
{
    RadDateTimeEditor editor = e.ActiveEditor as RadDateTimeEditor;
    if (editor != null)
    {
        RadDateTimeEditorElement el = editor.EditorElement as RadDateTimeEditorElement;
        el.CalendarSize = new System.Drawing.Size(400, 300);
        el.ShowTimePicker = true;
    }
}

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Nikita]

Hi,

Thank you for info. It is working.

I have couple questions.

1. TimePicker  Theme is not same as for GridView and calendar.

2. How to set Step in TimePicker to 15 minutes.

3. Is it possible to set working hours from 9 to 21.

[Dess | Tech Support Engineer, Principal]

Hello, Nikita,  

In order to change the font of the grid cells, it is suitable to use the CellFormatting event:

private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
    e.CellElement.Font = f;
}

Font f = new Font("Arial", 10f, FontStyle.Regular);

As to the font of the RadDateTimeEditor, you can specify the font when the editor is initialized as follows:

Font f = new Font("Arial", 10f, FontStyle.Regular);

private void radGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
{
    RadDateTimeEditor editor = e.ActiveEditor as RadDateTimeEditor;
    if (editor != null)
    {
        RadDateTimeEditorElement el = editor.EditorElement as RadDateTimeEditorElement;
        el.CalendarSize = new System.Drawing.Size(400, 300);
        el.ShowTimePicker = true;

        el.Calendar.Font = f;
        RadDateTimePickerCalendar calendarBehavior = el.GetCurrentBehavior() as RadDateTimePickerCalendar;
        calendarBehavior.TimePicker.Font = f;
        el.Calendar.ElementRender -= Calendar_ElementRender;
        el.Calendar.ElementRender += Calendar_ElementRender;
    }
}

private void Calendar_ElementRender(object sender, RenderElementEventArgs e)
{
    e.Element.Font = f;
}

You can also specify the minutes step by setting the RadDateTimePickerCalendar.TimePicker.TimePickerElement.Step property:

private void radGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
{
    RadDateTimeEditor editor = e.ActiveEditor as RadDateTimeEditor;
    if (editor != null)
    {
        RadDateTimeEditorElement el = editor.EditorElement as RadDateTimeEditorElement;
        el.CalendarSize = new System.Drawing.Size(400, 300);
        el.ShowTimePicker = true;

        el.Calendar.Font = f;
        RadDateTimePickerCalendar calendarBehavior = el.GetCurrentBehavior() as RadDateTimePickerCalendar;
        calendarBehavior.TimePicker.Font = f;
        calendarBehavior.TimePicker.TimePickerElement.Step = 15;

        el.Calendar.ElementRender -= Calendar_ElementRender;
        el.Calendar.ElementRender += Calendar_ElementRender;
    }
}

In order to specify working hours, note that you can cancel the ValueChanging event of RadGridView if the selected hour is not allowed. Thus, the user will be restricted according to your custom requirements. You can find below a sample approach:

List<string> non_workingHours = new List<string>() { "12", "1", "2", "3", "4", "5" };
private void radGridView1_ValueChanging(object sender, ValueChangingEventArgs e)
{
    if (e.NewValue is DateTime)
    {
        DateTime newDate = (DateTime)e.NewValue;
        if (newDate != null)
        {
            if (non_workingHours.Contains(newDate.Hour.ToString()))
            {
                e.Cancel=true;
            }

        }
    }
}

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik