Setting focus on text entry portion of DateInput

[Travis Winegar]

Hello,

I am attempting to set focus, using javascript, on the text entry portion of DateInput in my RadDatePicker.  

This is the control.

<telerik:RadDatePicker ID="rdpTransDate" Runat="server"
    SelectedDate='<%# Bind("TransDate") %>' Skin="Black" TabIndex="1">
    <Calendar runat="server" UseColumnHeadersAsSelectors="False"
        UseRowHeadersAsSelectors="False" ViewSelectorText="x"
        Skin="Black"></Calendar>
    <DatePopupButton HoverImageUrl="" ImageUrl="" TabIndex="1" />
    <DateInput ID="diTransDate" runat="server" DateFormat="MM/dd/yyyy"
        DisplayDateFormat="MM/dd/yyyy" TabIndex="1" ></DateInput>
</telerik:RadDatePicker>

I use the following javascript method to set it's focus.

function SaveTabbed() {
    var e = window.event;
    var TABKEY = 9;
    if (e.keyCode == TABKEY) {
        var rdp = $find("ucScrapInput_fvScrapInput_rdpTransDate");
    rdp.get_dateInput().focus();
    }
    return false;
}

The method works just fine except that focus is set on the DatePopupButton rather than the text entry box.  The browser (IE8 in this case) is able to tab to the text field with the Tab and Shift-Tab buttons.  I have removed the TabIndex attributes from all but the DateInput with no change in behavior.  Setting the visibility of the button to false caused focus of the control to be passed to the control with the next TabIndex.

Is there a way to explicitly set focus to the text input portion of the control?

Thank you in advance,

Travis

[Radoslav]

Hello Travis,

To set the focus to the input control of the RadDatePicker you could try using the following code snippet:

var radTextBox = $find("<%=RadDatePicker1.ClientID %>");
radTextBox.get_dateInput()._textBoxElement.focus();

I hope this helps.

All the best,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Travis Winegar]

Thank you for the suggestion but, unfortunately, it doesn't seem to work for me.  Still, the calendar button is focused.  Although I doubt it matters, my RadDatePicker is inside a FormView so I have retained my code here:

var rdp = $find("ucScrapInput_fvScrapInput_rdpTransDate");

Should this adversely affect setting focus on the text input?

[Radoslav]

Hello Travis,

Could you please elaborate a bit more on your scenario. When do you call SaveTabbed function? 

Also getting the control by hardcoded ID is not recommended approach. If you change the ID of the parent control, or wrap it in another control you need to change the ID by which the RadDateTime picker is got.
The better approach is to get the ID of the RadInput on server side (in some of the RadGrid's events) and add it as value to a client side variable via ScriptManager.RegisterStartupScript() method.

Looking forward for your reply.

Kind regards,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Travis Winegar]

Thank you, again, for your help.  The SaveTabbed() method is fired by an onkeydown event of a td as seen here.

<asp:UpdatePanel runat="server" ID="udPanel">
<ContentTemplate>
...
...
<asp:FormView ID="fvScrapInput" runat="server" DataSourceID="odsTransaction">
<InsertItemTemplate>
...
...
<tr>
<td colspan="4" onkeydown="SaveTabbed()">
<asp:Button ID="UpdateButton" runat="server"
CausesValidation="True" CommandName="Insert"
Text="Save" ValidationGroup="Insert"
TabIndex="16" />
&nbsp;
<asp:Button ID="UpdateCancelButton" runat="server"
CausesValidation="False" CommandName="Cancel"
Text="Cancel" />
</td>
</tr>
</table>
</InsertItemTemplate>
...
...
</asp:FormView> .. .  ... </ContentTemplate> </asp:UpdatePanel>

  I'm sure this isn't the proper way of handling this situation but the event does fire so I'll not 'fix' it just yet.  Also, I understand hardcoding the ClientID isn't a great idea.  However, as long as that is not the problem I would prefer to keep it hardcoded (to reduce complexity) until I resolve my focus() problem.

[Travis Winegar]

So I have finally found my problem and want to let you know that your code works just fine.  I changed this line:

onkeydown="SaveTabbed()"

to:

onkeydown="return SaveTabbed();"

and it worked great.  Thank you very much for your assistance!

[Radoslav]

Hi Travis,

I am glad you solved the problem.In case you experience any further problems, do not hesitate to contact us again!

Best wishes,
Radoslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.