GridViewDateTimeColumn - Display both date & time pickers

4 posts, 0 answers
  1. Antoine
    Antoine avatar
    1 posts
    Member since:
    Jun 2019

    Posted 21 Jun Link to this post

    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


  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3282 posts

    Posted 25 Jun Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Nikita
    Nikita avatar
    22 posts
    Member since:
    Jun 2011

    Posted 27 Jun in reply to Dess | Tech Support Engineer, Sr. Link to this post

    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.

  4. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3282 posts

    Posted 01 Jul Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top