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
MarkUp(ASPX)
<%@ Page Language=
"vb" AutoEventWireup=
"false" CodeFile=
"Default.aspx.vb" Inherits=
"_Default" %>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=
"http://www.w3.org/1999/xhtml">
<head runat=
"server">
<title></title>
<style type=
"text/css">
.ShowHideButton
{
border: solid 1px #404040;
font-family: Courier
New;
background-color: #808080;
cursor: hand;
}
</style>
<script type=
"text/javascript">
function ToggleVisiblity(ShowHideButton, GridPanel)
{
var GridPanel = self.document.getElementById(GridPanel);
if (GridPanel.style.display ==
'none') GridPanel.style.display =
'block'; else GridPanel.style.display =
'none'; }
</script>
</head>
<body>
<form id=
"form1" runat=
"server">
<asp:GridView runat=
"server" ID=
"GridView1" AutoGenerateColumns=
"false">
<Columns>
<asp:BoundField DataField=
"ShipName" />
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox runat=
"server" ID=
"txtOrderDate" ></asp:TextBox>
<asp:label runat=
"server" ID=
"btnShowCalendar" Text=
"..." CssClass=
"ShowHideButton" />
<br>
<asp:Calendar runat=
"server" ID=
"OrderCalendar" Style=
"display: none" OnSelectionChanged=
"OrderCalendar_OnSelectionChanged"></asp:Calendar>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body>
</html>
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
BindListView()
End If
End Sub
Private Sub BindListView()
GridView1.DataSource = GetData()
GridView1.DataBind()
End Sub
Private ReadOnly Property ConnectionString() As String
Get
Return "Server=.\SQLEXPRESS;Database=NorthWind;Trusted_Connection=True"
End Get
End Property
Private ReadOnly Property Connection() As SqlConnection
Get
Dim ConnectionToFetch As New SqlConnection(ConnectionString)
ConnectionToFetch.Open()
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)
SampleDataAdapter.Fill(SampleSource)
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