Tab index fails once after selecting date in telerik:RadDatePicker

5 posts, 0 answers
  1. Mahendra
    Mahendra avatar
    3 posts
    Member since:
    Oct 2012

    Posted 01 Dec 2014 Link to this post

    Hi,
      We are using telerik:RadDatePicker for date field, we have a page with multiple input controls and with tab index set to those controls.
    When go to RadDatePicker field and after selecting date (using Calendar control), we loose the focus.
    Then if we press "tab key", focus move to control with tab index=1, instead of next control.

    Refer  attached screenshot, with tab index order (marked inside red color circle).


  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 04 Dec 2014 Link to this post

    Hello Mahendra,

    I have to say that the experienced behavior is expected and is caused by the fact that the focus is lost after a date is selected. In order to avoid this you can focus the control using JavaScript as demonstrated below.

    ASPX:
    <telerik:RadDatePicker runat="server" ClientEvents-OnDateSelected="dateSelected"></telerik:RadDatePicker>

    JavaScript:
    function dateSelected(sender, args) {
                    var control = sender;
                    setTimeout(function () {
                        control.get_dateInput().focus()
                    }, 1);
                }

    Regards,
    Angel Petrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mahendra
    Mahendra avatar
    3 posts
    Member since:
    Oct 2012

    Posted 04 Dec 2014 in reply to Angel Petrov Link to this post

    Hi Angel,
      Thanks for the reply, I achieved the same by using below approach.

    function RadDatePickerSelected(sender, eventArgs) {
    var DateCtrl = document.getElementById(sender.get_id() + "_dateInput");
    DateCtrl.focus();
    }

    Now I am facing same issue with "telerik:GridDateTimeColumn". please suggest a solution for this.
  5. Mahendra
    Mahendra avatar
    3 posts
    Member since:
    Oct 2012

    Posted 04 Dec 2014 in reply to Angel Petrov Link to this post

    Hi Angel,
      Thanks for your reply, I have sorted out with below method.

    function RadDatePickerSelected(sender, eventArgs) {
    var DateCtrl = document.getElementById(sender.get_id() + "_dateInput");
    DateCtrl.focus();
    }
  6. Abdul Moiz
    Abdul Moiz avatar
    2 posts
    Member since:
    May 2015

    Posted 30 May 2015 Link to this post

    Hi Petrov,

     Thank you , your solution helped me out of that problem..:)

     Regards,

     Abdul Moiz Ansari.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017