Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Formatting problem in a Date Picker in the Grid control

Formatting problem in a Date Picker in the Grid control Options
Previous Topic · Next Topic
Camarate
Posted: Wednesday, February 23, 2011 2:39:21 PM
Rank: Advanced Member
Groups: Member

Joined: 9/2/2010
Posts: 120
Hi,

I'm having format problems in a datetime column when I use the datepicker. When I click the datepicker button are alternating the following table without proper formatting, when I click the month/year navigation buttons.



The code page that shows the error is below:

Quote:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TestGridDatePicker._Default" %>

<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>

<!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>Date Picker in Grid</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<eo:Grid ID="grdData" runat="server" BackColor="#F0F0F0" BorderColor="#C7D1DF"
BorderWidth="1px" ColumnHeaderAscImage="00050303" ColumnHeaderDescImage="00050304"
ColumnHeaderDividerImage="00050302" FixedColumnCount="1" Font-Bold="False" Font-Italic="False"
Font-Names="Verdana" Font-Overline="False" Font-Size="9pt" Font-Strikeout="False"
Font-Underline="False" FullRowMode="False" GridLineColor="199, 209, 223" GridLines="Both"
Height="232px" ItemHeight="35" Width="832px" AllowNewItem="True">
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
<ItemStyles>
<eo:GridItemStyleSet>
<ItemStyle CssText="background-color: white" />
<ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x" />
<SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x" />
<CellStyle CssText="padding-left:8px;padding-top:2px; color:#336699;white-space:nowrap;" />
</eo:GridItemStyleSet>
</ItemStyles>
<ColumnTemplates>
<eo:TextBoxColumn>
<TextBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; FONT-FAMILY: Tahoma" />
<CellStyle CssText="color:#003399;" />
</eo:TextBoxColumn>
<eo:DateTimeColumn DataFormat="dd/MM/yyyy">
<DatePicker ControlSkinID="None" CssBlock="
&lt;style type=&quot;text/css&quot;&gt;
a.eo_calendar_style1_title_button
{
width: 21px;
height: 17px;
border-right: #f3f3f3 1px solid;
border-top: #f3f3f3 1px solid;
border-left: #f3f3f3 1px solid;
border-bottom: #f3f3f3 1px solid;
background-color: transparent;
}

a.eo_calendar_style1_title_button:hover
{
width: 21px;
height: 17px;
border-right: #0044ff 1px solid;
border-top: #0044ff 1px solid;
border-left: #0044ff 1px solid;
border-bottom: #0044ff 1px solid;
background-color: #aaaaff
}
&lt;/style&gt;
" DayCellHeight="15" DayCellWidth="24" DayHeaderFormat="FirstLetter" DisabledDates="" DisableWeekendDays="True" PickerFormat="dd/MM/yyyy"
SelectedDates="" TabIndex="-1" TitleLeftArrowImageUrl="" TitleRangeSeparator="">
<TitleTemplate>
<table border="0" cellpadding="0" cellspacing="0" height="30px" style="background-color: #f3f3f3;
color: #003399; font-weight: bold; font-size: 12px; font-family: tahoma;" width="100%">
<tr>
<!-- Previous Year -->
<td>
<a class="eo_calendar_style1_title_button" href="javascript: void {var:this}.goTo(-12);">
<img border="0" src="{img:00040302}" />
</a>
</td>
<!-- Previous Month -->
<td>
<a class="eo_calendar_style1_title_button" href="javascript: void {var:this}.goTo(-1);">
<img border="0" src="{img:00040301}" />
</a>
</td>
<!-- Current Month -->
<td align="center" style="text-transform: uppercase;" width="99%">
{var:visible_date:MMM/yyyy}
</td>
<!-- Next Month -->
<td>
<a class="eo_calendar_style1_title_button" href="javascript: void {var:this}.goTo(1);">
<img border="0" src="{img:00040303}" />
</a>
</td>
<!-- Next Year -->
<td>
<a class="eo_calendar_style1_title_button" href="javascript: void {var:this}.goTo(12);">
<img border="0" src="{img:00040304}" />
</a>
</td>
</tr>
</table>
</TitleTemplate>
<SelectedDayStyle CssText="BORDER-BOTTOM: #003399 1px solid; BORDER-LEFT: #003399 1px solid; BACKGROUND-COLOR: lightcyan; FONT-FAMILY: verdana; FONT-SIZE: 8pt; BORDER-TOP: #003399 1px solid; BORDER-RIGHT: #003399 1px solid" />
<DisabledDayStyle CssText="BORDER-BOTTOM-COLOR: #cfd9c0; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-COLOR: #cfd9c0; FONT-FAMILY: verdana; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; COLOR: gray; BORDER-RIGHT-COLOR: #cfd9c0; FONT-SIZE: 8pt; BORDER-LEFT-COLOR: #cfd9c0; BORDER-LEFT-WIDTH: 1px" />
<PickerStyle CssText="FONT-FAMILY: Verdana; COLOR: #003399; FONT-SIZE: 9pt" />
<CalendarStyle CssText="BORDER-BOTTOM: #555566 1px solid; BORDER-LEFT: #555566 1px solid; BACKGROUND-COLOR: #f2ffff; BORDER-TOP: #555566 1px solid; BORDER-RIGHT: #555566 1px solid" />
<DayHoverStyle CssText="BORDER-BOTTOM-COLOR: #bbbbbb; BORDER-RIGHT-WIDTH: 1px; BACKGROUND-COLOR: #ddeeff; BORDER-TOP-COLOR: #bbbbbb; FONT-FAMILY: verdana; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-RIGHT-COLOR: #bbbbbb; FONT-SIZE: 8pt; BORDER-LEFT-COLOR: #bbbbbb; BORDER-LEFT-WIDTH: 1px" />
<MonthStyle CssText="FONT-FAMILY: Verdana; COLOR: #003399; FONT-SIZE: 11pt; CURSOR: hand" />
<DayHeaderStyle CssText="CLIP: rect(auto auto auto auto); BORDER-BOTTOM: #555566 1px solid; PADDING-BOTTOM: 3px; TEXT-TRANSFORM: uppercase; BACKGROUND-COLOR: #003399; FONT-FAMILY: verdana; COLOR: white; FONT-SIZE: 11px; FONT-WEIGHT: bold; PADDING-TOP: 3px" />
<DayStyle CssText="BORDER-BOTTOM-COLOR: #cfd9c0; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-COLOR: #cfd9c0; FONT-FAMILY: verdana; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-RIGHT-COLOR: #cfd9c0; FONT-SIZE: 8pt; BORDER-LEFT-COLOR: #cfd9c0; BORDER-LEFT-WIDTH: 1px" />
</DatePicker>
</eo:DateTimeColumn>
<eo:MaskedEditColumn>
<MaskedEdit ControlSkinID="None" TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;">
</MaskedEdit>
</eo:MaskedEditColumn>
</ColumnTemplates>
<Columns>
<eo:RowNumberColumn Width="35">
</eo:RowNumberColumn>
<eo:DateTimeColumn DataFormat="" DataType="DateTime" HeaderText="Date" Name="RWPR_DT_RENEWAL_PROCESS"
Width="120">
<DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" DayHeaderFormat="FirstLetter"
DisabledDates="" OtherMonthDayVisible="True" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon">
<TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
<SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<PickerStyle CssText="font-family:Courier New; padding-left:5px; padding-right: 5px;" />
<CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
<TitleArrowStyle CssText="cursor:hand" />
<DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
<MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
<OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
<DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
</DatePicker>
</eo:DateTimeColumn>
<eo:TextBoxColumn DataType="String" HeaderText="Description" Name="RWPR_DS_RENEWAL_PROCESS"
TextBoxMaxLength="2000" TextBoxMode="MultiLine" Width="650">
</eo:TextBoxColumn>
</Columns>
<ColumnHeaderStyle CssText="background-image:url('00050301');padding-left:8px;padding-top:2px;font-weight: bold;color:white;" />
</eo:Grid>
</div>
</form>
</body>
</html>


Am I doing something wrong? How do I fix this error?

Thanks in advance, Marcelo Camarate
Back to top
 
eo_support
Posted: Wednesday, February 23, 2011 8:46:37 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

We have confirmed this to be a bug. We will fix this problem and post an update build as soon as possible.

In the mean time, you can avoid the problem by removing the DatePicker definition inside template columns and only define the DatePicker in the actual column.

Thanks!
Back to top
 
eo_support
Posted: Thursday, February 24, 2011 10:45:51 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

We have posted a new build that should fix this problem. Please see your private message for the download location.

Thanks!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.