GridView Calendar

This article is written by Pon Saravanan  on 07-Feb-10 Last modified on :20-Jul-10

Calendar in a GridView template

Unlike other controls, calendar is taking too much of space for its usage. In most of the applications calendar will be hidden just after selecting the date. Earlier days in classic asp, we used a popup to load it on demand (sometimes used inline as well).  Here in this sample we are going to use a calendar control inside a GridView’s TemplateField. To make it close to real time, I have added a Textbox and a button to pop the calendar.

Show Hide calendar

As already explained to reduce the space used by calendar, it is easier to toggle visibility using a JavaScript. Since the calendar control is going to be at each row, the respective control’s client ids have to be passed. Otherwise we can not access those controls from JavaScript.

Attach Client Events at RowDataBound

To pass the Client ID’s of all the required controls to JavaScript, the right place is the RowDataBound event. This event will be fired for every rows while binding data. So the client script can be prepared added to attributes of the control. Remember to return false at the end, otherwise there will be an unnecessary PostBack to server.

Handling Calendar OnSelectionChanged

Remember the calendar control is not available directly.  It is contained in the GridView control’s ItemTemplate. In order to handle this event, we can either use a RowCommand, or a specific event to handle this.

I have chosen the second model for this sample. In this specific event, the control which has raised the event can be fetched using the first parameter named as sender.
Using this we can traverse back to fetch the row and the calendar’s siblings. We have fetched the textbox control same way, assigned the selected date to it.

Source Code


<%@ Page Language="vb" AutoEventWireup="false" CodeFile="Default.aspx.vb"
    Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="">
<head runat="server">
    <style type="text/css">
            border: solid 1px #404040;
            font-family: Courier New;
            background-color: #808080;
            cursor: hand;
    <script type="text/javascript">
        function ToggleVisiblity(ShowHideButton, GridPanel)
            var GridPanel = self.document.getElementById(GridPanel);
            if ( == 'none')
       = 'block';
       = 'none';
    <form id="form1" runat="server">
    <asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="false">
            <asp:BoundField DataField="ShipName" />
                    <asp:TextBox runat="server" ID="txtOrderDate" ></asp:TextBox>
                    <asp:label runat="server" ID="btnShowCalendar" Text="..."
                        CssClass="ShowHideButton" />                   
                    <asp:Calendar runat="server" ID="OrderCalendar" Style="display: none"

Code behind(ASPX.VB)

Imports System.Data.SqlClient
Imports System.Data
Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, _
                            ByVal e As System.EventArgs) Handles Me.Load
        If (Not IsPostBack) Then
        End If
    End Sub
    Private Sub BindListView()
        GridView1.DataSource = GetData()
    End Sub
    Private ReadOnly Property ConnectionString() As String
            Return "Server=.\SQLEXPRESS;Database=NorthWind;Trusted_Connection=True"
        End Get
    End Property
    Private ReadOnly Property Connection() As SqlConnection
            Dim ConnectionToFetch As New SqlConnection(ConnectionString)
            Return ConnectionToFetch
        End Get
    End Property
    Public Function GetData() As DataSet
        Dim SelectQry = "select top 10 * from Orders"
        Dim SampleSource As New DataSet
        Dim SampleDataAdapter As New SqlDataAdapter(SelectQry, ConnectionString)
        Return SampleSource
    End Function
    Protected Sub GridView1_RowDataBound(ByVal sender As Object, _
                                ByVal e As GridViewRowEventArgs) _
                                Handles GridView1.RowDataBound
        If (e.Row.RowType = DataControlRowType.DataRow) Then
            Dim OrderCalendar = DirectCast(e.Row.FindControl("OrderCalendar"), Calendar)
            Dim btnShowHide = DirectCast(e.Row.FindControl("btnShowCalendar"), Label)
            Dim ShowHideScript = "ToggleVisiblity(this,'" & _
                    OrderCalendar.ClientID & "');return false"
            btnShowHide.Attributes.Add("onclick", ShowHideScript)
        End If
    End Sub
    Protected Sub OrderCalendar_OnSelectionChanged(ByVal sender As Object, _
                                                   ByVal e As EventArgs)
        Dim OrderCalendar = DirectCast(sender, Calendar)
        Dim txtOrderDate = DirectCast(OrderCalendar.Parent.FindControl("txtOrderDate"), TextBox)
        txtOrderDate.Text = OrderCalendar.SelectedDate
    End Sub
End Class

    This works to a point, but how do you keep the calendar from closing when the user is navigating through the months? Everytime I try to change the month I have to open the calendar again, very annoying. 4/9/2010 2:46:55 PM

    You can read the similar article from the link given below
    3/23/2011 11:56:51 PM

Captcha Image
For you specially:  
Captcha Text Enter the text in the image.(Not Case sensitive)    

Spam Bot Trap


Select Theme