|
|
Rank: Member
Groups: Member
Joined: 3/16/2009
Posts: 23
|
I have a large data entry form with MANY input fields and at least 20 Date Pickers. The Date Picker has been a great tool to make data entry better.
The thing I am noticing is that the page takes awhile to load and twitches a lot and seems to be resizing the Date Pickers etc. I see in the source code you seem to be setting up some init events in javascript.
Is there a way to optimize this so the page load happens quicker?
What I mean is, is there anything I can do to set up the Date Pickers that will help them load quicker? Some property settings or ???
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Unfortunately no. The root of the problem is that you have too many DatePickers, since it takes time for each DatePicker to load, they add up. The best solution for such scenario is to use one DatePicker only and then move the DatePicker to the desired location with JavaScript. You can take a look of our Grid and you will see we use DatePicker this way.
Thanks!
|
|
Rank: Member
Groups: Member
Joined: 3/16/2009
Posts: 23
|
How many is too many? What are they doing when the page loads? Seems like there wouldn't be much to do until the user needs it.
The thing about moving one date picker is that the input fields aren't in a grid. They are all over the place. In fact, I am using your multi page to create a client side wizard, with six pages. I would need to be able to handle that, and be able to move the datepicker whether the user clicks in the input OR tabs into it from the previous field. Do you have a javascript sample you could send that handles that?
thanks
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, As to "how many", it really depends on your situation. The DatePicker already does a lot of optimizations. Two things happen during page load --- the browser loads the HTML, then calls our initialization script. Both take time. We could certainly provide more detail to you about what the initialization does but it's not likely that we will be able to find a breakthrough immediately. I understand delaying the loading until user clicks the drop down would one potential improvement worth looking into. But that will probably take some time. As to moving the DatePicker, it really has nothing to do with the Grid. We mentioned about the Grid is only to give you an example that this can be done. The basic method idea is that you can have a few absolute positioned DatePicker in your page. Then as soon as you "activate" something, in your page, for example, a PageView, you would move those DatePicker into position. This is very easy to do if you have a fixed layout. For example, you can have:
Code: HTML/ASPX
<div id="divDatePicker1" style="position:absolute;left:-1000;top:-1000">
....Place a date picker here
</div>
Code: JavaScript
function MoveDatePicker()
{
var div1 = document.getElementById("divDatePicker1");
div.style.top = "100px";
div.style.left = "200px";
}
If your page does not have a fix layout, then it will be more complicated because you won't know exactly what value to give to style.top and style.left. In that case if you already have some code that get the page location of any DHTML element, you can call that code to get such values. If you do not, you can try to set up a container element (for example, another div), then "move" the Calendar into that div by:
Code: JavaScript
var div1 = document.getElementById("divDatePicker1");
div1.parentNode.removeChild(div1);
var div2 = document.getElementById("divDatePicker1Holder");
div2.appendChild(div1);
In any case, because you are reusing DatePickers, you will need to use JavaScript to get and save the DatePicker value before you reuse it for another field, for example, when you switching to another PageView. We also have a PopupCalendar control that can be another option. PopupCalendar is essentially a DatePicker without the textbox part. You can code the textbox part by yourself but invoke the PopupCalendar with JavaScript when needed. That way you can use one PopupCalendar control for all your "date textboxes", and still no need to worry about moving/saving value because the textbox are always there and the values are stored by the TextBox, not by the PopupCalendar. Hope this helps. Thanks!
|
|
Rank: Member
Groups: Member
Joined: 3/16/2009
Posts: 23
|
I decided to try the pop up calendar, but I keep getting the error that says the Object doesn't exist or isn't a Popup Calendar. Why would I get that?
Code: HTML/ASPX
<asp:TextBox ID="TextBox1" runat="server" Width="561px"></asp:TextBox>
<input id="Button2" type="button" value="button" onclick="eo_ShowPopupCalendar(<%=PopupCalendar1.ClientID %>, <%=TextBox1.ClientID %>);" />
<eo:PopupCalendar ID="PopupCalendar1" runat="server" ControlSkinID="None"
DayCellHeight="15" DayCellWidth="31" DayHeaderFormat="Short" DisabledDates=""
OtherMonthDayVisible="True" SelectedDates="" TitleFormat="MMMM, yyyy"
TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon" VisibleDate="2009-04-01">
<TitleStyle CssText="font-family:Verdana;font-size:8.75pt;padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:5px;" />
<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;" />
<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;" />
<DayHeaderStyle CssText="font-family:Verdana;font-size:8pt;border-bottom: #f5f5f5 1px solid" />
<DayStyle CssText="font-family:Verdana;font-size:8pt;" />
<SelectedDayStyle CssText="font-family:Verdana;font-size:8pt;background-image:url('00040403');color:Brown;" />
<DisabledDayStyle CssText="font-family:Verdana;font-size:8pt;color: gray" />
<TodayStyle CssText="font-family:Verdana;font-size:8pt;background-image:url('00040401');color:#1176db;" />
<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}"></img></td>
<td valign="center">
Today: {var:today:MM/dd/yyyy}</td>
</tr>
</table>
</FooterTemplate>
<TitleArrowStyle CssText="cursor: hand" />
</eo:PopupCalendar>
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, I believe it should be:
Code: JavaScript
eo_ShowPopupCalendar(
'<%=PopupCalendar1.ClientID%>',
document.getElementById('<%=TextBox1.ClientID%>'));
The first parameter is a string. So you must enclose it with quotes. The second parameter is a DHTML element, so you must first call getElementById to get the DHTML element. Thanks!
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Just an additional note. The second parameter can be a string as well. So document.getElementById is not necessary. However the quotes are still necessary.
Thanks!
|
|
Rank: Member
Groups: Member
Joined: 3/16/2009
Posts: 23
|
OK, that fixed it. You might want to update your help file to make that a little more clear that the parameters are of type string.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Cool. Glad to hear that you got it working. And thank you very for the suggestion about making it more clear about the types in the help file!
|
|