TimePicker column in radGridView at runtime?

[Tim R]

My application requires that I track time-of-day without regard to date.  For example, "Jane Doe starts work at 9:00AM".  The proper CLR type for this requirement is the System.TimeSpan. 

The underlying datatype in SQL Server 2012 will be a Time(0) column.   

Apologies for the repetition, but to be perfectly clear: this has nothing to do with Date or DateTime.  It is not a specific time on a specific day that I need to track, but merely the time of day element in isolation.  

So, is it possible to use the TimePicker as the editor for a column in the RadGridView on a WinForm? And if that is possible, what is the underlying GridView column type that should be added to the MasterTemplate.Columns collection per the following example, if my intention is to instantiate the column at runtime?

http://www.telerik.com/help/winforms/gridview-columns-generating-columns.html

The example uses GridViewTextBoxColumn() and GridViewComboBoxColumn().  Thanks

[Emanuel Varga]

Hello,

To achieve this you need to create a custom editor (i believe this will be provided in the future).

Please consider the following example:
The custom time editor:

public class TimeEditor : BaseGridEditor
{
    public override object Value
    {
        get
        {
            var editor = (RadTimePickerElement)this.EditorElement;
            var dateValue = editor.Value as DateTime?;
            if (dateValue.HasValue)
            {
                return new TimeSpan(dateValue.Value.Hour, dateValue.Value.Minute, dateValue.Value.Second);
            }

            return TimeSpan.MinValue;
        }
        set
        {
            var editor = (RadTimePickerElement)this.EditorElement;
            if (value != null && value != DBNull.Value && value is TimeSpan)
            {
                var timeSpan = (TimeSpan)value;
                editor.Value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, timeSpan.Hours, timeSpan.Minutes, timeSpan.Seconds);
            }
        }
    }

    public override void BeginEdit()
    {
        base.BeginEdit();
        ((RadTimePickerElement)this.EditorElement).ValueChanged += TimeEditor_ValueChanged;
        this.EditorElement.Focus();
    }

    private void TimeEditor_ValueChanged(object sender, EventArgs e)
    {
        OnValueChanged();
    }

    public override bool EndEdit()
    {
        ((RadTimePickerElement)this.EditorElement).ValueChanged -= TimeEditor_ValueChanged;
        return base.EndEdit();
    }

    protected override RadElement CreateEditorElement()
    {
        return new RadTimePickerElement();
    }
}

and the usage

using System;
using System.Collections.Generic;
using System.Windows.Forms;
using Telerik.WinControls.UI;
using Telerik.WinControls;

public partial class Form1 : Form
{
    private RadGridView grid = new RadGridView();

    public Form1()
    {
        InitializeComponent();
        grid.Dock = DockStyle.Fill;
        grid.EditorRequired += grid_EditorRequired;
        grid.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;

        this.Controls.Add(grid);
    }

    private void grid_EditorRequired(object sender, EditorRequiredEventArgs e)
    {
        if (grid.CurrentColumn.FieldName == "Time")
        {
            e.EditorType = typeof(TimeEditor);
        }
    }

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        var list = new List<TestTimeDataSource>();
        for (int i = 0; i < 3; i++)
        {
            list.Add(new TestTimeDataSource("Test" + i.ToString(), new TimeSpan(9, i, 0)));
        }

        grid.DataSource = list;
    }

    private class TestTimeDataSource
    {
        public string Name { get; set; }

        public TimeSpan Time { get; set; }

        public TestTimeDataSource(string name, TimeSpan time)
        {
            Name = name;
            Time = time;
        }
    }
}

For any other info on creating custom editor elements please take a look in the documentation page.

If you have any other questions, please let me know.

Best Regards,
Emanuel Varga
WinForms MVP
 

[Tim R]

Thank you for the helpful example, Emanuel.

EDIT: I  think I've found the answer to my question below; hope I'm doing it the right way:

 private void grid_CellEditorInitialized(object sender, Telerik.WinControls.UI.GridViewCellEventArgs e)
        {
            TimeEditor ed = this.grid.ActiveEditor as TimeEditor;
            if (ed != null)
            {
                 var edElement = (RadTimePickerElement)ed.EditorElement;
                 edElement.Step = 15;
            }
        }




I would like to set the Step (and other) properties of the instance of this custom editor.  But it does not seem possible to do this in the EditorRequired eventhandler because the editor instance does not yet exist at that point in the code:

 private void grid_EditorRequired(object sender, EditorRequiredEventArgs e)
     {
       if ( (grid.CurrentColumn.FieldName == "arrive") || (grid.CurrentColumn.FieldName == "depart") )
            {
                e.EditorType = typeof(TimeEditor);
                // cannot set the Step property of the time editor
                // because at this point in the code e.Editor is null
                (e.Editor as RadTimePickerElement).Step = 15;
            }
    }

What is the best practice for setting properties of an editor assigned to a column in the EditorRequired eventhandler?

[Emanuel Varga]

Hello again,

A couple of things i need to point out here, first of, you are building a custom editor, you can set all of these properties when creating the editor.

protected override RadElement CreateEditorElement()
    {
        var editor = new RadTimePickerElement();
        // editor.
        // set any properties here
        return editor;
    }

Or again, the documentation is your friend :) and as you can see in this page, there is the CellEditorInitialized event where you can do some last minute adjustments before the user has access to the editor.

As always, hope this helps, if there is anything else please don't hesitate to ask and please don't forget to mark all of the helpful replies as answers so that other people can find the answers they are searching for faster and easier

Best Regards,
Emanuel Varga
WinForms MVP

[Tim R]

Thanks again for the help. 

I've been reading the documentation and searching the web for 2 hours on something very simple, but I cannot get it to work.

When a cell with a TimeEditor has focus, the TimeEditor correctly displays the value in US time format, e.g. 3:00PM.  I've set the format in the CellEditorInitialized event:

 

private void grid_CellEditorInitialized(object sender, Telerik.WinControls.UI.GridViewCellEventArgs e)
       {
           TimeEditor ed = this.grid.ActiveEditor as TimeEditor;
           if (ed != null)
           {
                var edElement = (RadTimePickerElement)ed.EditorElement;
                edElement.Step = 15;
                edElement.Culture = System.Threading.Thread.CurrentThread.CurrentUICulture;   // en-US
           }
       }

However, when the cell does not have focus, the value is displayed so:  15:00:00, i.e. in 24-hour time and with a seconds chunk.

How do I tell the grid to always display the value in short time format? 3:00PM.   Is the non-focused value display format a column property? What is the exact FormatString literal that will work this magic?  I thought it was "t" but that simply displays the letter "t" in the cells.

[Emanuel Varga]

Hello again,

You cannot set that for the column itself because the column created by the grid is a standard Text column, for this to work you can handle the CellFormatting event and do the following:

void grid_CellFormatting(object sender, CellFormattingEventArgs e)
{
    if (e.Column.FieldName == "Time" && e.CellElement.Value is TimeSpan)
    {
        var date = DateTime.MinValue.Add((TimeSpan)e.CellElement.Value);
        e.CellElement.Text = string.Format("{0:t}", date);
    }
}

If you have any other questions, please let me know.

Best Regards,
Emanuel Varga
WinForms MVP

[Stefan]

Hello guys,

I just wanted to mention, that such editor is available our of the box and you can use it if needed: GridTimePickerEditor.

Kind regards,
Stefan
the Telerik team

[Emanuel Varga]

Hello Stefan,

You are right, i missed this when checking for editors :), but if for this to work you need to have a datetime column (and in this case the grid will create a text column), otherwise you have to use TypeConverters + CellFormatting.

Best Regards,
Emanuel Varga
WinForms MVP

[Tim R]

Thank you get again, Emanuel.   Working.  I've marked your replies as The Answer.

[Saif]

i tried above code but editor is always null

GridTimePickerEditor ed = this.gvDetails.ActiveEditor as GridTimePickerEditor;
if (ed != null)
{
 var edElement = (RadTimePickerElement)ed.EditorElement;
 edElement.Step = 15;
 edElement.PopupContentElement.FooterPanel.Visibility = ElementVisibility.Collapsed;
 edElement.PopupForm.MouseDown += TimePicker_MouseDown;
 edElement.Culture = System.Threading.Thread.CurrentThread.CurrentUICulture;
}

please explain why?

[Stefan]

Hello Saif,

Please specify where did you try this code and what is your goal.

I am looking forward to your reply.

Regards,
Stefan
Telerik