Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Date Pickers slowing page load to over 1 minute

Date Pickers slowing page load to over 1 minute Options
Previous Topic · Next Topic
Colin
Posted: Thursday, July 3, 2008 5:29:47 AM
Rank: Advanced Member
Groups: Member

Joined: 2/1/2008
Posts: 35
Hi,

I have a form with 40 rows each requiring their own DatePicker to choose a date relevant to that row/record.

When I place the DatePickers on the form, it takes 90 seconds to load in a browser, when I remove the DatePickers, it only takes 2 seconds.

The form and all the DatePickers sit inside an Ajax Update Panel, if the DatePickers are set to visible = false, the form loads within 2 seconds.

The DatePicker code is further below and doesn't appear tp create a problem apart from where it states "width" & valign "centre" for the todays date section which throws a newer construct is recommended.

Please advise what is taking so long to render the page and can it be cured.

Regards,
Colin.

<eo:DatePicker ID="DatePicker40" runat="server" ControlSkinID="None" DayCellHeight="15"
DayCellWidth="31" DayHeaderFormat="Short" DisabledDates="" OtherMonthDayVisible="True"
PickerFormat="dd/MM/yyyy" SelectedDates="" Style="left: 80px; position: absolute;
top: 1638px" TitleFormat="MMMM, yyyy" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon" VisibleDate="2008-06-01" SelectedDate='<%# Bind("CentreSilencerDefDate", "{0:d}") %>' Width="83px" OnPreRender="DatePicker40_PreRender">
<TodayStyle CssText="font-family:Verdana;font-size:8pt;background-image:url('00040401');color:#1176db;" />
<SelectedDayStyle CssText="font-family:Verdana;font-size:8pt;background-image:url('00040403');color:Brown;" />
<PopupExpandEffect Type="GlideLeftToRight" />
<DisabledDayStyle CssText="font-family:Verdana;font-size:8pt;color: gray" />
<FooterTemplate>
<table border="0" cellpadding="0" cellspacing="5" style="font-size: 11px; font-family: Verdana">
<tr>

<td width="30">
</td>
<td valign="center">
<img src="{img:00040401}"></td>
<td valign="center">

Today: {var:today:MM/dd/yyyy}</td>

</tr>
</table>
</FooterTemplate>
<PopupCollapseEffect Type="GlideRightToLeft" />
<PickerStyle CssText="font-size:8pt;" />
<CalendarStyle CssText="background-color:white;border-bottom-color:Silver;border-bottom-style:solid;border-bottom-width:1px;border-left-color:Silver;border-left-style:solid;border-left-width:1px;border-right-color:Silver;border-right-style:solid;border-right-width:1px;border-top-color:Silver;border-top-style:solid;border-top-width:1px;color:#2C0B1E;padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:5px;" />
<TitleArrowStyle CssText="cursor: hand" />
<DayHoverStyle CssText="font-family:Verdana;font-size:8pt;background-image:url('00040402');color:#1c7cdc;" />
<MonthStyle CssText="cursor:hand;margin-bottom:0px;margin-left:4px;margin-right:4px;margin-top:0px;" />
<TitleStyle CssText="font-family:Verdana;font-size:8.75pt;padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:5px;" />
<DayHeaderStyle CssText="font-family:Verdana;font-size:8pt;border-bottom: #f5f5f5 1px solid" />
<DayStyle CssText="font-family:Verdana;font-size:8pt;" />
</eo:DatePicker>
Back to top
 
eo_support
Posted: Thursday, July 3, 2008 8:20:30 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,221
Hi Colin,

You definitely do not want to create 40 DatePickers. As you have discovered, DatePicker is a rather heavy control and 90 of them will take forever to load. We could optimize some but it is not realistic to expect speeding it up from 90 seconds to a few seconds. Usually you should only create one DatePicker and then reuse it because under most design there is only one "active" row/record. You can take a look of our Grid for an example of using it this way:

http://www.essentialobjects.com/Demo/Default.aspx?path=Grid\_i1\_i6

The Grid only uses one DatePicker. The basic idea is to place the DatePicker inside a container element (for example, a div), then call some JavaScript code to show/hide/move the DatePicker when a row is activated.

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.