Embedding Calendar (DateTimePicker) Control Into DataGridView Cell

This article shows how to embed a Calendar (DataTimePicker) Control into a cell of a DataGridView Winform control.

In a DataGridView if a cell contains data in a DateTime Format and you want to edit the date directly on the grid, by default the Winform DataGridView control doesn't provide a Calender (DateTimePicker) control on that cell. However this feature is easily available with various third-party Winform Controls (like Infragistics controls). To show a Calendar on the DataGridView Cell, here we include a DataGridView on the form and populate the data by Binding a list of objects. After creating the data source, we create a DateTimePicker control programmatically whenever a cell with a date is clicked.

A sample project is also attached for better understanding.



A Sample class to hold the TestData and to bind into DataGridView Control

To show sample data on the DataGridView, here I created a sample class MyData with the three properties: ID, Date and Name.

/// <summary>
    /// Cretaed a sample class to store TestData
    /// </summary>
    class MyData
    {
        public int ID { get; set; }
        public DateTime Date { get; set; }
        public string Name { get; set; }

        public MyData(int id, DateTime dt, string name)
        {
            ID = id;
            Date = dt;
            Name = name;
        }
    }

On the FormLoad method, I created a List of MyData objects (an IEnumerable object) to bind as a Data Source into the DataGridView Control.

private void MainForm_Load(object sender, EventArgs e)
{
    // Creating an List of Mydata objects (An IEnumerable object) to bind
    // as a Data Source into DataGridView Control
    List<MyData>  oMyDataList = new List<MyData>();

    MyData obj1 = new MyData(1, DateTime.Now, "John");
    MyData obj2 = new MyData(2, DateTime.Now, "Sam");
    MyData obj3 = new MyData(3, DateTime.Now, "Ray");

    oMyDataList.Add(obj1);
    oMyDataList.Add(obj2);
    oMyDataList.Add(obj3);

    // Binding as a Data Source into DataGridView
    dataGridView1.DataSource = oMyDataList;
}

Displaying a Calendar (DateTimePicker) Control on Cell

When the cell containing Date field is clicked, I create a new DateTimePicker Control programmatically and set the Size, Location, Format properties and so on. Two events "CloseUp" and "TextChanged" are also attached with this control.

private void dataGridView1_CellClick(object sender, DataGridViewCellEventArgs e)
{
    // If any cell is clicked on the Second column which is our date Column
    if (e.ColumnIndex == 1)
    {
        //Initialized a new DateTimePicker Control
        oDateTimePicker = new DateTimePicker();

        //Adding DateTimePicker control into DataGridView
        dataGridView1.Controls.Add(oDateTimePicker);

        // Setting the format (i.e. 2014-10-10)
        oDateTimePicker.Format = DateTimePickerFormat.Short;

        // It returns the retangular area that represents the Display area for a cell
        Rectangle oRectangle = dataGridView1.GetCellDisplayRectangle(e.ColumnIndex, e.RowIndex, true);

        //Setting area for DateTimePicker Control
        oDateTimePicker.Size = new Size(oRectangle.Width, oRectangle.Height);

        // Setting Location
        oDateTimePicker.Location = new Point(oRectangle.X, oRectangle.Y);

        // An event attached to dateTimePicker Control which is fired when DateTimeControl is closed
        oDateTimePicker.CloseUp += new EventHandler(oDateTimePicker_CloseUp);

        // An event attached to dateTimePicker Control which is fired when any date is selected
        oDateTimePicker.TextChanged += new EventHandler(dateTimePicker_OnTextChange);

        // Now make it visible
        oDateTimePicker.Visible = true;
    }
}

Retrieving the selected date from Calendar and saving into DataGrid Cell

On the TextChanged event handler I get the selected date on the calendar and save it into the corresponding DataGridView cell.

private void dateTimePicker_OnTextChange(object sender, EventArgs e)
{
      // Saving the 'Selected Date on Calendar' into DataGridView current cell
      dataGridView1.CurrentCell.Value = oDateTimePicker.Text.ToString();
}

Hiding the Calendar control after its use

This is also an important step because we don't to see the calendar control on the cell once the date has been selected on the calendar. To do this, we hide it on the "CloseUp" event handler as follows: 

void oDateTimePicker_CloseUp(object sender, EventArgs e)
{
      // Hiding the control after use
      oDateTimePicker.Visible = false;
}