Use Enter as Tab with knockout binding and KendoUI dropdown

Question

I have a page that uses KendoUI controls with knockout binding, and I need to use Enter instead of Tab to navigate through controls.

I managed to make it work great by using the solution posted here by Damien Sawyer and enhancing it with Shift-Enter as suggested by Andre Van Zuydam

ko.bindingHandlers.nextFieldOnEnter = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        j$(element).on('keydown', 'input, select', function (e) {
            var self = j$(this)
                , form = j$(element)
                , focusable
                , next
            ;
            var tabElements = 'input,a,select,button,textarea';
            if (e.shiftKey) {
                if (e.keyCode === 13) {
                    focusable = form.find(tabElements).filter(':visible');
                    prev = focusable.eq(focusable.index(this) - 1);

                    if (prev.length) {
                        prev.focus();
                    } else {
                        form.submit();
                    }
                }
            }
            else
            if (e.keyCode === 13) {
                focusable = form.find(tabElements).filter(':visible');
                var nextIndex = focusable.index(this) === focusable.length - 1 ? 0 : focusable.index(this) + 1;
                next = focusable.eq(nextIndex);
                next.focus();
                return false;
            }
        });
    } };

(my code uses j$ instead of $ for jquery because the project uses also mootools and I redefined jquery as j$)

However, I have a problem with kendoUI DropDown lists. The problem it is not or element, so it does not get focus (instead it is a span with special classes and unselecteable="on" attribute).

How should I update the ko binding code to set focus to dropdown on Enter? It works with Tab

Thanks

It sounds like you'll need to customize it a bit for the Kendo drop down. Can you post what your code looks like currently, maybe create a [fiddle](http://jsfiddle.net)? — Goose, Jan 06 '14 at 22:40
Yes, but I don't know how to do it. I updated the post with the code and link to original answer where I got the solution from — bzamfir, Jan 07 '14 at 12:05

score 1 · Accepted Answer · answered Jan 07 '14 at 19:02

Doing the best I can without having a Kendo sample I can test this out on, but I think you should be able to achieve this. When Kendo creates a dropdown, as you said it adds a bunch of other elements and isn't given focus the same way as a regular select element. You can find a kendo select, however, by first finding its parent span with the class of k-dropdown.

Try adding k-dropdown to tabElements as a class selector:

var tabElements = 'input,a,select,button,textarea,.k-dropdown';

Then, adjust the part where you give focus by adding a condition to check for Kendo dropdown. So instead of just this:

prev.focus();

Try something like this:

if (prev.hasClass('k-dropdown')) {
    prev.children('select').first().data("kendoDropDownList").focus();
} else {
    prev.focus();
}

Use Enter as Tab with knockout binding and KendoUI dropdown

1 Answers1