Welcome Guest Search | Active Topics | Sign In | Register

DatePicker and TabIndex Options
Loren Dorez
Posted: Monday, September 28, 2009 7:36:13 PM
Rank: Advanced Member
Groups: Member

Joined: 1/9/2009
Posts: 97
Hello When i set the DatePickers Tab Index to 1 and the Textbox bewlow it to 2 and the button below it to 3 and loads the page the DatePicker tabs to the Address bar

I have copied a sample file as well to show this issue

Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TEST.aspx.cs" Inherits="TEST" %>

<%@ 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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <eo:DatePicker ID="DatePicker1" runat="server" ControlSkinID="None" 
            DayCellHeight="15" DayCellWidth="31" DayHeaderFormat="Short" DisabledDates="" 
            OtherMonthDayVisible="True" SelectedDates="" TabIndex="1" 
            TitleFormat="MMMM, yyyy" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" 
            TitleRightArrowImageUrl="DefaultSubMenuIcon" VisibleDate="2009-09-01">
            <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;" />
            <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}"></img></td>
                        <td valign="center">
                            Today: {var:today:MM/dd/yyyy}</td>
                    </tr>
                </table>
            </FooterTemplate>
            <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>
        <asp:TextBox ID="TextBox1" runat="server" TabIndex="2"></asp:TextBox>
        <asp:Button ID="Button1"
            runat="server" Text="Button" TabIndex="3" />
    </div>
    </form>
</body>
</html>


Code: C#
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class TEST : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}
eo_support
Posted: Monday, September 28, 2009 10:19:39 PM
Rank: Administration
Groups: Administration

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

You won't be able to set TabIndex on the DatePicker directly. You can try to set the textbox's TabIndex with the following code:

Code: JavaScript
function init_datepicker()
{
    var textbox = document.getElementById("_eo_DatePicker1_picker");
    textbox.tabIndex = 1;
}


Code: HTML/ASPX
<eo:DatePicker ClientSideOnLoad="init_datepicker" ....>
...
</eo:DatePicker>


Hope this helps.

Thanks
Loren Dorez
Posted: Tuesday, September 29, 2009 10:13:31 PM
Rank: Advanced Member
Groups: Member

Joined: 1/9/2009
Posts: 97
I have a code sample in which im doing this but it works on my test page only if i do not have the DP inside a Dialog Box.

Basicaly what happens is the user clicks and Edit Link which open your dialog box where the DP is and it doesnt want to Tab properly only when within the dialog. I even set teh example JS you have at the top and bottom of the Page and still doesnt work properly.
Loren Dorez
Posted: Tuesday, September 29, 2009 10:37:41 PM
Rank: Advanced Member
Groups: Member

Joined: 1/9/2009
Posts: 97
I was missing the "_" in the beginning of the Picker it appears to be working now Must have happend during copying form TEST to Production page


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.