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.

datagirdview

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.

  1. /// <summary>
  2. /// Cretaed a sample class to store TestData
  3. /// </summary>
  4. class MyData
  5. {
  6. public int ID { get; set; }
  7. public DateTime Date { get; set; }
  8. public string Name { get; set; }
  10. public MyData(int id, DateTime dt, string name)
  11. {
  12. ID = id;
  13. Date = dt;
  14. Name = name;
  15. }
  16. }
On the FormLoad method, I created a List of MyData objects (an IEnumerable object) to bind as a Data Source into the DataGridView Control.
  1. private void MainForm_Load(object sender, EventArgs e)
  2. {
  3. // Creating an List of Mydata objects (An IEnumerable object) to bind
  4. // as a Data Source into DataGridView Control
  5. List<MyData> oMyDataList = new List<MyData>();
  7. MyData obj1 = new MyData(1, DateTime.Now, "John");
  8. MyData obj2 = new MyData(2, DateTime.Now, "Sam");
  9. MyData obj3 = new MyData(3, DateTime.Now, "Ray");
  11. oMyDataList.Add(obj1);
  12. oMyDataList.Add(obj2);
  13. oMyDataList.Add(obj3);
  15. // Binding as a Data Source into DataGridView
  16. dataGridView1.DataSource = oMyDataList;
  17. }
calander control

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.
  1. private void dataGridView1_CellClick(object sender, DataGridViewCellEventArgs e)
  2. {
  3. // If any cell is clicked on the Second column which is our date Column
  4. if (e.ColumnIndex == 1)
  5. {
  6. //Initialized a new DateTimePicker Control
  7. oDateTimePicker = new DateTimePicker();
  9. //Adding DateTimePicker control into DataGridView
  10. dataGridView1.Controls.Add(oDateTimePicker);
  12. // Setting the format (i.e. 2014-10-10)
  13. oDateTimePicker.Format = DateTimePickerFormat.Short;
  15. // It returns the retangular area that represents the Display area for a cell
  16. Rectangle oRectangle = dataGridView1.GetCellDisplayRectangle(e.ColumnIndex, e.RowIndex, true);
  18. //Setting area for DateTimePicker Control
  19. oDateTimePicker.Size = new Size(oRectangle.Width, oRectangle.Height);
  21. // Setting Location
  22. oDateTimePicker.Location = new Point(oRectangle.X, oRectangle.Y);
  24. // An event attached to dateTimePicker Control which is fired when DateTimeControl is closed
  25. oDateTimePicker.CloseUp += new EventHandler(oDateTimePicker_CloseUp);
  27. // An event attached to dateTimePicker Control which is fired when any date is selected
  28. oDateTimePicker.TextChanged += new EventHandler(dateTimePicker_OnTextChange);
  30. // Now make it visible
  31. oDateTimePicker.Visible = true;
  32. }
  33. }
set date

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.
  1. private void dateTimePicker_OnTextChange(object sender, EventArgs e)
  2. {
  3. // Saving the 'Selected Date on Calendar' into DataGridView current cell
  4. dataGridView1.CurrentCell.Value = oDateTimePicker.Text.ToString();
  5. }
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:
  1. void oDateTimePicker_CloseUp(object sender, EventArgs e)
  2. {
  3. // Hiding the control after use
  4. oDateTimePicker.Visible = false;
  5. }