RadDatePicker Calendar control tabbing and focus issues.

3 posts, 0 answers
  1. G
    G avatar
    2 posts
    Member since:
    Jul 2016

    Posted 21 Jul Link to this post

    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>

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 26 Jul Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. G
    G avatar
    2 posts
    Member since:
    Jul 2016

    Posted 26 Jul in reply to Konstantin Dikov Link to this post

    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.

Back to Top