Setting Focus to the First Kendo Control (DropDownList or Textbox)

2 posts, 0 answers
  1. Steven
    Steven avatar
    3 posts
    Member since:
    Sep 2015

    Posted 11 Jul Link to this post

    We have a number of pages that execute a common javascript function that sets the first kendo control to have focus.  When the first control is a text box all browsers are setting focus when the page loads.  When the first control is a dropdownlist, IE works but Chrome and FireFox (FF) are not setting the focus to the dropdownlist.  Here is the javascript for the focus.

    $(document).ready(function () {
        focusFirstElement(formId);
    });
    function focusFirstElement(formId) {
        $(formId).find('.editor-control:visible:enabled:not([readonly]):first').focus().select();
    }

    It seems that the dropdownlist input tag is styled to "display: none" which I could see then why Chrome and FF do not find the control with the current jquery selector (not sure why IE works).  Currently our solution is to have every page set the focus to the desired control, but we were looking for a common javascript to set the focus to first control that is enabled, visible, and not read only.

    Any ideas?  Is this possible with the kendo controls?

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    144 posts

    Posted 13 Jul Link to this post

    Hello,

    All Kendo controls have the CSS class k-widget (Common CSS classes). To focus the first DropDownList you could use the following code snippet: 

    var firstKendoControl = $(".k-widget")[0];
    if ($(firstKendoControl).hasClass("k-dropdown")) {
        var input = $(firstKendoControl).find("input")[0];
        var dropdown = $(input).data("kendoDropDownList");
        dropdown.focus();
    }

    Then if the first control is not a DropDown you could use your code.

    Regards,
    Peter Milchev
    Telerik by Progress
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top