Setting focus to grid without using tabindex

[mattcashParticipant]

Hello,

We are experiencing issues with forcing the focus to a grid when tabbing off of an input that is directly before it in the HTML code. I can verify that using tabindex easily solves the problem, but due to the nature of some of the elements we use in our screens – tabindex is not an option.

My question is, why doesn’t the grid act as all of the other jqx elements in this situation? With any other element, when you TAB from the first input in a block, the second element correctly gains focus and so on. Yet, when we TAB from any element to a jqxGrid, it does not gain focus properly.

If the grid is the last element on the page (as it always is for us), TABbing from the input before it forces the cursor to the URL bar and then you have to hit TAB multiple times to get back into our screen, and even then you never get focused on the grid.

I have gone so far as to manually ‘focus’ and ‘selectcell’ on the grid when the ‘focusout’ event fires for the previous input, but even then the cursor jumps to the URL bar. Granted, after this jump, TABbing one or two more times will actually bring you into the grid, but we do not want the initial jump. Furthermore, I have been instructed in this forum in the past that jqx does not support hooking into the ‘focusout’ event.

Is there a way to properly set the focus to a grid when leaving an element without using tabindex in out HTML?

Thanks!

[mattcashParticipant]

I am not sure if I explained adequately the needs in our app. We are required to continue the natural flow of TAB into the grid at the bottom of the screen, starting at the the first cell in the first row and continuing forward. This forces us to have to know when we are leaving the last non-grid input (preceding the grid) and force the focus on the grid – first row – first cell, and then allow TAB to iterate the cells on that row. This, and the inability to use tabindex, is what led to our issue.

For now, I have overcome the obstacle with the following code:

    function forceTabToGrid(element, grid, cellname, index) {
        var $element = typeof (element) === "object" ? $(element) : element.indexOf("#") != -1 ? $(element) : $("#" + element);
        var $grid = grid === null ? null : typeof (grid) === "object" ? $(grid) : grid.indexOf("#") != -1 ? $(grid) : $("#" + grid);
        var $cellname = cellname;
        var $index = index || 0;

        $(document).on('keydown', function (e) {
            var $focused = $(':focus');

            // element is a jqxDateTimeInput object
            if (e.type === "keydown" && e.keyCode === 9 && $focused.parent().parent().hasClass('jqx-datetimeinput')) {
                if ($focused.parent().parent()[0].id === $element[0].id) {
                    $grid.jqxGrid('selectcell', $index, $cellname);
                    $grid.jqxGrid('focus');
                };
                return false;
            };

            return false;
        });
    };

Which can be called like this:

forceTabToGrid($transactionDate, $testGrid, 'firstColumnName')

This is my quick attempt at parsing out what type of jqx input is fired and it’s original id, and it seems to work nicely.

I am still curious, however, if there is a better approach – perhaps a solution more native in jqx?

[HristoParticipant]

Hello mattcash,

You could bind to focusout event as you say of the last element before jqxGrid and after that start to edit the first cell – ex: begincelledit or selectcell.
Also, you should set tabindex="1" for internal HTML elements. I would like to suggest you look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts