TimePicker column in radGridView at runtime?

11 posts, 2 answers
  1. Tim R
    Tim R avatar
    131 posts
    Member since:
    Feb 2006

    Posted 12 Nov 2012 Link to this post

    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
  2. Answer
    Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 13 Nov 2012 Link to this post

    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
     
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Tim R
    Tim R avatar
    131 posts
    Member since:
    Feb 2006

    Posted 13 Nov 2012 Link to this post

    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?
  5. Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 13 Nov 2012 Link to this post

    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

  6. Tim R
    Tim R avatar
    131 posts
    Member since:
    Feb 2006

    Posted 13 Nov 2012 Link to this post

    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.








  7. Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 14 Nov 2012 Link to this post

    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
  8. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 14 Nov 2012 Link to this post

    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
    Q3’12 of RadControls for WinForms is available for download (see what's new). Get it today.
  9. Answer
    Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 14 Nov 2012 Link to this post

    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
  10. Tim R
    Tim R avatar
    131 posts
    Member since:
    Feb 2006

    Posted 14 Nov 2012 Link to this post

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





  11. Saif
    Saif  avatar
    30 posts
    Member since:
    Apr 2014

    Posted 09 Aug 2014 Link to this post

    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?
  12. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 11 Aug 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top
UI for WinForms is Visual Studio 2017 Ready