nmaccari
Mar 10th, 2010, 11:57 AM
Well, I can't believe I just spent over four hours trying to get the Ajax PopupControl working when it contains a DetailsView and Calendar Ajax control in it. Basically, it worked fine in IE7 and Firefox but IE8 and Chrome would kept putting the popup control in the background.
So, then it dawned on me, why not just create my own Ajax Calendar Control. Then, in about 20 minutes I came up with this code. I feel like such an idiot for not doing it before. I am not done the control yet so if you can see ways to improve it then let me know.
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="CalenderTextBox.ascx.vb" Inherits="Controls_Objects_CalenderTextBox" %>
<asp:UpdatePanel ID="updCal" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
<asp:TextBox ID="txtCalendar" runat="server"></asp:TextBox>
</td>
<td>
<asp:ImageButton ID="btnCal" runat="server" ImageUrl="~/Images/calendar.gif" />
</td>
<td>
<asp:RequiredFieldValidator ID="rfvDate" runat="server" ControlToValidate="txtCalendar"
Display="Dynamic" ErrorMessage="***"></asp:RequiredFieldValidator>
</td>
<td>
<asp:CompareValidator ID="cvDate" runat="server" ControlToValidate="txtCalendar"
ErrorMessage="**" Operator="DataTypeCheck" Type="Date"></asp:CompareValidator>
</td>
</tr>
</table>
<div style="margin-top:-2; text-align:center; position:absolute;">
<asp:Calendar ID="calPopUp" runat="server" Width="70px" Height="70px"
BackColor="#E6E6D9" BorderStyle="Outset" BorderWidth="1px"
Visible="False"
ForeColor="Black"
NextPrevFormat="ShortMonth" BorderColor="#666633" FirstDayOfWeek="Monday"
Font-Names="arial" >
<TitleStyle BackColor="#CDCDB4" ForeColor="Navy" />
<SelectedDayStyle BackColor="White" ForeColor="Red" />
<TodayDayStyle BackColor="white" ForeColor="Red" />
</asp:Calendar>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Partial Class Controls_Objects_CalenderTextBox
Inherits System.Web.UI.UserControl
Public Event Show_Popup()
Public Property Text() As String
Get
Return txtCalendar.Text
End Get
Set(ByVal value As String)
txtCalendar.Text = value
End Set
End Property
Protected Sub btnCal_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles btnCal.Click
calPopUp.Visible = Not calPopUp.Visible
If calPopUp.Visible = True Then
If IsDate(txtCalendar.Text) Then
calPopUp.SelectedDate = txtCalendar.Text
calPopUp.VisibleDate = txtCalendar.Text
End If
End If
RaiseEvent Show_Popup()
End Sub
Protected Sub calPopUp_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles calPopUp.SelectionChanged
txtCalendar.Text = calPopUp.SelectedDate.ToShortDateString
calPopUp.Visible = False
RaiseEvent Show_Popup()
End Sub
Protected Sub calPopUp_VisibleMonthChanged(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MonthChangedEventArgs) Handles calPopUp.VisibleMonthChanged
RaiseEvent Show_Popup()
End Sub
End Class
So, then it dawned on me, why not just create my own Ajax Calendar Control. Then, in about 20 minutes I came up with this code. I feel like such an idiot for not doing it before. I am not done the control yet so if you can see ways to improve it then let me know.
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="CalenderTextBox.ascx.vb" Inherits="Controls_Objects_CalenderTextBox" %>
<asp:UpdatePanel ID="updCal" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
<asp:TextBox ID="txtCalendar" runat="server"></asp:TextBox>
</td>
<td>
<asp:ImageButton ID="btnCal" runat="server" ImageUrl="~/Images/calendar.gif" />
</td>
<td>
<asp:RequiredFieldValidator ID="rfvDate" runat="server" ControlToValidate="txtCalendar"
Display="Dynamic" ErrorMessage="***"></asp:RequiredFieldValidator>
</td>
<td>
<asp:CompareValidator ID="cvDate" runat="server" ControlToValidate="txtCalendar"
ErrorMessage="**" Operator="DataTypeCheck" Type="Date"></asp:CompareValidator>
</td>
</tr>
</table>
<div style="margin-top:-2; text-align:center; position:absolute;">
<asp:Calendar ID="calPopUp" runat="server" Width="70px" Height="70px"
BackColor="#E6E6D9" BorderStyle="Outset" BorderWidth="1px"
Visible="False"
ForeColor="Black"
NextPrevFormat="ShortMonth" BorderColor="#666633" FirstDayOfWeek="Monday"
Font-Names="arial" >
<TitleStyle BackColor="#CDCDB4" ForeColor="Navy" />
<SelectedDayStyle BackColor="White" ForeColor="Red" />
<TodayDayStyle BackColor="white" ForeColor="Red" />
</asp:Calendar>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Partial Class Controls_Objects_CalenderTextBox
Inherits System.Web.UI.UserControl
Public Event Show_Popup()
Public Property Text() As String
Get
Return txtCalendar.Text
End Get
Set(ByVal value As String)
txtCalendar.Text = value
End Set
End Property
Protected Sub btnCal_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles btnCal.Click
calPopUp.Visible = Not calPopUp.Visible
If calPopUp.Visible = True Then
If IsDate(txtCalendar.Text) Then
calPopUp.SelectedDate = txtCalendar.Text
calPopUp.VisibleDate = txtCalendar.Text
End If
End If
RaiseEvent Show_Popup()
End Sub
Protected Sub calPopUp_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles calPopUp.SelectionChanged
txtCalendar.Text = calPopUp.SelectedDate.ToShortDateString
calPopUp.Visible = False
RaiseEvent Show_Popup()
End Sub
Protected Sub calPopUp_VisibleMonthChanged(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MonthChangedEventArgs) Handles calPopUp.VisibleMonthChanged
RaiseEvent Show_Popup()
End Sub
End Class