RadDatePicker Calendar control tabbing and focus issues.

[G]

I have two RadDatePicker control for Start Date and End Date selections. The tabbing should be in order from Start Date textbox (tabindex=1), then to Start Date calendar icon(tabindex=2), then to End Date textbox(tabindex=3) and to End Date calendar icon(tabindex=4).

My issues were every time I hit the Start Date calendar icon and select a date, the focus always appear on the Textbox of Start Date and the tabbing start in Start Date textbox. Even I hit the End Date calendar icon and after selecting a date, the tabbing start in Start Date textbox again.

I want the focus stay in the calendar icon every time I select a date, so that the tabbing will be in order.

Please help...I spent a lot of time of searching a solutions in the internet and can't find anything that I can use. Thanks in advance....

<tr>
   <td width="160px">Start Date</td>
    <td>
                                <telerik:RadDatePicker ID="dtFrom" runat="server" title="Start Date Entry" TabIndex="1" >
                                    <DatePopupButton ToolTip="Open Start Date Calendar popup" />                                    
                                    <Calendar ID="Calendar1"  runat="server" NavigationNextToolTip="NextMonth" NavigationPrevTooltip="PreviousMonth" FastNavigationNextToolTip="NextMonth3" FastNavigationPrevToolTip="PreviousMonth3" EnableKeyboardNavigation="true" TabIndex="2" CalendarCaption="Start Date Calendar">
                                    </Calendar>   
                                </telerik:RadDatePicker>
                                <asp:RequiredFieldValidator ID="rvStart" runat="server" ErrorMessage="Travel Start Date is Required" ControlToValidate="dtFrom"></asp:RequiredFieldValidator>

    </td>
  </tr>
   <tr>
   <td>End Date                                                     
    </td>
    <td>
                                <telerik:RadDatePicker ID="dtTo" name="dtTo" runat="server" title="End Date Entry" TabIndex="3">
                                    <DatePopupButton ToolTip="Open End Date Calendar popup" />
                                    <Calendar ID="Calendar2" runat="server" NavigationNextToolTip="NextMonth" NavigationPrevTooltip="PreviousMonth" FastNavigationNextToolTip="NextMonth3" FastNavigationPrevToolTip="PreviousMonth3" EnableKeyboardNavigation="true" TabIndex="4" CalendarCaption="End Date Calendar">
                                    </Calendar>
                                </telerik:RadDatePicker>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Travel End Date is Required" ControlToValidate="dtTo"></asp:RequiredFieldValidator>

</td>
 </tr>

 

[Konstantin Dikov]

Hello,

For manually setting the focus you could handle the client-side OnValueChanged event, get reference to the icon and focus it:

<script>
    function handleFocusOnChange(sender, args) {
        sender.get_owner().get_popupButton().focus();
    }
</script>

<telerik:RadDatePicker ID="dtFrom" runat="server" title="Start Date Entry" DateInput-ClientEvents-OnValueChanged="handleFocusOnChange" TabIndex="1">
...

The same function could be applied to all pickers.

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress

[G]

Konstantin, I took your advice and it works wonderfully in my page.

Thank you so much for your help. This telerik forum really helps me.

Keep up the good works and deeds of helping others!!! Thanks.