|
Download
the source code
Introduction
In this article we will see how to implement Popup Calendar
control in ASP.NET. Basically we will have one Textbox (for
showing date) and one image button (for invoking calendar
control) in a Webform. If user clicks on the image button,
a calendar pops up. It closes itself when the user clicks
on a date. Main problem with this method is how to populate
the Textbox with the date that user chooses from the calendar.
We will see how to do this in this article. Finally we will
also see how this Popup calendar can be implemented using
User control in a DataGrid or in a Simple Web Form.
WebForm.Aspx
All web forms which implement Popup Calendar need to have
following javascript function:
function pickDate(Src){
window.open("CalendarPopUp.aspx?src=" + Src,
"_blank", "height=260, width=250, left=100,
top=100, " +
"location=no, menubar=no, resizable=no, " +
"scrollbars=no, titlebar=no, toolbar=no", true);
} |
When pickDate() function is invoked, a new browser is opened,
without the navigation bars and Web Form showing the calendar
is rendered. Popup Calendar is shown following fig:
We need to attach this client side function to the image
button (or simple button control), so that when the image
button is pressed. Calendar window is opened.
|
Button1.Attributes.Add("Onclick", "pickDate('TextBox1')") |
CalendarPopup.aspx
The CalendarPopUp.aspx web form displays a Calendar control.
After a date is selected in the Calendar, and the Calendar1_SelectionChanged
event handler is used to rewrite the HTML output of the page.
The new HTML closes the page and passes the selected value
back to the originating page and control.
Private
Sub Calendar1_SelectionChanged(ByVal sender As Object,
ByVal e As
System.EventArgs)
Handles Calendar1.SelectionChanged
Dim sbScript As New StringBuilder()
sbScript.Append("<script
language='javascript'>")
sbScript.Append(Environment.NewLine)
sbScript.Append("window.opener.document.forms[0].")
sbScript.Append(Request.QueryString("src"))
sbScript.Append(".value
= '")
sbScript.Append(Calendar1.SelectedDate.ToShortDateString())
sbScript.Append("';")
sbScript.Append(Environment.NewLine)
sbScript.Append("window.close();")
sbScript.Append(Environment.NewLine)
sbScript.Append("</script>")
RegisterStartupScript("CloseWindow",
sbScript.ToString)
End Sub |
Popup Calendar in DataGrid
Popup Calendar can be implemented in DataGrid in the same
way. Only problem with that implementation is getting the
id of the textbox where you want to populate the selected
date. DataGrids implement the INamingContainer interface,
which means that the DataGrid dynamically renames its child
controls to prevent any naming conflicts. If you look at the
source code for the Web Form shown in following figure, you
will come to know what I mean.
In the above figure, DataGrid is displaying five records
about Products. Source code for this DataGrid is shown below:
<asp:datagrid
id="DataGrid1" style="Z-INDEX: 101; LEFT:
8px" runat="server" DataKeyField="ProductID"
AutoGenerateColumns="False" BorderColor="black"
HeaderStyle-BackColor="#aaaadd" HeaderStyle-CssClass="tableHeader"
ItemStyle-CssClass="tableItem" PageSize="10"
PagerStyle-Visible="False">
<Columns>
<asp:TemplateColumn
headertext="Product ID">
<ItemTemplate>
<asp:TextBox id="ProductID"
runat="server" AutoPostBack=false Text='<%#
Container.DataItem("ProductID")
%>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn
headertext="Product Name">
<ItemTemplate>
<asp:TextBox id="ProductName"
runat="server" AutoPostBack=false
Text='<%#
Container.DataItem("Name") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn
headertext="Product Price">
<ItemTemplate>
<asp:TextBox id="ProductPrice"
runat="server" AutoPostBack=false
Text='<%# Container.DataItem("Price")
%>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn
headertext="Purchase Date">
<ItemTemplate>
<asp:TextBox
id="PurDate" runat="server" AutoPostBack=true
Text='<%#
Container.DataItem("Quantity")
%>'>
</asp:TextBox>
<asp:Image
id="CalendarButton"
ImageUrl="file:///C:\Inetpub\wwwroot\CalendarControl\
calendar.gif">
</asp:Image>
</ItemTemplate>
</asp:TemplateColumn>
</asp:datagrid>
|
If you see the rendered HTML code for first column "Purchase
Date" Textbox it is rendered as:
| <input
name="DataGrid1:_ctl6:PurDate" type="text"
id="DataGrid1__ctl6_PurDate" /> |
You can see how the TextBox's ID value was changed to "
DataGrid1:_ctl2:PurDate" from "PurDate"- this
is what the INamingContainer interface does. With this in
mind, the solution to the problem is to capture the rendered
name of the TextBox at runtime and use it. This can be done
in ItemDataBound event handler, Source code for the same is
below
Private
Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal
e As System.Web.UI.WebControls.DataGridItemEventArgs)
Handles DataGrid1.ItemDataBound
If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType
= ListItemType.AlternatingItem
Then
Dim ImgCal As New System.Web.UI.WebControls.Image()
ImgCal = CType(e.Item.FindControl("CalendarButton"),
System.Web.UI.WebControls.Image)
ImgCal.Attributes.Add("Onclick", "pickDate('"
& e.Item.FindControl("PurDate").ClientID
& "')")
End If
End Sub
|
Here in this event handler, I am getting the ClientID for
that textbox and sending it to "pickDate" JavaScript
function which is attached to the onClick event of that button.
Implementing Calendar Control using User Controls
Calendar control has been created using User Controls. So
what you need to do is, just register that user control in
your webform and include the Calendarcontrol tag wherever
you want to have Calendar Control (Textbox and ImageButton).
Calendar User Control has one property called "TextValue",
you can set this value if you want to give some value to the
TextBox (Default Value when the page is loaded).
If you see the ascx file, code will be very simple
<input
type="text" name="txtCalendar" id="txtCalendar"
runat="server" Width="136px"></input>
<a id="LnkCalendar" runat="server">
<asp:Image id="BtnCalendar"
runat="server"
ImageUrl="file:///C:\Inetpub\wwwroot\CalendarControl\calendar.gif">
</asp:Image>
</a>
|
We have one textbox and one anchor tag. Within anchor tag,
we have one image button . Onclick() event of Image button
wont work in Netscape, thatswhy we have anchor tag within
that we have image button. So that we can write event handler
for onclick() of anchor tag. So when we press image button
this event will be raised where we can write code to open
popup window to show calendar.
In the code behind file, we need to attach one event handler
for anchor tag onclick() event. This is done in page_load
Private
Sub Page_Load(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles
MyBase.Load
LnkCalendar.Attributes.Add("href",
"Javascript:pickDate('" & txtCalendar.Name
& "')")
End Sub
|
In the usercontrol, if we try to access the textbox(txtCalendar)
name. It will give rendered name of textbox, so that it can
be passed to pickDate() function as mentioned early. Since
we need to expose one property called "TextValue"
for this usercontrol, we need to have this code also included
in the code behind.
Public
Property TextValue() As String
Get
Return txtCalendar.Value
End Get
Set(ByVal
Value As String)
txtCalendar.Value = Value
End Set
End Property
|
For Registering the user control in your webform, add the
following code in your aspx:
| <%@
Register TagPrefix="Saravana" TagName="Calendar"
Src="CalendarUserControl.ascx" %>
|
After registering, if you wants to have calendar control
in your web page. Add the following code to your webform:
| <Saravana:Calendar
TextValue="20/11/2003" runat="server"
id="Calendar1"></Saravana:Calendar>
|
You no need to do anything other than about two things to
get calendar control in your page. Only other requirement
is, you need to have pickDate() JavaScript function in your
webform. You can place this usercontrol in the itemtemplate
column of DataGrid also.
|
