Monday, September 8, 2008

How To Add calendar control inside a GridView

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CalInsideGridView.aspx.cs"
   Inherits="CalInsideGridView" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
   <title>Untitled Page</title>
   <form id="form1" runat="server">
           <asp:GridView ID="GridView1" runat="Server" AutoGenerateColumns="False">
                   <asp:BoundField DataField="Title" HeaderText="Title" />
                   <asp:TemplateField HeaderText="Year">
                           <asp:TextBox ID="text1" runat="server"></asp:TextBox>
                           <asp:Calendar ID="Cal1" runat="Server" OnSelectionChanged="Cal1_SelectionChanged"></asp:Calendar>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class CalInsideGridView : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
            GridView1.DataSource = GetCustomMadeDataTable();

    public DataTable GetCustomMadeDataTable()
        //Create a new DataTable object
        System.Data.DataTable objDataTable = new System.Data.DataTable();
        //Create three columns with string as their type
        objDataTable.Columns.Add("ISBN", typeof(string));
        objDataTable.Columns.Add("Title", typeof(string));
        objDataTable.Columns.Add("Publisher", typeof(string));
        objDataTable.Columns.Add("Year", typeof(string));
        DataColumn[] dcPk = new DataColumn[1];
        dcPk[0] = objDataTable.Columns["ISBN"];
        objDataTable.PrimaryKey = dcPk;
        objDataTable.Columns["ISBN"].AutoIncrement = true;
        objDataTable.Columns["ISBN"].AutoIncrementSeed = 1;
        //Adding some data in the rows of this DataTable
        DataRow dr;
        for (int i = 1; i <= 10; i++)
            dr = objDataTable.NewRow();
            dr[1] = "Title" + i.ToString();
            dr[2] = "Publisher" + i.ToString();
            dr[3] = "12/12/200" + i.ToString();
        Session["strTemp"] = objDataTable;
        return objDataTable;
    protected void Cal1_SelectionChanged(object sender, EventArgs e)
        Calendar cal = (Calendar)sender;
        TextBox text1 = (TextBox)((GridViewRow)cal.Parent.Parent).FindControl("text1");

        text1.Text = cal.SelectedDate.ToShortDateString();


  1. How to put data back into db?

  2. This Calendar Control for .NET can be used within GridView.