|
Rank: Newbie Groups: Member
Joined: 4/6/2008 Posts: 3
|
I have attached a code sample below showing 2 problems:
1. if I set the form the have defaultfocus set to a ec date picker, the curor shows sitting in the year part of the field. <form id="form1" runat="server" defaultfocus="ecArrival_Date"> 2. If I then tab from the year field after going back and entering say 01102008, I tab to the next datepicker field NOT the next text box. I have added TabOrders to each control.
I've tried a variety of things and cannot work out where to go.
Attached is a sample application of what I'm trying to explain.
thanks
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %> <script runat="server" language="vbscript"> Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub </script>
<!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Date tab problems</title> </head> <body> <form id="form1" runat="server" defaultfocus="ecArrival_Date"> <asp:Panel ID="PanelDetails" runat="server" Visible="true"> <eo:TabStrip ID="TabStrip1" runat="server" Width="740px" ControlSkinID="None" MultiRow="false" RowSpacing="-3" MultiPageID="VisitPages"> <TopGroup> <Items> <eo:TabItem Text-Html="Attendance" Width="70" > </eo:TabItem> <eo:TabItem Text-Html="Finance" Width="55"> </eo:TabItem> </Items> </TopGroup> <LookItems> <eo:TabItem Height="21" HoverStyle-CssText="position: relative; top: 2px; background-image: url(00010402); background-repeat: repeat-x" ItemID="_Default" LeftIcon-HoverUrl="00010406" LeftIcon-SelectedUrl="00010408" LeftIcon-Url="00010404" NormalStyle-CssText="position: relative; top: 2px; background-image: url(00010401); background-repeat: repeat-x" RightIcon-HoverUrl="00010407" RightIcon-SelectedUrl="00010409" RightIcon-Url="00010405" SelectedStyle-CssText="background-image: url(00010403); background-repeat: repeat-x" Text-Padding-Bottom="2" Text-Padding-Top="1"> <SubGroup ItemSpacing="1" Style-CssText="background-image:url(00010410);background-position-y:bottom;background-repeat:repeat-x;color:black;cursor:hand;font-family:'Microsoft Sans Serif',Verdana;font-size:8.25pt;"> </SubGroup> </eo:TabItem> </LookItems> </eo:TabStrip> <eo:MultiPage ID="VisitPages" runat="server" Height='180px' Width='100%'>
<eo:PageView ID="PageView1" runat="server" Width="100%" > <br /> <table> <tr><td bgcolor="E3F0FB">Arrival Date*:</td> <td><eo:DatePicker TabIndex="1" ID="ecArrival_Date" runat="server" ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True" PickerFormat="dd/MM/yyyy" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" TitleRightArrowImageUrl="DefaultSubMenuIcon" EnableKeyboardNavigation="True"> <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" /> <PickerStyle CssText="border-bottom-color:#E0E0E0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#E0E0E0;border-left-style:solid;border-left-width:1px;border-right-color:#E0E0E0;border-right-style:solid;border-right-width:1px;border-top-color:#E0E0E0;border-top-style:solid;border-top-width:1px;font-family:Courier New;padding-left:5px;padding-right:5px;" /> <SelectedDayStyle CssText="background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" /> <TitleArrowStyle CssText="cursor:hand" /> <MonthStyle CssText="font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px; font-family: tahoma" /> <DayHeaderStyle CssText="border-bottom: #aca899 1px solid" /> <DayStyle CssText="border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" /> <TodayStyle CssText="border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" /> <OtherMonthDayStyle CssText="color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" /> <TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" /> <DayHoverStyle CssText="border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" /> </eo:DatePicker></td> <td>Arrival Time*: <asp:TextBox TabIndex="2" ID="Arrival_Time" EnableTheming="true" cssClass="required" SkinID="tb" runat="server" Width="80px"></asp:TextBox></td> </tr> </table> <table> <tr> <td>Title</td> <td><asp:TextBox EnableTheming="true" TabIndex="3" cssClass="required" SkinID="tb" ID="Title" runat="server" Width="80px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="Title" font-Bold="true" ForeColor=red runat="server" ErrorMessage="* Title" SetFocusOnError="true"></asp:RequiredFieldValidator></td> </tr> <tr> <td>Perferred names</td><td><asp:TextBox TabIndex="4" ID="Prename" EnableTheming="true" cssClass="required" SkinID="tb" runat="server" Width="150px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="Prename" font-Bold="true" ForeColor=red runat="server" ErrorMessage="* Name" SetFocusOnError="true"></asp:RequiredFieldValidator></td> </tr> <tr> <td>Surname</td><td><asp:TextBox ID="Surname" TabIndex="5" EnableTheming="true" cssClass="required" SkinID="tb" runat="server" Width="150px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" ControlToValidate="surname" font-Bold="true" ForeColor=red runat="server" ErrorMessage="* Surname" SetFocusOnError="true"></asp:RequiredFieldValidator></td> </tr> <tr><td>Date Of Birth:</td> <td><table> <tr><td><eo:DatePicker TabIndex="6" ID="ecDOB" runat="server" ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True" PickerFormat="dd/MM/yyyy" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" TitleRightArrowImageUrl="DefaultSubMenuIcon" > <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" /> <PickerStyle CssText="border-bottom-color:#E0E0E0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#E0E0E0;border-left-style:solid;border-left-width:1px;border-right-color:#E0E0E0;border-right-style:solid;border-right-width:1px;border-top-color:#E0E0E0;border-top-style:solid;border-top-width:1px;font-family:Courier New;padding-left:5px;padding-right:5px;" /> <SelectedDayStyle CssText="background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" /> <TitleArrowStyle CssText="cursor:hand" /> <MonthStyle CssText="font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px; font-family: tahoma" /> <DayHeaderStyle CssText="border-bottom: #aca899 1px solid" /> <DayStyle CssText="border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" /> <TodayStyle CssText="border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" /> <OtherMonthDayStyle CssText="color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" /> <TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" /> <DayHoverStyle CssText="border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" /> </eo:DatePicker></td> </tr></table> </td></tr> <tr><td>Medicare Number:</td><td><asp:TextBox TabIndex="7" ID="Medicare_Number" runat="server"></asp:TextBox></td></tr> </table> </eo:PageView> <eo:PageView ID="PageView2" runat="server" Width="100%"> <br /> <table> <tr> <td>Veterans Affairs Num</td> <td><asp:TextBox ID="Veterans_Affairs_Num" runat="server"></asp:TextBox></td> </tr> <tr> <td>Employer</td> <td><asp:TextBox ID="Employer" runat="server" Width="250"></asp:TextBox></td> </tr> <tr> <td>Employer Phone</td> <td><asp:TextBox ID="Employer_Phone" runat="server" Width="100"></asp:TextBox></td> </tr> </table> </eo:PageView> </eo:MultiPage> </asp:Panel> </form> </body> </html>
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi, The DatePicker itself is not an input element. It hosts a textbox that accepts user input. So both focus or tabindex need to be set on that textbox instead of the DatePicker. The following code demonstrates how to set the focus: 1. Place this code before the DatePicker in the page:
Code: JavaScript
function FocusDatePicker()
{
//Get the textbox element for ecArrival_Date
var textbox = document.getElementById(
"_eo_" + "<%=ecArrival_Date.ClientID%>" + "_picker");
//Set tabindex
textbox.tabIndex = 1;
//Wait until onfocus handler is hooked up
if (!textbox.onfocus)
{
window.setTimeout("FocusDatePicker()", 10);
return;
}
//Focus textbox
textbox.focus();
//IE sometimes failed to fire onfocus handler, so we manually
//call it here
textbox.onfocus();
}
2. Call the above function with your DatePicker's ClientSideOnLoad:
Code: HTML/ASPX
<eo:DatePicker ClientSideOnLoad="FocusDatePicker" ...>
....
</eo:DatePicker>
That should get you going. Thanks
|
|
Rank: Newbie Groups: Member
Joined: 4/6/2008 Posts: 3
|
Thanks for the quick response. It has fixied the initial focus point to the day for the arrival date which is great. And the tab order from there is good. I then added another set of javascript code for the Date of Birth datepicker - to be tab 6. when I do this the initial focus goes to this date field and not the first one. I have experiemented with removing the textbox.focus(), and various other options. By taking out the textbox focus, it goes to the corrent initial focus point of the arrival date, but then when I get the the date of birth box I have to tab twice to get to the day text box. Thanks
Code: HTML/ASPX
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<script runat="server" language="vbscript">
Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
</script>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Date tab problems</title>
</head>
<body>
<form id="form1" runat="server" defaultfocus="ecArrival_Date">
<asp:Panel ID="PanelDetails" runat="server" Visible="true">
<eo:TabStrip ID="TabStrip1" runat="server" Width="740px" ControlSkinID="None" MultiRow="false" RowSpacing="-3" MultiPageID="VisitPages">
<TopGroup>
<Items>
<eo:TabItem Text-Html="Attendance" Width="70" >
</eo:TabItem>
<eo:TabItem Text-Html="Finance" Width="55">
</eo:TabItem>
</Items>
</TopGroup>
<LookItems>
<eo:TabItem Height="21" HoverStyle-CssText="position: relative; top: 2px; background-image: url(00010402); background-repeat: repeat-x"
ItemID="_Default" LeftIcon-HoverUrl="00010406" LeftIcon-SelectedUrl="00010408"
LeftIcon-Url="00010404" NormalStyle-CssText="position: relative; top: 2px; background-image: url(00010401); background-repeat: repeat-x"
RightIcon-HoverUrl="00010407" RightIcon-SelectedUrl="00010409" RightIcon-Url="00010405"
SelectedStyle-CssText="background-image: url(00010403); background-repeat: repeat-x"
Text-Padding-Bottom="2" Text-Padding-Top="1">
<SubGroup ItemSpacing="1" Style-CssText="background-image:url(00010410);background-position-y:bottom;background-repeat:repeat-x;color:black;cursor:hand;font-family:'Microsoft Sans Serif',Verdana;font-size:8.25pt;">
</SubGroup>
</eo:TabItem>
</LookItems>
</eo:TabStrip>
<eo:MultiPage ID="VisitPages" runat="server" Height='180px' Width='100%'>
<eo:PageView ID="PageView1" runat="server" Width="100%" >
<br />
<table>
<tr><td bgcolor="E3F0FB">Arrival Date*:</td>
<td>
<script type="text/javascript">
function FocusDatePicker()
{
//Get the textbox element for ecArrival_Date
var textbox = document.getElementById(
"_eo_" + "<%=ecArrival_Date.ClientID%>" + "_picker");
//Set tabindex
textbox.tabIndex = 1;
//Wait until onfocus handler is hooked up
if (!textbox.onfocus)
{
window.setTimeout("FocusDatePicker()", 10);
return;
}
//Focus textbox
textbox.focus();
//IE sometimes failed to fire onfocus handler, so we manually
//call it here
textbox.onfocus();
}
</script>
<eo:DatePicker TabIndex="1" ID="ecArrival_Date" runat="server" ControlSkinID="None" DayCellHeight="16"
DayCellWidth="19" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
PickerFormat="dd/MM/yyyy" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon" EnableKeyboardNavigation="True"
ClientSideOnLoad="FocusDatePicker"
>
<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" />
<PickerStyle CssText="border-bottom-color:#E0E0E0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#E0E0E0;border-left-style:solid;border-left-width:1px;border-right-color:#E0E0E0;border-right-style:solid;border-right-width:1px;border-top-color:#E0E0E0;border-top-style:solid;border-top-width:1px;font-family:Courier New;padding-left:5px;padding-right:5px;" />
<SelectedDayStyle CssText="background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<TitleArrowStyle CssText="cursor:hand" />
<MonthStyle CssText="font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px; font-family: tahoma" />
<DayHeaderStyle CssText="border-bottom: #aca899 1px solid" />
<DayStyle CssText="border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<TodayStyle CssText="border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
<OtherMonthDayStyle CssText="color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
<DayHoverStyle CssText="border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
</eo:DatePicker></td>
<td>Arrival Time*: <asp:TextBox TabIndex="2" ID="Arrival_Time" EnableTheming="true" cssClass="required" SkinID="tb" runat="server" Width="80px"></asp:TextBox></td>
</tr>
</table>
<table>
<tr>
<td>Title</td>
<td><asp:TextBox EnableTheming="true" TabIndex="3" cssClass="required" SkinID="tb" ID="Title" runat="server" Width="80px"></asp:TextBox> <asp:RequiredFieldValidator
ID="RequiredFieldValidator1" ControlToValidate="Title" font-Bold="true" ForeColor=red runat="server" ErrorMessage="* Title" SetFocusOnError="true"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>Perferred names</td><td><asp:TextBox TabIndex="4" ID="Prename" EnableTheming="true" cssClass="required" SkinID="tb" runat="server" Width="150px"></asp:TextBox> <asp:RequiredFieldValidator
ID="RequiredFieldValidator2" ControlToValidate="Prename" font-Bold="true" ForeColor=red runat="server" ErrorMessage="* Name" SetFocusOnError="true"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>Surname</td><td><asp:TextBox ID="Surname" TabIndex="5" EnableTheming="true" cssClass="required" SkinID="tb" runat="server" Width="150px"></asp:TextBox> <asp:RequiredFieldValidator
ID="RequiredFieldValidator3" ControlToValidate="surname" font-Bold="true" ForeColor=red runat="server" ErrorMessage="* Surname" SetFocusOnError="true"></asp:RequiredFieldValidator></td>
</tr>
<tr><td>Date Of Birth:</td>
<td><table>
<tr><td>
<script type="text/javascript">
function FocusDOBDatePicker()
{
//Get the textbox element for ecArrival_Date
var textbox = document.getElementById(
"_eo_" + "<%=ecDOB.ClientID%>" + "_picker");
//Set tabindex
textbox.tabIndex = 6;
//Wait until onfocus handler is hooked up
if (!textbox.onfocus)
{
window.setTimeout("FocusDOBDatePicker()", 10);
return;
}
//Focus textbox
textbox.focus();
//IE sometimes failed to fire onfocus handler, so we manually
//call it here
textbox.onfocus();
}
</script>
<eo:DatePicker ID="ecDOB" runat="server" ControlSkinID="None" DayCellHeight="16"
DayCellWidth="19" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
PickerFormat="dd/MM/yyyy" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon"
ClientSideOnLoad="FocusDOBDatePicker"
>
<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" />
<PickerStyle CssText="border-bottom-color:#E0E0E0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#E0E0E0;border-left-style:solid;border-left-width:1px;border-right-color:#E0E0E0;border-right-style:solid;border-right-width:1px;border-top-color:#E0E0E0;border-top-style:solid;border-top-width:1px;font-family:Courier New;padding-left:5px;padding-right:5px;" />
<SelectedDayStyle CssText="background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<TitleArrowStyle CssText="cursor:hand" />
<MonthStyle CssText="font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px; font-family: tahoma" />
<DayHeaderStyle CssText="border-bottom: #aca899 1px solid" />
<DayStyle CssText="border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<TodayStyle CssText="border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
<OtherMonthDayStyle CssText="color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
<DayHoverStyle CssText="border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
</eo:DatePicker></td>
</tr></table>
</td></tr>
<tr><td>Medicare Number:</td><td><asp:TextBox TabIndex="7" ID="Medicare_Number" runat="server"></asp:TextBox></td></tr>
</table>
</eo:PageView>
<eo:PageView ID="PageView2" runat="server" Width="100%">
<br />
<table>
<tr>
<td>Veterans Affairs Num</td>
<td><asp:TextBox ID="Veterans_Affairs_Num" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Employer</td>
<td><asp:TextBox ID="Employer" runat="server" Width="250"></asp:TextBox></td>
</tr>
<tr>
<td>Employer Phone</td>
<td><asp:TextBox ID="Employer_Phone" runat="server" Width="100"></asp:TextBox></td>
</tr>
</table>
</eo:PageView>
</eo:MultiPage>
</asp:Panel>
</form>
</body>
</html>
|
|
Rank: Newbie Groups: Member
Joined: 4/6/2008 Posts: 3
|
Odd - I have just copied and pasted the code into another aspx page that has multiple date and all is working fine!! It must be something I have done.
Again, thank you for your time.
|
|