Question

Please look at my jsFiddle posted:

http://jsfiddle.net/chugh97/w3Kzt/1/

I have a fixed width jqGrid with scroll enabled and shrinktofit: false. Now when I tab through the 4th field in the jqGrid filter textbox, the filter textboxes are misalinged with the jqGrid columns. How can this be fixed?

Answer 1

jqGrid has very restricted support of keyboard navigation. I agree that the problem which you describe exist in the current (v. 4.3.1) implementation of jqGrid. So +1 from me for the question.

To fix the problem I suggest the following

$('#grid').closest('.ui-jqgrid-view')
    .find('.ui-jqgrid-htable .ui-search-toolbar .ui-th-column')
    .find('input, select')
    .focus(function (e) {
        var $header = $(e.target).closest('.ui-jqgrid-hdiv'),
            $body = $header.siblings('.ui-jqgrid-bdiv');

        setTimeout(function () {
            // we syncronize the scroll in the separate thread
            // to be sure that the new scrolling value
            // already set in the grid header
            $body[0].scrollLeft =  $header[0].scrollLeft;
        }, 0);
    });

The usage of setTimeout is required in the Google Chrome web browser for example.

See the demo here.