TimePicker in a datetime column

[Peter Szintai]

Hi All!

I have a grid, with some DateTime column, but I would like to change the original DateTime picker to Time picker, because in some cases the date part is disinterested, and the user wants to set specific time moments in a user friendly way.

It is possible to do this?

Best regards,
Peter

[Richard Slade]

Hello Peter, 

You can do this by creating a custom cell. Please have a look at this area of the docs which will explain creating a custom cell in detail. 
Hope that helps
Richard

[Peter Szintai]

Hello Richard,

Thank you for your answer. The mentioned page was a good starting point for me to find the Using custom editors site, based on the example I have replaced by analogy the TrackBarEditor references with TimePicker references.

It works now, but not perfectly: when the cell gets the focus, it does not show the clock and spin buttons, only an empty frame.

Can somebody help me to correct this?

Best regards,
Peter

[Stefan]

Hi guys,

Thank you for writing.

There is a predefined time picker editor which can be used in RadGridView. Here is a sample demonstrating how to use it:

public Form1()
{
    InitializeComponent();

    Random r = new Random();
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("Name", typeof(string));
    table.Columns.Add("Bool", typeof(bool));
    table.Columns.Add("DateColumn", typeof(DateTime));

    for (int i = 0; i < 10; i++)
    {
        table.Rows.Add(i, "Row " + i, r.Next(10) > 5 ? true : false, DateTime.Now.AddHours(i));
    }

    this.radGridView1.DataSource = table;

    radGridView1.EditorRequired += new Telerik.WinControls.UI.EditorRequiredEventHandler(radGridView1_EditorRequired);
}

void radGridView1_EditorRequired(object sender, Telerik.WinControls.UI.EditorRequiredEventArgs e)
{
    if (radGridView1.CurrentColumn.Name == "DateColumn")
    {
        e.Editor = new GridTimePickerEditor();
    }
}

I hope this helps.
 
All the best,
Stefan
the Telerik team

[Suren]

hello,

i'm using Time instead of Datetime so soon as i select the time , i get an exception saying invalid cast from 'system.datetime' to 'system.timespan' , so how could i solve this ??,

i'm using the above sample code.

i have MS SQL DB which has table with column SQL datatype TIME,
i load it to a Dataset using a Datatable.

an example code would really helpful. 

[Stefan]

Hi Suren,

The editor mentioned works with DateTime data type by default, so it is best of you can change the data type. Alternatively, you need to implement custom TypeConverter, as described here: http://www.telerik.com/help/winforms/gridview-columns-converting-data-types.html.

All the best,
Stefan
the Telerik team

[Suren]

Hello,
i tried what u said but , i couldn't get a working code, if you could fix or provide me with an working example , it would be helpful to me and others,

below is the code i tried, please point of the error.

i get an error saying "Invalied cast from system.datetime to system.timespan" 

void radGridView1_EditorRequired(object sender, Telerik.WinControls.UI.EditorRequiredEventArgs e)
 {
     if (radGridView1.CurrentColumn.Name == "In Time" || radGridView1.CurrentColumn.Name == "Out Time" )
     {
         e.Editor = new TimePickerEditor();
     }
 }

 public class TimePickerEditor : BaseGridEditor
 {
     public override object Value
     {
         get
         {
             TimePickedEditorElement editor = (TimePickedEditorElement)this.EditorElement;
             return editor.Value;
         }
         set
         {
             TimePickedEditorElement editor = (TimePickedEditorElement)this.EditorElement;
             if (value != null && value != DBNull.Value)
             {
                 DateTime dt = DateTime.Parse(value.ToString());
                 TimeSpan TS = new TimeSpan(dt.Ticks);
                 editor.Value = TS;
             }
         }
     }

[Peter Szintai]

Hi Suren!

What Stefan said is true, I will try to explain a little more:
On one hand, the timepicker editor is a modified datetime picker, where the handled data is DateTime, but the user can work mainly with the Time part. "so it is best of you can change the data type" means: if you can, change the original data type in your code from timespan to datetime before you write any data into the timepicker, and, when you read the data from the timepicker, the type of it is DateTime.

On the other hand, if you can't change the original data type from timespan to datetime in your code means, that you have to write your own conversion logic, the best example is on the mentioned page: http://www.telerik.com/help/winforms/gridview-columns-converting-data-types.html
In this code the 'Y' / 'N' / 'M' values are converted to ToggleState.On / ...Off / ....Indeterminate values and vica versa.
Based on it make a new class inherited from the TypeConverter, change the char/ToggleState types to TimeSpan/DateTime type, and code your logic in the ConvertTo and ConvertFrom methods.

At the end, set the DataTypeConverter property of the TimePIcker column to an instance of this new class.

I hope, it will work!

Regards,
Peter

[Suren]

@Peter Szintai, thank you . since the first option is not available for me since in our SQL Server 2008 R2 Database,  that column is defined as TIme Datatype, and other apps use it.

so i have the second option of creating a TypeConverter which i tried in the above post , but it's not working, for some reason, thats why i came here to ask help from the experts , 

so if you or anyone could find the problem in the above code please let know, and if you can provide me with an working code please.

[Peter Szintai]

Hi Suren!

OK, your system uses TimeSpan, but in this case you should follow the suggestions:

Your code in the EditorRequired event is bad, the type of the timepicker editor must be GridTimePickerEditor().

void radGridView1_EditorRequired(object sender, Telerik.WinControls.UI.EditorRequiredEventArgs e)
 {
     if (radGridView1.CurrentColumn.Name == "In Time" || radGridView1.CurrentColumn.Name == "Out Time" )
     {
         e.Editor = new GridTimePickerEditor();
     }
 }

On the other hand, unfortunately, at the moment the GridTimePickerEditor does not contain DataTypeConverter property (or I just don't see).
Because the type of the Value property of the editor must be DateTime, you have to convert your original TimeSpan type value to DateTime before you write the Value property.
And, when you read the Value property, the type of it DateTime, you have to convert it back to TimeSpan.

Regards,
Peter

[Suren]

@peter, Thank you, you are not reading my post properly or not understanding what i'm trying to say. thank you for your help, if anyone else who understands the problem please help me.

[Stefan]

Hello Suren,

Everything that Peter says is correct. You need to use a custom TypeConverter to achieve the desired scenario. Attached you can find a sample project demonstrating how to use a TimeSpan data type with TimePickerEditor.

@Peter your Telerik Points have been updated for the community effort.

Let us know if you have any other questions.
 
Greetings,
Stefan
the Telerik team

[Suren]

@stefan, thank you but i get the following error in screenshot when i try to change value. 

the problem is it's adding some value before the time.

[Stefan]

Hello Suren,

Could you please try this version of the TypeConverter:

class DateToTimeConverter : TypeConverter
{
    public override bool CanConvertTo(ITypeDescriptorContext context, Type destinationType)
    {
        return destinationType == typeof(DateTime);
    }

    public override object ConvertTo(ITypeDescriptorContext context, CultureInfo culture, object value, Type destinationType)
    {
        TimeSpan span = (TimeSpan)value;
        DateTime dt = new DateTime(span.Ticks);
        return dt;
    }

    public override bool CanConvertFrom(ITypeDescriptorContext context, Type sourceType)
    {
        return sourceType == typeof(DateTime);
    }

    public override object ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, object value)
    {
        DateTime dt = (DateTime)value;
        TimeSpan span = new TimeSpan(dt.Hour, dt.Minute, dt.Second);
        return span;
    }
}

 
Kind regards,
Stefan
the Telerik team